thomasbeck Posted September 2, 2022 Share Posted September 2, 2022 Hello I've been trying for 2 days to develop this animation with 2 cols : on the left images, on the right text I would like to animate first image with first text, (image slide from left above the previous one, text's opacity goes to the next paragraph) second image with second text, etc I'm stuck, animation is one element after an other Can you give me a tip please ? Thanks Here is a codepen : See the Pen abGbWqM by thmbck (@thmbck) on CodePen Link to comment Share on other sites More sharing options...
SteveS Posted September 2, 2022 Share Posted September 2, 2022 I sort of understand what you are asking, but not 100%. Could you explain better or show an example of what you are looking to accomplish? Link to comment Share on other sites More sharing options...
iDad5 Posted September 2, 2022 Share Posted September 2, 2022 My standard advice would be to first build a timelline without scroll(-trigger) and once that does what you want add scroll trigger. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted September 3, 2022 Share Posted September 3, 2022 You might want to look through these demos to find something similar and dissect how it was built: https://greensock.com/st-demos https://codepen.io/collection/AEbkkJ https://codepen.io/collection/DkvGzg Link to comment Share on other sites More sharing options...
thomasbeck Posted September 4, 2022 Author Share Posted September 4, 2022 On 9/2/2022 at 7:32 PM, SteveS said: I sort of understand what you are asking, but not 100%. Could you explain better or show an example of what you are looking to accomplish? On load, first image is visible on the left. On the right, I can see the 3 texts. Only the first one have opacity to 1, others have 0.3. On scroll, second image shows, first text opacity change to 0.3 and the second text goes to 1 and so on. I hope it's more understandable Link to comment Share on other sites More sharing options...
momo12 Posted September 15, 2022 Share Posted September 15, 2022 On 9/4/2022 at 9:48 AM, thomasbeck said: On load, first image is visible on the left. On the right, I can see the 3 texts. Only the first one have opacity to 1, others have 0.3. On scroll, second image shows, first text opacity change to 0.3 and the second text goes to 1 and so on. I hope it's more understandable Use Locomotive Scroll for having a smooth scroll (If you're not a premium user). Honestly, this kind of animation works better when the scroll is smooth You can set the initial state of the texts in css. Change them by using a Gsap.to(). Put each text inside a div. So, you can animate the text colors by detecting the wrapper of each text. Thanks to GSAP you don't need to be a powerful developer! It's amazing Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now