Jump to content

CHS Digital

ScrollTrigger Draw SVG in and out on both scroll down and up

Go to solution Solved by akapowl,

Recommended Posts

Hi all,


I am new to using ScrollTrigger (experience with GSAP library - which is awesome btw!). I am trying to trigger an SVG to draw in and draw out depending on the scroll position. I don't want the animation to be dependent on the scroll position so have set Scrub to false, so it triggers the full aniamtino to play on trigger. This working when scrolling down the page.


How do I go about doing the same in reverse - so when the user scrolls back up the reverse happens and the svg draws back in and out. And any advice on tidying up the chaining/animation triggered would be great too.


Any help would be really appreciated


See the Pen QWMxyEx by samwoodchs (@samwoodchs) on CodePen

Link to comment
Share on other sites

  • Solution

Hello @CHS Digital


You'll want to take a look at the toggleActions property for this - that property defines how how the playstate of a tween/timeline should be handled onEnter, onLeave, onEnterBack and onLeaveback (in that particular order) when it is not supposed to be scrubbed through ( which is the default btw, with a toggleActions-default of play none none none ).


To get the desired result you could then handle everything with just one single tween with a scrollTrigger attached - something like this


See the Pen 6563fe66e921d2d1cfefc2b9dc3ec1da by akapowl (@akapowl) on CodePen


  • Like 3
Link to comment
Share on other sites

50 minutes ago, CHS Digital said:

Ah great thank you @akapowl - I will play around with those values to get the output I'm looking for. Thanks


  • Like 2
Link to comment
Share on other sites

This is a lovely animation too! Really nice. 🥳

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