Jump to content
Search Community

The perfect start for a GSAP Slider

PaulTheSwissGuy test
Moderator Tag

Recommended Posts

Hello fellow lovers of web animations !

 

I have an idea of a huge slideshow with a lot of animations, but I want my foundations to be solid before going crazy with the animations.

Is it the right thing to do to employ a gsap timeline in a function like I've done in my Codepen example ?


Is there a better choice ?
Is it good in term of performance / memory ?
 Also is my "index"/"offset" mecanism good ? 

I already watched this example https://greensock.com/forums/topic/19393-fullscreen-sliders-horizontal-and-vertical/
This is pretty impressive and really complete, but It's also quite complicated to grasp at first (I will look at it again the following days)

All right thank's for your lights  💡

 

See the Pen ZEpvYEz by PaulTheSwissGuy (@PaulTheSwissGuy) on CodePen

Link to comment
Share on other sites

Hey Paul and welcome to the GreenSock forums. 

 

I think you would learn a lot from my article about animating efficiently. One of the tips is to create animations beforehand and use control methods inside of event listeners. That'd greatly improve both the logic and efficiency of your code in this case. You can see that your code has a logical issue if you click too quickly. 

 

Perhaps the thread below would be a better starting point in terms of how to set things up. It uses the old version of GSAP and jQuery but you should be able to update those without issue by using the migration guide.

 

Link to comment
Share on other sites

Hey Zach thank's for your reply !

Your article taugh me some sweet tricks like Keyframes, default values or animating multiple elements at once !

Unfortunately I didn't get precisely where I should define my Timeline, inside or outside my Event ?

Because if I try to define it outside it gives me this, I have a scope problem I guess : 

See the Pen vYXpJXW by PaulTheSwissGuy (@PaulTheSwissGuy) on CodePen



Or maybe I should define my Timeline outside and "fill it" with animations inside the event ?
It looks like they've done that in the example you gave me.


 

Link to comment
Share on other sites

It depends on exactly how you want your slider to animate. Say that a user is on slide 1 and double clicks "right" (or more commonly named "next") twice so the end target slide should be slide 3. Of course all of your slides (at least the visible ones) need to be animated to the left two slides, but what should happen to the content on slide 2? It will start to be shown between the first and second click.

 

If you wanted the content to be fully revealed then hidden again (i.e. show the entire reveal animation and then the entire hide animation, albeit in a shorter duration) then you can set everything up in a big timeline and then control that timeline with control methods. 

 

If you want the content to stop being revealed as soon as the second click happens and the third to start being revealed it'd probably make more sense to create a new animation each click. This is the more common approach and the one done in the thread that I linked to.

 

I think you should start by understanding the logic of the sliders in the thread that I linked to. Then try applying it to your situation. If you have any questions, feel free to ask at that point :) 

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