What is the best practice of tween few times one element (with ScrollTrigger)
Hi!
Can you explain what is the best practice animate one element with multiply triggers (ScrollTrigger) (different animations for one element)?
Example (watch codepen):
1. pin parent div and fade-in box animation
2. if we scroll to 1/3 of parent height of pinned element - move box to right
3. if we scroll to 2/3 of parent height of pinned element - rotate box
On my codepen demo i have some issues:
1. onRefresh (switch tabs on your browser) - broke my animatio
No, you are understanding it correctly. You should remove the immediateRender: false that was added and then you just have to fix the CSS:
See the Pen xxZRvjb?editors=0100 by GreenSock (@GreenSock) on CodePen