Apply text reveal to multiple elements at the same time

[archimedo]

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

[mvaneijgen]

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

[archimedo]

Thank you so much that was really helpful!

[archimedo]

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?

[Windpixel]

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.

[archimedo]

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?

[mvaneijgen]

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.