Jump to content
Search Community

How to achieve this animation with GSAP?

inGrooVe test
Moderator Tag

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

It seems you're asking about the banner image/slideshow transitions. This would be quite a simple setup. I would image setting up a stack of divs, each containing an image and a few text elements (in their final positions) and then treating each "slide" as its own timeline stuffed with from() tweens ... all then stuffed into a master timeline to manage the transitions between slides and the progress bar.

 

I'll see if I can create an example in a little while.

Link to comment
Share on other sites

Hi,

 

Here are some simple examples of content sliders. As Shaun points you just need to set up the basic CSS and then create a timeline, an individual tween for each slide or call a function to show/hide the slides (this will depend on what you're aiming for).

 

This is a basic and simple set up created by Chrysto:

See the Pen LckBh by bassta (@bassta) on CodePen

 

And this is something I made based on Chrysto's pen:

See the Pen CeDkc by rhernando (@rhernando) on CodePen

 

Hopefully those will give you enough to get started.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Thanks you all your answers! Diacho, Shaun and Rodrigo!

 

No, like Diaco says i was asking for the 3 boxes below the slideshow, i had problems tweening onhover items when changing its size due to the change in size of the active area of the hover, but of course creating the hover on the wrapper element and tween its internal elements is what I needed, it is simple but it helps me a lot.

 

It seems you're asking about the banner image/slideshow transitions. This would be quite a simple setup. I would image setting up a stack of divs, each containing an image and a few text elements (in their final positions) and then treating each "slide" as its own timeline stuffed with from() tweens ... all then stuffed into a master timeline to manage the transitions between slides and the progress bar.

 

I'll see if I can create an example in a little while.

  • Like 2
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.
×
×
  • Create New...