kristoffer

It turned out pretty good https://codepen.io/krispen/pen/JjGpMzR

Ok, got it! Thanks a lot for the help!

Ok, so not related to the start value, but rather the trigger element. Thank you. Appreciate the help.

Yes, that is exactly it! Awesome! Now I just need to figure out what you did... So instead of using a 2s scrub in the scrolltrigger, you're creating that delay by tweening the balltween with 2 sec. The progress of that tween is then updated using a separate scrolltrigger that is triggered each time the pinning scrolltrigger, st, ends. I'm not sure how the 'end: +=100%' makes that scrolltrigger end where the pinning starts. What is it 100% of?

Hi Thanks for replying! Yes that is exactly the problem, and it's almost the solution I'm looking for. Only issue is that it should be opposite: Ball scaling should be dormant while section is pinned, and animating when sections are scrolling. Like an 'onUpdate' (or similar) when pinning is not active. Thanks, Kristoffer

https://codepen.io/krispen/pen/PoZExRG

Hi I have a video animation that I'm trying to control with ScrollTrigger. In the past I have scrolled videos through timelines, but it can become very complex, now, with scrolltrigger, it has the potential to become a lot simpler. The problem I have is when individual ScrollTriggers acting on the same element "collide" when using scrub and pinning together, and I'm not sure how to solve that. Without scrub and/or pinning the video scroll works very well. The video scroller codepen is NOT optimized for phones or pads. https://codepen.io/krispen/pen/dyGJMQa Another codepen illustrating the same problem with just scaling a ball: https://codepen.io/krispen/pen/PoZExRG The video pauses when the slides are pinned, and restarts when the pinning releases. Problem occurs when scrolling fast and the new a scrolltrigger is restarting the video before the previous scrub has finished. Is there a way to work around this issue? I have two ideas, but struggling with how to implement them (if it's even possible): 1) Instead of multiple scrolltriggers, use one scrolltrigger that has multiple trigger points ? 2) Somehow obtain "virtual" scroll values of the slides as they appear on the screen, i.e. scroll values pauses during the pinning and restart when pinning is released, and use that as an input to a single video-scrolltrigger ? Thanks, Kristoffer

Ok, .fromTo it will be then. Thanks for the help!

Hi Ok that make sense. I kinda suspected that after I had the same issue when trying to use ScrollTrigger video scroll-animation. It always jumped back to zero even though currentTime > 0. .fromTo fixed that issue. What is the best method for this issue in terms of animation performance and even browser support (if any difference)?

Figured it was easier to just use two gsap.to() with scrolltrigger, one fwd and one reverse. But it doesn't work correctly: fwd from x = 0 to x = 50vw works, but reverse instantly jumps back to x = 0. Am I doing something wrong? or could it be a bug maybe... ?? https://codepen.io/krispen/pen/abdLdzB

Hi Mikel, Thanks for your reply. That could work, so in your case the pause will be 20% ( 0.5/(1+0.5+1) ) of the scroll. But I would have to create two tweens, one fwd and one reverse, no easy shortcut as .play() and .reverse()? Tween a progress... would it be something like this: gsap.fromTo(timeline, {progress: 25%}, {progress: 75%}); ? Does that mean I can tween the time itself too: gsap.fromTo(timeline, {time: 2}, {time: 4}); ? Can this be reversed as well: gsap.fromTo(timeline, {time: 4}, {time: 2}); ? Thanks, Kristoffer

Hi Is it possible to trigger a timeline to "run" in reverse using ScrollTrigger with scrub? For just playing timeline in reverse I can use timeline.reverse(), but that doesn't seem to work when using ScrollTrigger with scrub. Right now I have two timelines, one forward and one reverse? See pen. Or is it possible to have ScrollTrigger (w/scrub) limited to a specific section of a timeline, say between 2 and 4 seconds? Kristoffer

Yes I can do that, but I'm really slow so it will probably not be anytime soon. Thanks for the help.

Yes I saw that post the other day. I was really hoping to find a balance between smoothing/snapping and the default browser scrollbar behavior to minimize scroll-hijacking.... I will probably end up with the scrolltrigger snap for non-touch devices and the draggable/inertia (with gsap club membership) for touch devices.

Ok I see the complexity with all the different scroll inputs. That's too bad, the Draggable / intertia combo is phenomenal (at least the codepen demos I've looked at) when it comes to scroll snapping. The ScrollTrigger plugin is an awesome addition to GSAP, love it, makes things a lot easier than scrolling timelines!!