Jump to content
Search Community

Make ScrollTrigger draw a path in one direction only

Stanimish test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

Hello!  

Didn't find the hints here. How can I make the path draw with the help of DrawSVGPlugin and Scrolltrigger. But to make it be drawn only on scroll down and to leave what is already drawn on scroll up? I played with one of the demos on codepen using onUpdate method and self.direction but didn't succeed.

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

Link to comment
Share on other sites

  • Solution

Hey Stanimish. The trick to this is to create your animation separate from the ScrollTrigger, make sure it's paused, then use ScrollTrigger's onUpdate to change the progress if the new progress is greater than the old one. Applied to the linked demo:

See the Pen abZjjNr?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

  • 1 month later...
  • 7 months later...

@ZachSaucier hey there :) your post is very helpful - I'm trying to create something similar but using scrub with a number. I've tried this method using the onUpdate property, but unfortunately it doesn't seem to work for scrub with a number - it simply updates like scrub were set to true. Is there any workaround to get this one way scrub but with a number? thx for a reply :D

Link to comment
Share on other sites

Hey @mikel

Thank you for the quick reply and the demo. This would work just fine, but I'm looking for a solution where the scrub only applies whenever I scroll down like in the first example. My question is if I can somehow still apply the delay of the scrub to catch up when you define it with a number rather than just set it to true. So I still need the onUpdate but need it to catch up to the furthest scrolled position in like 3 seconds (similar to scrub: 3 but only whenever I scroll down). Does this make sense?

Link to comment
Share on other sites

@mikel

yes thank you, also a very nice option 🙂 but unfortunately again not what I'm looking for - once:true will only deactivate the animation from reversing once I completely scrolled to its end once. However, if I scroll back up in the middle of the animation it still reverses. I take it there is no option to make this work then? 😕

Link to comment
Share on other sites

You can animate the progress of a timeline.

 

onUpdate({ progress }) {   
  
  // add this if you want it to stop it when scrolling up
  // gsap.killTweensOf(tl);
  
  if (tl.progress() < progress) {
    gsap.to(tl, {
      progress: progress,
      duration: 3,
      overwrite: true
    });
  }
}

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...