Jump to content
Search Community

Newbie - help with animation

thomasbeck test
Moderator Tag

Recommended Posts

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

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

  • 2 weeks later...
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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...