Combining scrubbed and non-scrubbed ScrollTrigger animations
Hi, in my current project I'm using ScrollTrigger to create sliding panels that include elements that animate automatically in a timeline when they enter the viewport, as well as those that are controlled by scrubbing. If you take a look at my demo CodePen, you'll see that I've created two separate ScrollTrigger instances w/ corresponding timelines to handle these different animations: the first simply plays out a succession of elements in a (non-scrubbed) timeline, and the second allows the use
Think of it sorta like this:
let tl = gsap.timeline({ scrollTrigger: {scrub: true, ...}});
tl.to(...);
tl.add(() => {
gsap.to(...); // non-scrubbed. Just a regular animation that's triggered at a certain spot in the timeline
});
tl.to(...);
tl.add(() => {
//maybe you need to go to different values if it's going backwards...
if (tl.scrollTrigger.direction === -1) {
gsap.to(...); // backwards
} else {
gsap.to(...); // forwards
}
});
I hope that helps.
