Jump to content


Image slide with image effects

Moderator Tag

Recommended Posts

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



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

Link to comment
Share on other sites

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!


  • Thanks 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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


  • Thanks 1
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.