Jump to content
Search Community

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

daanniel test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

  • daanniel changed the title to Rotating words in header section not appearing. Don't know how to fix, please help!

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

  • Like 2
Link to comment
Share on other sites

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!

 

Screen Shot 2024-05-27 at 14.09.50.png

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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! 

 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...