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
Typically you wouldn't need something like this because you'd engineer things differently like Zach pointed out, but just for the record if you really need to wire up a ScrollTrigger so that it just animates between two labels, you can pause() the master timeline and use a tween of that timeline's playhead!
let master = gsap.timeline({paused: true});
master.to(...); // do whatever
master.addLabel("label1", 2).addLabel("label2", 5);
let labelTween = master.tweenFromTo("label1", "label2");
Sc
