Jump to content
GreenSock

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

Change and animate images by clicking on different buttons.

Recommended Posts

Hello, I am actually trying to achieve this animation effect using GSAP. 

https://tympanus.net/Development/ImageTransitions/index6.html 

 

In "other" option select example 4 so you can see what i'm trying to achieve. They have used css3 keyframe for this effect but i would like to make it using GSAP.

Only thing is, each button has assigned one image in sequence.When I click on button 1, first image should be visible in image-wrapper with similar animation. Clicking on button2 replace image-2 and so on. Could someone help me with this. Thanks in advance.

See the Pen pLXLBJ by LeoZoe (@LeoZoe) on CodePen

Link to comment
Share on other sites

It is really easy to convert a CSS animation to GSAP, you just need to copy it mostly as it is. Only difference here is I am setting zIndex using set method. There is some additional code that is required to take care of rapid clicking because you are using button for each image.

 

Take a  look at docs in CSSPlugin, it will help you understand CSS animations using GSAP so you can convert easily.

 

https://greensock.com/docs/Plugins/CSSPlugin

 

See the Pen MVMXgQ?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 6
Link to comment
Share on other sites

Sir, I really appreciate for your help. It's completely brilliant and motivating me to learn about GSAP further. I will be continuing with my interest using GSAP animation.  Thank you once again.

  • Like 5
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.
×