flim Posted November 12, 2021 Share Posted November 12, 2021 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 More sharing options...
Solution GreenSock Posted November 12, 2021 Solution Share Posted November 12, 2021 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: Set invalidateOnRefresh to false (not true) Use a .fromTo() tween instead of a .from() so that you can define both the start and end values 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}); 2 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now