Scrolltriggers' deadly sin of triggering animated object with itself

[___wtem___]

Hello again GSAP folks

 

Im doing a horizontal animation, and i got close to what i want, but i think i can't reach 100% with my current approach. 

 

During scrolling, I move the text on the x-axis and change the scaleX of each letter from 0 to 1 on one edge of my horizontal movement, and then back to 0 on the other edge. My problem is that when letters start to scale, they start to get an extra white space between them: 

I'm looking to have this kind of transformation:

I could achieve this by animating width along with the scaling, but then i come to the topic of this post – if the letters will have 0 width, they trigger at once, as they all enter trigger start at the same time, and im lost here – im not sure if i should look for establishing some kind of triggers that aren't the animated elements and animate the width, or look for achieving the look without animating the width.
 

Thank you for your attention to this matter 🙃

See the Pen pvJLbpY by baltazar-fajto (@baltazar-fajto) on CodePen.

[Rodrigo]

Hi,

 

Indeed is a tricky situation. Why not use the text wrapper as a trigger and stagger the SplitText characters array? Perhaps something like this:

See the Pen GgJdOMW by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Rodrigo]

Mhhh... I forgot. The problem with using the animation target as the trigger is that the animation could interfere with the start/end points calculations made by ScrollTrigger. When those are affected by the animation (moving the element on the X/Y axis depending on the type of ScrollTrigger instance) then yes avoid that at all costs, especially if you have full control over the HTML structure, if you can add an extra element to wrap the element being animated, then that should be the preferred approach. Only use the animation target as a trigger as long as the animation on those elements doesn't interfere with the calculations made by ScrollTrigger and if you don't have any other option, it should be a last resort alternative.

[___wtem___]

@Rodrigo thank you for looking into this. I respond with a delay as I was still trying to push this idea further for a few days...
I think that the additional features of my animation make it more complex:

• they animate from scaleX 0 to 1 on one side of the screen and then animate scaleX 1 to 0 on the other side
• few chars animate at the same time (so for example, at one time snapsho,t char 1 is scaleX 0.7614, char 2 is scaleX 0.3957, and char 3 is scaleX 0.1404 etc.)

I've managed to take it a few steps further now, but got stuck again. I now can have a part of animation that looks exactly as i want, but only for the where chars scale 0 to 1 on enter. Then, when scaling back 1 to 0 that occurs on the exit of the text starts to happen, triggers of both intro (for those of the chars that haven't got animated yet) and outro scaling start to 'displace'  to the left, and scaling of the last chars of the outro animation happens off-screen. What i expected was that each char transformation would happen on the same place on the screen (as it happens at the beginning of the intro animation), and I can't understand why that 'displacement' occurs.  

PS Its easier to see on full width example than on forum embed

 

See the Pen ogXaqQQ by baltazar-fajto (@baltazar-fajto) on CodePen.

[Rodrigo]

Hi,

7 hours ago, ___wtem___ said:

few chars animate at the same time (so for example, at one time snapsho,t char 1 is scaleX 0.7614, char 2 is scaleX 0.3957, and char 3 is scaleX 0.1404 etc.)

In my demo I used the same amount of time for duration and stagger (0.5 seconds) that ensures that one instance is done before the other is completed.

7 hours ago, ___wtem___ said:

I've managed to take it a few steps further now, but got stuck again. I now can have a part of animation that looks exactly as i want, but only for the where chars scale 0 to 1 on enter. Then, when scaling back 1 to 0 that occurs on the exit of the text starts to happen, triggers of both intro (for those of the chars that haven't got animated yet) and outro scaling start to 'displace'  to the left, and scaling of the last chars of the outro animation happens off-screen. What i expected was that each char transformation would happen on the same place on the screen (as it happens at the beginning of the intro animation), and I can't understand why that 'displacement' occurs.  

Yeah this is a trickier situation I'm afraid, that could require more custom logic. I don't have time now to look into this and see if I can come up with something. Maybe you could look into creating a carousel of sort for each letter instead of translating the letter wrapper, which I believe is causing the problem in this case. Perhaps this guide can help:

https://3dtransforms.desandro.com/carousel

 

Hopefully this helps

Happy Tweening!

[___wtem___]

Thanks for sharing another idea, I think that would work the same as rotating chars on X axis – so there still would be a growing whitespace around each char when the transfom happens. 

 

But i arrived at the solution that gives the desired result.  Since i knew how to make separate in and out animations looking as i wanted to (what is a make or breake here is text align), the problem was how to make them one animation – finally ive decided to not to try make them one, but to create two of them, set them side to side, then mask 50% of each to show the other one. Since the animations are mirroring each other, I managed to sync them perfectly. 

I'm sure there must be a more elegant solution, but at this moment, I'm taking what works 🫡

[Rodrigo]

Maybe something like this:

See the Pen YPXBzXV by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!