Wavy text on path - GSAP

[jillianadriana]

Hey friends,

 

I am working on some wavy text inspired by this effect: 

See the Pen VwpOeaL by jillianadriana (@jillianadriana) on CodePen

 

I am using Locomotive Scroll for the page I'm working on, which I'm assuming is why the vanilla JS version won't work as-is, so I'm attempting to build a GSAP version.

 

I have searched and searched and have tried to piece together a solution but obviously it isn't working the way I'd like. I spent most of my weekend on this and I have decided to just come ask for help directly.

 

I have used snippets of code pulled from various threads here and I've watched most of Carl's videos in Creative Coding Club, but I do have learning disabilities, so things just don't stick in my brain as well as I wish they would. That's why I tend to learn by doing, and I end up having to do things over and over and over before I finally get the hang of it. I say all of that to explain that I am not looking for shortcuts or someone to do the work for me. I am trying my best

 

J

See the Pen eYvXXYy by jillianadriana (@jillianadriana) on CodePen

[OSUblake]

Hey J!

 

You should animate the properties that you have in your first demo. No need for a motion path or anything like that.

 

This should get your started.

 

See the Pen oNZRxVd by GreenSock (@GreenSock) on CodePen

 

 

[jillianadriana]

Thanks, Blake. I was able to recreate your pen and it all makes sense to me, however I can't get it to work with Locomotive Scroll...

 

[OSUblake]

Locomotive scroll is a third party library, so we can't really offer support for it. 

 

There's an example in the docs that doesn't use another libary.

 

See the Pen gOgWELo by GreenSock (@GreenSock) on CodePen

 

 

See the Pen yLMWaoR by GreenSock (@GreenSock) on CodePen

 

 

[jillianadriana]

Thank you, maybe I will give that example a try. I appreciate your time and help!

[akapowl]

Hey @jillianadriana

 

With how locomotive-scroll works, the height of your body is not essential for things being scrollable - instead, the height of your scroller-element is.

Also, position: fixed won't work the way you'd expect because of transforms applied to the scrollable container element - things set to position: fixed will just scroll with the flow.

 

In this following example both - the height for it to be scrollable and the keeping things in position during scroll - are handled by pinning the section (which I removed the data-scroll-section attribute from for it to work) that contains your SVG and the end of the ScrollTrigger set to "+=500%"

 

See the Pen 38462411b5d76201fa435f44987578a9 by akapowl (@akapowl) on CodePen

 

 

 

But Blake is totally right - locomotive-scroll is not a GSAP product and thus support for it is actually not offered here.

 

If you consider keeping to use it, I would suggest getting familiar with how it works and what is essential for it to work properly in the first place - otherwise you'll likely run into lots of roadblocks further down the line.

 

On a different note; adding ScrollTriggers to individual tweens of a timeline as you tried in your pen above is one of the most common ScrollTrigger mistakes and you shouldn't do it like that.

 

Happy scrolling!

[jillianadriana]

Yes, I was actually thinking if I can just use GSAP for everything, that would be even better. So I appreciate this guidance.