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

[CHS Digital]

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

[akapowl]

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

 

[CHS Digital]

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

 

[Cassie]

This is a lovely animation too! Really nice. 🥳