kristoffer

It turned out pretty good

See the Pen JjGpMzR by krispen (@krispen) on CodePen

2 hours ago, GreenSock said:

Yes, the "+=" means that it's directly in relation to the starting value. In other words "take the starting value and add 100% of the height of the trigger."

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

1 hour ago, mikel said:

 

end: "+=100%"  ->  height:100vh;  of  each step

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

See the Pen PoZExRG by krispen (@krispen) on CodePen

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.

See the Pen dyGJMQa by krispen (@krispen) on CodePen

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

See the Pen PoZExRG by krispen (@krispen) on CodePen

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...  ?? 

See the Pen abdLdzB by krispen (@krispen) on CodePen

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

See the Pen LYGzEpj by krispen (@krispen) on CodePen

27 minutes ago, ZachSaucier said:

I'd like to see a minimal demo of what you come up with if you're up for that  

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

45 minutes ago, ZachSaucier said:

You could make it snap immediately like what I do in this thread:

 

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.

50 minutes ago, GreenSock said:

Yeah, that's a totally different beast because with Draggable, we know EXACTLY when the drag ends (we listen for pointer/mouse/touch events) whereas that's impossible with scrolling. Users might grab the scrollbar to move it, they could flick their mouse wheel, they, could swipe their fingers on a touchpad, they could hit the spacebar, they could have JavaScript controlling the scroll position, etc., etc. Plus scrolling is often handled on a different thread. The only way to have any confidence that scrolling is "done" is to wait for a certain amount of time to elapse between "scroll" events, thus you cannot get that perfectly fluid interaction like Draggable with inertia. If you've got any ideas for making that work, I'm all ears. But from what I can tell, it's logically impossible (at least without major down sides). 

 

I really wish we had a magic bullet for ya. Or maybe a strategy exists that we could employ and I'm simply unaware. 

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)

12 minutes ago, ZachSaucier said:

So the demo that you link to doesn't do any snapping when you scroll on your devices?

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

34 minutes ago, ZachSaucier said:

Hey kristoffer. ScrollTrigger has its own snapping functionality. And ScrollTrigger also works great with CSS scroll snap positions. Have you already tried using those? See the ScrollTrigger docs for more info.

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: 

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen

See the Pen MzWzyv by PointC (@PointC) on CodePen

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 🤷‍♂️.

See the Pen KKdjjjG by krispen (@krispen) on CodePen

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

1 hour ago, OSUblake said:

You can use split-ease for that.

https://split-ease.js.org/

 

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