Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by kristoffer

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

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

    Another codepen illustrating the same problem with just scaling a ball:


    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 ?





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

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


  4. 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}); ?






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



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

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

    • Like 1
  7. 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!!

    • Like 1
  8. 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.

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


    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): 

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


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