Jump to content


Not animate with gsap.from

Go to solution Solved by GreenSock,

Recommended Posts

In this codepen, the #box1 didn't animate, but #box2 works, any idea?


And what is the setup if the div .animate is on the top the page, the animation play after the page load, and also play when the page down and the move up to the top?

See the Pen WNEgwLB by fredericklim (@fredericklim) on CodePen

Link to comment
Share on other sites

  • Solution

That's because you've got invalidateOnRefresh: true on a from() tween, so when it rewinds and flushes the recorded start/end values, it rewinds to -200 in this case (because that's the nature of a .from() tween - you told it to start at x: -200), so when the .from() tween initializes again and grabs the CURRENT values as the end values, it's grabbing -200. So it becomes a tween that's animating from x: -200 to x: -200 (no motion). It's a logic thing. 


I'll investigate options for working around this edge case automatically, but in the meantime you have several options: 

  1. Set invalidateOnRefresh to false (not true)
  2. Use a .fromTo() tween instead of a .from() so that you can define both the start and end values
  3. gsap.set() your initial values up front, and then use a .to() instead of a .from(). Like .set(...{x: -200}), and then .to(... {x: 0});
  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.