2

Im having some issues getting an animation to work using framer motion. Any help would be greatly appriciated.

Code Sandbox Example

abloom12
  • 25
  • 1
  • 4

1 Answers1

6

You went a bit too far trying to use custom properties here. Simple ternary conditional in animate did the trick.

Also, you had a bug in your increment decrement function, I fixed it too.

Check my solution here: https://codesandbox.io/s/framer-motion-issue-forked-6no3o?file=/src/App.js

indyanin
  • 812
  • 1
  • 8
  • 10
  • Thanks for the help. I started with custom properties bc Im going to eventually have 3 separate states for each tree I mapped out. What was I doing wrong with the custom properties? Im brand new to framer motion. – abloom12 Aug 29 '20 at 12:55
  • 1
    The problem with custom is that it is only rendered once so it does not respond to state changes thus you don't see UI updates on state change. The only use case I know is the one provided in the documentation which is, for example, to delay elements with different values like for example here https://codesandbox.io/s/framer-motion-issue-forked-fursm?file=/src/App.js . The solution provided is the recommended way of handling such situations regardless of how many states you have. – indyanin Aug 29 '20 at 16:43
  • How is this example working then, since the variant would need to be dynamic based off the direction. [example](https://codesandbox.io/s/framer-motion-image-gallery-pqvx3?fontsize=14&module=%2Fsrc%2FExample.tsx) – abloom12 Aug 29 '20 at 20:16
  • No, no it has nothing to do with the direction. When you map through your items, the value of delay is hardcoded depending of its index. Think of it as 3 separate objects holding animation propertis. It's dynamically assigned, yes, but only during initial render and then each object has hardcoded delay value (first 0, second 0,5 and the third 1). Did I make it clear? – indyanin Aug 30 '20 at 08:39
  • yeah that makes sense but I was refering to the example slide show i linked to in my last comment. but I think I have that figured out as well. thanks again for the help. – abloom12 Aug 31 '20 at 21:06