Website animation example - advice on how to achieve

[brian_tjb]

Hello all, I am new to Greensock and really excited to get this integrated into the next web project I do.  Would anyone know how to achieve this type of animation using GSAP and scroll trigger? Any advice or examples of something similar to the below Pinterest would be much appreciated.

https://www.pinterest.co.uk/pin/572449802649762947/feedback/?invite_code=f743ee43534d42cc9b99a2c87f30c74d&sender_id=725994539839502148

 

 

[mvaneijgen]

Hi @brian_tjb welcome to the forum! 

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

My advice would be just open up Codepen and start working on a minimal demo. Just leave ScrollTrigger out of it for now and just focus on the animation. Check out the following article if you want a quick start guide Or check the GSAP YouTube channel https://www.youtube.com/c/GreenSockLearning/videos or our own @Carl https://www.youtube.com/user/snorklTV/videos also has a lot of great videos

Start with one type of animation at a time or the background or the text and when you're stuck post the link to the code you have now. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. We love to see what you come up with! Hope it helps and happy tweening!

[Rodrigo]

Hi,

 

You might want to have a look at the Observer Plugin:

https://greensock.com/docs/v3/Plugins/Observer

 

Happy Tweening!