[Layered pinning from bottom with 80% height sections]

Hey Zach

 

Indeed, it was much simpler that what I was trying to do !!!
I was blind and obnubilated by the ScrollTrigger documentation example.

 

Thank you so much for your help.

 

Best regards

[Layered pinning from bottom with 80% height sections]

Hi everyone, 

 

I'm trying to reproduce the following scroll animation on sections

This is very close to the "Layered Pinning From Bottom" example given in the ScrollTrigger documentation but with 80% height sections + scale animation. I thought it would be easy to achieve by inspiring myself with the documentation example.

 

Surprisingly, it has now been more than 2 days that I'm struggling with this animation without being successful.

 

Before asking for your help, I've done research and tried many different way of doing it.

Among all the numerous attempts I made, the closest to the expected result is the following

 

It "more or less" works - but it does not look good as in my reference...

I found the stagger setting by manual iterations, which is always a hint that we're not on the right path
Plus, my animation is presenting a kind of parallax effect when sections are animating concurrently which is not present in the animation of my web reference.
And finally, I do not know how to add a scale animation on the child img tags that each section includes...

 

If someone could help on this, that would be very much appreciated,

 

Best regards,

 

Sebastien

 

 

 

See the Pen VwmZggv by sebastienthiriet (@sebastienthiriet) on CodePen

[Text animation in and out with SplitText]

@mikel, @ZachSaucier,

thank you very much for your answers and your help.

I pushed a bit further the path initiated in my first pen and - and following scrupulously the advices of Zach - I've succeeded in making it work.
(at least for the text animation...)

 

See the Pen LYRzorw by sebastienthiriet (@sebastienthiriet) on CodePen

 

But have you an idea of what happen with the spaces between words that disappear ?
Isn't SplitText supposed to preserve spaces ?

 

I'll continue my work for the background animation and will post my result here for posterity.
 

[Text animation in and out with SplitText]

Hi again Zach,

 

here is my new pen following your suggestions :

 

See the Pen LYRzorw by sebastienthiriet (@sebastienthiriet) on CodePen

 

Does not work unfortunately... yet

By the way, by splitting by char, I lost spaces between words...

 

[Text animation in and out with SplitText]

Thanks Zach for your answer.

Ok I see I’ll try to do that.

 

What is your opinion about the 3 bands background animation ?

Should I set up 3 vertical black background divs, then apply an animation on it : but what is the best way of doing it ?

Should I shrink their width ?

Should I move them to the left with an overflow hidden wrapper ?

I understand that each animation can be achieved in very different ways, but smooth performance may require to do it the right way... and I’m sure that there is some community background and knowledge on what is the most relevant way ?

[Text animation in and out with SplitText]

Hi everyone, 

 

I’m discovering GreenSock animation framework, seems pretty powerful.
But I’m struggling reproducing the following text animation (that maybe some of you will find basic?) :
https://www.buildinamsterdam.com

(by animation, I'm speaking about the very first text animation on black screen where text appears from the bottom by words, then disappears on the left by chars, then black background disappears by collapsing into 3 vertical bands)

Before asking for your help, I've done my research on the forum and I discovered the need to use SplitText add-on.
I've set up a first approach on this pen :
 

For the exit animation, how do I handle the "overflow hidden" wrapping of all chars to make them disappear when they move left ?
How should I start for the 3 vertical bands reveal animation ?

 

Thanks for your kind help, very much appreciated
 

See the Pen xxEXXgM by sebastienthiriet (@sebastienthiriet) on CodePen