Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Background color not animating via className change
See original GitHub issue2. Describe the bug
I was inspecting this switch/toggle example where the position of the handle animates as well as the background color of the component.
This is done by switching classNames based on state (.on and .off)
This example no longer works with recent versions of this package (using 2.9.4).
I understand this might be an API change instead of a bug, but is there a way to achieve what’s being showcased with newer versions of this package?
I’m using tailwindcss, so i was hoping to just add a bg-green-400 when the toggle is on.
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
https://codesandbox.io/s/0d68e?file=/package.json
4. Steps to reproduce
Steps to reproduce the behavior:
- Open codesandbox link
- Switch to a recent version of framer-motion
- try the toggle
5. Expected behavior
Was expecting the toggle to animate position and color.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:8 (2 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
no idea sorry
you need to add a transition to your class if you want to animate via classname. I guess the layout prop let you animate only the layout position not the color or background color.
Here a codesandbox with both solution.
https://codesandbox.io/s/framer-motion-automatic-animation-switch-demo-forked-dk1bj?file=/src/App.js