timeline - clear() doesn't work

[Jacky Yang]

Hello, Teams, I have a timeline which using scrollTrigger to animate the green section('.sec-5') element. I want the animation only execute when media match 992 px, not execute below 992 px. I use tl.clear() when media is below 992, the animation pause, but I have to scroll a little second to scroll down, this is not I want, I want to scroll down immediately not stuck there. Maybe I misuse the clear() function or is any other solution for this case? Thanks!

See the Pen GRdvgLx?editors=1010 by jackyyang (@jackyyang) on CodePen

[akapowl]

While you clear the timeline on that breakpoint (meaning you empty it of all the tweens, timelines, and callbacks it contains), I suppose the timeline instance itself, which has the ScrollTrigger with the pin (!) attached will be present no matter what the viewport size is because you created it outside of any matchMedia call beforehand - so you will probably want to change that.

Does that work more like what you intended?

 

See the Pen dyezGJO by akapowl (@akapowl) on CodePen

[Jacky Yang]

Hi, akapowl , thanks for the answer, that works!🤩