Jump to content
Search Community

Gsap animation in slick slider with controls

gagandeep test
Moderator Tag

Recommended Posts

Hi 

I am new to GSAP can you please guide me.

I need gsap animation inside a slick slider where on each slider there will be gsap animation of images which will look like a video but I need this with full controls like next previous button. when i click on next button next slide should start from starting and same with previous button.

Apart from this,  there is a progress bar in bottom which will go with slides.

Also, i have added codepen link where you can find slider functionality. I just need to insert gsap in this with smooth effect.

Can you please check and guide me with the same.

Thanks

Screenshot_7.png

See the Pen poKqBmm by gagandeep-050 (@gagandeep-050) on CodePen

Link to comment
Share on other sites

Hi there! This is quite a big request with a lot of moving parts to it. (pun intended)

It sounds like you'll need to break this down a bit before anyone will be able to offer you substantial help. We're very happy answering GSAP specific questions in here, but this question is quite broad.

You have the slider itself to think about, then you have some GSAP animation timelines on some SVG's which you want to trigger as the slider progresses.

If I were you, I would start by creating the animation timelines for each slide. Then once those are completed, hook them up in the slider.

It may also be smart to make the slider with GSAP instead of slick. That way you can create the exact behaviour you need rather than having to work around slick slider. There are lots of threads in the forums about GSAP sliders

  • Like 1
Link to comment
Share on other sites

Hi Thanks for you response.

I found this codepen example 

See the Pen BvEPyZ by kurtcodes (@kurtcodes) on CodePen

 which can work for slider but in each slide I want images to show hide with gsap which should act as video and progress will take the same time as images will take to show hide.

In each slide there will be 4 to 5 images and once one animation is done i should move to next slide.

Here is example of animation i need 

See the Pen VwdgdEx by gagandeep-050 (@gagandeep-050) on CodePen

Please suggest.

Link to comment
Share on other sites

Yeah cool example, but if you new to GSAP or JS in general I would not suggest tackling this as a first project. Sliders can be really complicated.

 

I would suggest by watching a few tutorials, the Greensock Youtube channel is a great starting point https://www.youtube.com/c/GreenSockLearning/videos and create some simple animations at first, with just a few moving parts, before your tackling your big slider project. That way you can get the hang of it first instead of trying to run, before you can walk. Good luck!

  • Like 3
Link to comment
Share on other sites

Just for a little context - there's much more to sliders than just triggering some animations

Lets take a button click for example - you can trigger an animation quite simply by using timeline methods

button.addEventListener("click" (e) => {
 tl.play()
})


But with a slider like this you don't have one animation playing on one click. You'll have multiple animations and multiple slides or 'states' the slider could be in. When you click on a button you'll need to check where the slider is, progress it by a slide, work out which animation to play, handle that animation and pause or reset any previously playing animations

Lets think of some edge cases...

What if the user clicks the buttons lots of times? Can the user progress or are button clicks disabled while the animation plays? 
Do all the timelines start again from the beginning when the slides progress?

Can the user drag the slider or only use buttons?
What about keyboard arrows?
Does the slider automatically advance?
What if it's midway through automatically advancing and then the user clicks backwards or forwards?

 

I agree with @mvaneijgen - if you're new to GSAP this is very ambitious. And trying to 'retrofit' your own additions into other people's code is where madness lies. It's always best, when possible, to break down examples until you understand and then work out your own solution. If you're at the beginning of learning GSAP, maybe try to attempt a stripped back version of this without drag or auto advancing?

 

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...