Ian Robinson Posted January 23, 2022 Share Posted January 23, 2022 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 Link to comment Share on other sites More sharing options...
Solution PointC Posted January 23, 2022 Solution Share Posted January 23, 2022 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. 4 Link to comment Share on other sites More sharing options...
Ian Robinson Posted January 24, 2022 Author Share Posted January 24, 2022 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! Link to comment Share on other sites More sharing options...
akapowl Posted January 24, 2022 Share Posted January 24, 2022 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. 5 Link to comment Share on other sites More sharing options...
Ian Robinson Posted January 25, 2022 Author Share Posted January 25, 2022 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now