Jump to content
GreenSock

Stanimish

Make ScrollTrigger draw a path in one direction only

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 @maettuu,

 

Welcome to the GreenSock Forum.

 

Just do it without onUpdate.

 

See the Pen JjNmpKb by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

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

 

Hey @maettuu,

 

You could use the option

 

 once:true  // an option

 

Happy scrolling ...

Mikel

 

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

@OSUblake

oh wow that is smart, didn't know this was possible - thx for the response! I will try it out 😀

  • Like 1
Link to comment
Share on other sites

2 minutes ago, maettuu said:

oh wow that is smart, didn't know this was possible

 

That's all the scrub feature does under the hood. The number you pass in is just the duration. 😉

 

  • Like 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.
×