Share Posted July 5, 2022 Im trying to achieve a multiple line text reveal effect where each line is revealed individually, shown here, but I cant figure out how to animate them individually. In this demo the text elements all have the same class and the code is just using that class to trigger and target? See the Pen NWYGEKo by gjjr (@gjjr) on CodePen Link to comment Share on other sites More sharing options...
Solution Solution Share Posted July 5, 2022 Hey there! You need to loop around the titles like so - //grab all the titles let titles = gsap.utils.toArray(".title-text"); //loop around them titles.forEach((title) => { // add a scrollTriggered tween for each title gsap.from(title, { y: "100%", duration: 0.8, scrollTrigger: { markers: true, trigger: title, start: "top center", end: "bottom center", scrub: 0.8 } }); }); Also, you're using a timeline in the original demo (which will work) but timeline's are for sequencing multiple tweens. e.g. let tl = gsap.timeline(); tl.to(".title-text", { y: "100%", }) tl.to(".something-else", { rotation: 360, }) If you just have one animation you can just use a tween instead. Hope this helps! 2 Link to comment Share on other sites More sharing options...
Share Posted July 5, 2022 Hey @cereal_beast how is going?? you are using the same target for all titles, so this executes the triggers at the same time, so I did a quick refactor. I used an iterator to keep the correct trigger, and then I used the same animation! I hope helps you! See the Pen MWVazVe by nazarenooviedo (@nazarenooviedo) on CodePen 3 Link to comment Share on other sites More sharing options...
Author Share Posted July 5, 2022 Thank you guys! 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