SebT

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

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 https://codepen.io/sebastienthiriet/pen/VwmZggv 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

@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...) https://codepen.io/sebastienthiriet/pen/LYRzorw 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.

Hi again Zach, here is my new pen following your suggestions : https://codepen.io/sebastienthiriet/pen/LYRzorw Does not work unfortunately... yet By the way, by splitting by char, I lost spaces between words...

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 ?

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