DrawSVG on sidescroll issue

[Ian Robinson]

I've been working at this for days and at best I was able to get the "X" to slightly grow on scroll by adjusting the numbers (and when I put it in CodePen it doesn't work at all which is a flag) as ultimately it seems so basic to me but I'm obviously overlooking something very simple as: gsap.from(".st0", {duration:5, drawSVG: 1}); does exactly what I want it to do running the animation independently, but when I link the animation with the sidescrolling it only does a middle fraction of the animation.

Basics: I want the "X" to grow from maybe 50px line lengths all the way out to the edges by the time it's about scrolled off the screen and please let me know where I'm messing up.

See the Pen gOGVVxv by ilrobinson (@ilrobinson) on CodePen

[PointC]

Hi @Ian Robinson 

 

Welcome to the forum and thanks for being a Club member.

 

Is this what you needed?

See the Pen 4b2ce82c10dd89ff7ed572d4bf40dd5b by PointC (@PointC) on CodePen

 

Happy tweening and welcome aboard.

 

[Ian Robinson]

YES! I admittedly am having a tough time wrapping my head around some of the nuances of GSAP and find myself stumbling over the smallest things. I will definitely take a close look at your solve and hope it will stick. Thank you so much, Craig!

[akapowl]

Hello @Ian Robinson

 

Here is an alternative approach to what @PointC suggested, utilizing ScrollTrigger's containerAnimation property, that came with GSAP 3.8.0.

 

Approaching it like this will be tremendously helpful for when you want to trigger animations on different sections in that fake-horizontal-scroll scenario later on, too.

 

See the Pen NWwKpEe by akapowl (@akapowl) on CodePen

 

 

Here's what the docs say:

 

containerAnimation

Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a  See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen  and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger.

 

 

[Ian Robinson]

Thank you so much, Akapowl as admittedly that was my next hurdle I've been trying to get over as trying to get the proper guides has been a bit of a struggle as initially I was trying to eyeball/guess what was happening off-screen and I had come across that specific tutorial and was working through trying to figure it out so your CodePen is much appreciated!