Not animate with gsap.from

[flim]

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

[GreenSock]

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});