ScrollTrigger animation help

[Barbo]

Hi,

I'm trying to recreate the landing animation of this site: https://formoitalia.com/about. I just need the animation up until the main paragraph appears, included.

In the CodePen attached you can see what I've done so far. Only for desktop, not optimized for mobile.  I have 3 problems:

1. When you scroll back, the animation won't behave correctly. The translation on the X axis is broken and I don't know how to fix it.
2. When trying to enlarge the text, since it's divided in 3 rows, it messes with line heights. 
3. How to obtain the paragraph "scroll up" effect.

Now, the second and third points I know are vague, and I don't expect a tutorial nor that someone does that for me.  I would like to receive some guidance, on how to implement it.

Instead I would like to get some help with the first point, since I'm stuck and don't know the reason.

 

Thank you so much for your help, 

Have a nice day!

See the Pen yLrvQJa by Barbo-the-flexboxer (@Barbo-the-flexboxer) on CodePen

[Rodrigo]

Hi,

 

1 hour ago, Barbo said:

When you scroll back, the animation won't behave correctly. The translation on the X axis is broken and I don't know how to fix it.

The main issue could stem from the fact that you're animating the trigger element on the Y axis, that obviously creates a problem. I would recommend you to wrap your element around an extra one, use this extra element as the trigger and animate the child element on the Y axis in order to avoid this problem.

1 hour ago, Barbo said:

When trying to enlarge the text, since it's divided in 3 rows, it messes with line heights. 

Same as the previous problem, you're changing the height of the element, which messes the calculations ScrollTrigger does, try to avoid doing that.

1 hour ago, Barbo said:

How to obtain the paragraph "scroll up" effect.

I read this a few times and I don't really understand what you mean with this.

 

The final advice I could give you is to pin the entire container of both text elements at the same time in order to avoid issues, I think the site you're linking actually is doing that and that would be my approach in  this case TBH.

 

Hopefully this helps.

Happy Tweening!