Rotating words in header section not appearing. Don't know how to fix, please help!

[daanniel]

Hi guys, I'm new to GSAP and feeling quite lost.

 

I've been trying to animate our headline, admittedly with the help of chatgpt, and for some reason all the words are not appearing. 

 

Here is the link to the website: https://fastnet-d77743-71029233dd65025a54d37a44.webflow.io

 

Would hugely appreciate any help setting this up, and will readily provide any information necessary. Thank you so much!
 

See the Pen mdYrJRy by Daniel-L-the-bold (@Daniel-L-the-bold) on CodePen

[mvaneijgen]

Hi @daanniel welcome to the forum!

 

Our own @Carl has a great tutorial on that

 

 

 

 

I've tweaked your pen a bit and made it so that all words are stacked on top of each other with CSS. As you can see there is a lot build in to GSAP to make our lives a lot easier, in this case mainly stagger (read more here). I've removed most of your logic and just used the build in GSAP features to get 90% of the same result. The last 10% is explained in the second video of Carl, which is just so clever that I'll let them explain and leave it for you to add to your project. Hope it helps and happy tweening! 

 

See the Pen eYadZEr?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Rodrigo]

Hi,

 

Normally my brain works better with loops, especially if you need the first element to be visible:

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

 

Happy Tweening!

[daanniel]

Thank you both so much! Finally got it working. I now feel as though the design is a little bare. 

 

How would one achieve it so that all of the options are on screen, with lowered opacity, animating similarly but where the top item goes to the bottom as it scrolls up etc?

 

I've attached a screenshot of our figma design for reference.

 

More than happy to be pointed in the right direction/learning resource. Thanks again!

 

[GSAP Helper]

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!

[daanniel]

1 hour ago, GSAP Helper said:

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!

I've tried a few things, this is where I managed to get it.

 

See the Pen NWVbrWv by Daniel-L-the-bold (@Daniel-L-the-bold) on CodePen

[mvaneijgen]

I would do something like this. You could add some more tweens to have different levels of opacity or if you want them to loop check out the Seamlessly loop helper function https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/ 

 

 

See the Pen XWwNKKO?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

A while back I've written something about an observation I've made what I see others do and also fall in to myself sometimes and that is optimising code before it is even working. What always helps me is just writing the whole animation out by hand which make it so you can see patterns emerging, when you've got that down it will be much easier to optimise code. Check out the post, maybe it also helps you in your endeavours. Happy tweening!