card background pattern
Level 2

Animating React with Framer Motion

Unlock Full Course

$49.99 $39.99

Or

$24.99/Month

Motion Element

Now that we are all set up and ready to code, we will start off by taking a look at Motion elements. motion.[ELEMENT] is the foundation of Framer Motion.

Downloads

Comments

Michael
about 2 months ago

@@Mike What's happening is that the x animation has to be out of its parent's container. The reason 2000 works is because the element is outside of its parent's container ala off the screen. If you were to shrink your viewport, you would be able to pick a lesser value. To visualize what I mean, adding a style={{ border: "1px solid black" }} will help.

@Mike
updated about 2 months ago

@Dan Just piggy backing off of what Mike said, I had to change the initial x value to 2000. It worked in both Chrome and Firefox.

Dan
3 months ago

@Mike Hey Mike. I got the same behavior in Chrome. In Firefox things worked okay for me. I was able to get around it sometimes by changing some values, but it seems like either a bug in Framer Motion with Chrome maybe something Chrome itself. But I have not to this point been able reproduce this on other elements.

Mike
3 months ago

Is anyone not having any luck with the x translate? Like Scott, I have my initial set at 100 and my animate to 0. When I refresh the page there's no movement but I do see the entire screen spasm for the duration time, set at 1 second.

Francis
3 months ago

Testing ...... Hi Scott, Thank you for creating these amazing React Tutorials! There's some bug in your latest tutorial. I could not make any comments there. Also, tried to play the videos on my ChromeOS system, they stopped after 3 seconds. Best!

Something to say?

Become a Pro