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!!

It's a Lenovo Thinkpad P50s, Windows 10 (1909). It does not work on Chrome (83.0.4103.116) or Edge (83.0.478.54). Opera and Firefox seems to work now ?

Ok, so it works on my mobile, but still not on the laptop. I see that the snapping behaves similar to the CSS snap... as you scroll and let go of the finger the scroll slows down, but then to accelerate as the scrolltrigger-snap "takes over" and finally slows down as it approach the snapping point. The Draggable and Inertia has an incredibly smooth deceleration from you let go of the finger all the way to the snapping point, no matter the scroll speed.

I have the same issue with the advanced version of this demo as well. any other scroll-to-snap demos other than those two I can try?

Ok it can be found here: https://gofile.io/d/OSlxUD (never used gofile.io before, so let me know if it doesn't work)

nope. I have just tried on my laptop with touchpad. I did a screen capture mp4, is there a way to share it here?

Hi Zach, thank you for replying. Yes I have tried both. The CSS snap behavior is very odd IMO, scroll deceleration is very non-linear, looks really bad (not a ScrollTrigger issue, just don't like how the CSS snap works). The ScrollTrigger built-in snap doesn't work for me, not sure why. Tried on chrome, edge, firefox,..nothing, maybe something to do with touchpad driver (Synaptics, Lenovo Thinkpad P50s). When scrolling it appears as if there is no snap at all. I tried this: https://codepen.io/GreenSock/pen/YzygYvM. The best snap behavior I have ever seen is the Draggable with inertia plugin when used on touch device, very smooth. Good example is PointC's slider (on a touch device): https://codepen.io/PointC/pen/MzWzyv

Hi Can you use the inertia plugin for snapping with scrolltrigger for mousewheel/touchpad? Looking for similar scroll-to-snap behavior as with Draggable and InertiaPlugin for touch devices.

Made a simple CodePen, and now it seems to work of course. Not really sure what I did different this time ?‍♂️. https://codepen.io/krispen/pen/KKdjjjG Thanks, Kristoffer

... if I could only figure out how to use it ?. I tried to use what was mentioned in this topic : More specifically: gsap.to(box, 2, { y: 400, ease: SplitEase(0.7, 0.2)}); const mySplitEase = new Ease(t => SplitEase(t, 0.7, 0.2, 2)); gsap.to(box, 2, { y: 400, ease: mySplitEase}); But it's not working. Any ideas? Maybe it's a GSAP 3.x compatibility issue? (I used this script tag <script src="https://unpkg.com/split-ease" charset="utf-8"></script>) I sent an email to the author @lunelson@gmail.com as well. Thanks, Kristoffer

Ahh perfect. That's what I was looking for. Thank you.