Image slide with image effects

[Divisocial 0 Likes (Newbie)]

I am trying to make a image slider, with same effects shown in the below video url

https://youtu.be/VfIfy5fZLhM

 

I have this code below:

    this.tl.from("#panel1", 4, {autoAlpha:0, ease: Sine.easeInOut})
      .set("#panel2", {top:0}, "+=2")
      .from("#panel2", 6, {autoAlpha:0, scale:1.5, ease: Sine.easeInOut})
      .set("#panel3", {top:0}, "+=2")
      .from("#panel3", 8, {autoAlpha:0, scale:1.5, ease: Sine.easeInOut})
 

I am trying to achieve the same image effect shown in the video [zoom in, out and second image is sliding inside]. Can someone please help?

See the Pen FnsqC by GreenSock (@GreenSock) on CodePen

[ZachSaucier 7,162 Likes (Superhero)]

Hey Divisocial. If you'd like our help debugging please make a minimal demo of your code so that we can help you out with your actual issue.

 

Also we highly suggest that you upgrade to GSAP 3. It's got a smaller file size, a sleeker API, and a bunch of new features!

 

[Divisocial 0 Likes (Newbie)]

Can you redirect to some article or something that can help me to have that kind of image effect as shown in the video?

[Divisocial 0 Likes (Newbie)]

@ZachSaucier i am actually learning gsap. I update the above gsap codepen. Can you please watch the video one?

[ZachSaucier 7,162 Likes (Superhero)]

I don't know of a resource that creates those exact effects. You should start out with the getting started article: