Scrolltrigger: Trigger animation overlap issue

[mrgreen]

Hi, I'm having an issue with an animation timeline which doesn't have scrub applied to it as it needs to play at normal velocity when triggered, whilst the previous trigger and the next have scrub applied to them.

Basically what happens is that if you scroll fast from a triggered timeline which has scrub applied, to one which doesn't, it might skip it and have the animation without a scrub overlap into the next animation. Is there anything I can do to prevent this? The scrubbed animations work well because they follow the scroll velocity, however when I have an animation without scrub and it's triggered I would need for the user to wait a couple of seconds before scrolling so that the animation completes or else it will continue playing while overlapping into the next trigger. Is there perhaps some way I can set a duration or specific time before the user can continue scrolling to the next trigger?

 

    var zoomInTl = gsap.timeline({});
    ScrollTrigger.create({
      animation: zoomInTl,
      trigger: ".hero",
      start: "top top",
      end: "100%",
      scrub: true,
      markers: true
   });

    zoomInTl.to(".hero-container", 1.8, { x: '+=150%', y: '-=10%', scale: 10, ease: "none" })
    ;

    var offerLeftTl = gsap.timeline({});
    ScrollTrigger.create({
      animation: offerLeftTl,
      trigger: ".offer-container-left",
      start: "bottom top",
      endTrigger: ".offer-container-right",
      end: "100%",
      markers: true,
      toggleActions: "play none none reset"
   });

   offerLeftTl.to(".offer-container-left", 0.5, { autoAlpha: 1, ease: "power1.out"})
   .from(".offer-container-left .offer-decoration", 1.5, { y:'-=50%', transformOrigin:"55% 0%", autoAlpha: 0, ease: "elastic.out(0.8, 0.3)" }, '-=1.2')
   .fromTo(".offer-container-left .offer-decoration", 1.8, { rotation:-3, transformOrigin:"55% 0%" }, { rotation: 3, repeat: -1, yoyo: true, transformOrigin:"55% 0%", ease: "sine.inOut" }, '-=0.24')
   ;

   var zoomOutTl = gsap.timeline({});
   ScrollTrigger.create({
     animation: zoomOutTl,
     trigger: ".offer-container-right",
     start: "150%",
     end: "250%",
     markers: true,
     scrub: true
  });

  zoomOutTl.to(".offer-container-left", 0.5, { autoAlpha: 0, ease: "power1.out"})
  .to(".hero-container", 1.8, { x:'-=150%', y:'+=10%', scale: 2, ease: "none" })
  ;

 

[mrgreen]

Was an issue of toggleActions, used toggleActions: "play reset resume reset" to reset the animation onLeave so that it doesn't overlap with the next trigger

[GreenSock]

You might also want to look into the "preventOverlaps" and "fastScrollEnd" features from the latest release - see the announcement here:

 

 

Happy tweening/scrolling!