balaurul Posted February 12, 2021 Share Posted February 12, 2021 Hello everybody! I need a little help with something. I got an idea but after several attempts, I couldn't make it work. I need the words to be initially stacked on top of each other with position absolute and overflow hidden, then to set gsap.set(".word", {yPercent: 110}) and afterwards to be translated up or down in order to show a word at a time on loop. It probabbly requires staggered animation that animates them to yPercent: 0 and then yPercent: -110. I'm new to JS and GSAP so any kind of advice will help! Thanks in advance! See the Pen BaQoVmE#code-area by balaurul (@balaurul) on CodePen Link to comment Share on other sites More sharing options...
tailbreezy Posted February 12, 2021 Share Posted February 12, 2021 Sure. @Carl made a nice demo showcasing this exact method. See the Pen a045c5d4c5592c20935539ae99be2b3e?editors=1010 by dadacoded (@dadacoded) on CodePen 5 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 12, 2021 Share Posted February 12, 2021 @tailbreezy Thanks for responding! It would be nice if you also included a link to Carl's showcase of this method 2 Link to comment Share on other sites More sharing options...
tailbreezy Posted February 12, 2021 Share Posted February 12, 2021 @ZachSaucier There is a link right on top of the JS portion 3 Link to comment Share on other sites More sharing options...
balaurul Posted February 13, 2021 Author Share Posted February 13, 2021 Thank you a lot @tailbreezy for sharing and implementation! Also thank you @Carl for this method. This is exactly what I need 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