Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Divisocial

Image slide with image effects

Recommended Posts

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

Link to post
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 post
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 post
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 post
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 post
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.

×