daanniel Posted May 24 Share Posted May 24 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 More sharing options...
mvaneijgen Posted May 24 Share Posted May 24 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 2 Link to comment Share on other sites More sharing options...
Rodrigo Posted May 24 Share Posted May 24 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! Link to comment Share on other sites More sharing options...
daanniel Posted May 27 Author Share Posted May 27 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! Link to comment Share on other sites More sharing options...
GSAP Helper Posted May 27 Share Posted May 27 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! Link to comment Share on other sites More sharing options...
daanniel Posted May 27 Author Share Posted May 27 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 More sharing options...
mvaneijgen Posted May 27 Share Posted May 27 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 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