archimedo Posted December 23, 2023 Share Posted December 23, 2023 Hi, I'm trying to apply a text reveal effect so that the text will appear letter by letter, I managed to get this effect but I'd like to apply it on multiple text elements at the same time, while now it starts from the first '.animated-text' element an all the others follow. here's a Codepen link of what I have done so far. Can you help me understand what I am doing wrong? Thanks! See the Pen RwdwYry by aieio (@aieio) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 23, 2023 Share Posted December 23, 2023 A GSAP tween works based on what you tell it to animate, if it encounters an array and you tell it to stagger it will animate your array one by one. See here your original code where we console.log() the chars you want to animate. As you can see there are 64 items in the array and you tween tells them to aniamte in a staggered fashion one by one. See the Pen KKEKGwa?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen Below a pen with updated logic and some other tweaks. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! See the Pen GReRYRV?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen 4 Link to comment Share on other sites More sharing options...
archimedo Posted December 23, 2023 Author Share Posted December 23, 2023 Thank you so much that was really helpful! Link to comment Share on other sites More sharing options...
archimedo Posted January 6 Author Share Posted January 6 On 12/23/2023 at 10:42 AM, mvaneijgen said: A GSAP tween works based on what you tell it to animate, if it encounters an array and you tell it to stagger it will animate your array one by one. See here your original code where we console.log() the chars you want to animate. As you can see there are 64 items in the array and you tween tells them to aniamte in a staggered fashion one by one. Below a pen with updated logic and some other tweaks. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! I was trying to expand this animation with an extra behaviour: I would like to trigger the animation only when the text element come into view, so I've tried with scrolltrigger but is not working Here's a codepen of what I did, but I'm a bit confused where to add the scroll trigger function See the Pen NWJNveY by aieio (@aieio) on CodePen Can you help with that please? Link to comment Share on other sites More sharing options...
Windpixel Posted January 7 Share Posted January 7 4 hours ago, archimedo said: I was trying to expand this animation with an extra behaviour: I would like to trigger the animation only when the text element come into view, so I've tried with scrolltrigger but is not working Here's a codepen of what I did, but I'm a bit confused where to add the scroll trigger function Can you help with that please? Hi Archimedo, Here is one (very rushed) solution.. Firstly, I notice that you didn't add Scroll Trigger to the pen, so make sure that you add scroll trigger, and then register it. gsap.registerPlugin(ScrollTrigger); I noticed you had added 2 different coloured sections. So I guess thats how you want to group them. I have made a bit of a quick setup, but the general idea is to get each .wrapper ( I have called theme scenes in this case ), for each of them create a timeline with a scroll trigger, then within those scene objects, we go get all the lines, and add tweens to the timeline. In this case I have pinned and scrubbed the timeline if you want to force people to watch. See the Pen gOErGQd by windpixel (@windpixel) on CodePen Or we can turn pin off and scrub off for a different effect: See the Pen rNReGEM by windpixel (@windpixel) on CodePen I hope this helps, let me know if you have any questions about it. 3 Link to comment Share on other sites More sharing options...
archimedo Posted January 10 Author Share Posted January 10 thank you very much! I only have a last question, would it be possible to not break the words once they are converted into characters? Link to comment Share on other sites More sharing options...
mvaneijgen Posted January 11 Share Posted January 11 8 hours ago, archimedo said: thank you very much! I only have a last question, would it be possible to not break the words once they are converted into characters? Can you elaborate on this, I'm not sure what you mean? You am however using a third party plugin splitType to split your letters and we like to scope these forums to GSAP questions only, so we can't really help with third party plugin. We do offer our own SplitText Plugin, but that is a plugin of our club members. 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