How to create a image transition animation same like in the demo link

[bootstrap007 6 Likes (Newbie)]

Hi,

 

How to add an image transition effect the same as in the below link to the CodePen demo using GSAP? I am talking about the image only not the text effect here. Is it possible to add the same image effect to the swiper slider?

 

https://tympanus.net/Development/TextTrailEffect/index2.html

 

Thanks

 

See the Pen PomjzKW by bootstrap007 (@bootstrap007) on CodePen

[Cassie 5,406 Likes (Superhero)]

Hi @bootstrap007

The best place to go to work out how they're doing that would be the github for that demo. All the code is there! It looks like they're using GSAP too.

Without digging in - I imagine the image is being masked and then the X value or X scale of the mask is being animated. Looks like an Expo Out ease

 

[bootstrap007 6 Likes (Newbie)]

@Cassie Thanks for the reply. I was wondering that if possible to add the same image effect to the swiper slider using GSAP?

 

Thanks

[Cassie 5,406 Likes (Superhero)]

From a GSAP perspective yes.

I don't know what slider you're using though, you'll have to take a look at what callbacks you have available to you.

Here's a masking thread that will help you -
 

If you have a specific GSAP related question we'll be happy to help - but it's a bit out of the scope of these forums to build this for you.

[bootstrap007 6 Likes (Newbie)]

@Cassie Thanks for the reference. Appreciate it.