Help Playing Non-Scrubbed Timeline Inside a Pinned Scrubbed ScrollTrigger

[Ken Flores]

Hi everyone,

 

I’m running into a specific issue where I need to play a regular (non-scrubbed) timeline inside a pinned section that is scrubbed.

 

Here’s what I’m trying to achieve:

 

• I have a ScrollTrigger that pins a section (let’s call it #host) for a certain scroll distance.

• Inside that, I animate .intro-content with scrub as the user scrolls — this part works fine.

• Once .intro-content fades out, I want .speaker-content to animate in like a normal GSAP animation — not scrubbed — with some epic entrance.

• However, I still want this second animation to be bound to the scroll position (reverses when scrolling back), just not scrubbed like the first.

 

Right now, everything plays scrubbed if it’s in the same timeline, and if I break it out into another timeline, it seems disconnected or doesn’t trigger correctly inside the pinned context.

See the Pen NPqVoXq by kenneth-brian-flores (@kenneth-brian-flores) on CodePen.

[mvaneijgen]

Instead of adding it to the timeline use the ScrollTrigger callbacks to onLeave and onEnterBack .play() or .reverse() the timeline you create in in scene2() 

 

You then will lose the pin you had, but you can easily create a separate ScrollTrigger that just does the pinning (no animation at all) and then you are in full control of the pinning (if you want that) 

 

Hope it helps and happy tweening! 

 

See the Pen yyNWmQB?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen.