Gsap Slider Animation

[Adesh 3 Likes (Newbie)]

I trying to build some animated slider but i am getting some error!

 

After clicking on the previous and next slide i need to add animation out on text after that i need to slide left my slides and again animation in on text.

 

Also need to add slider dots to change slides.
 

Can anyone hep me on this?

 

You can find similar slider animation on banner section of below url.
https://www.netguru.com/

Thanks,

See the Pen mdKRKjx by Adesh-Evince (@Adesh-Evince) on CodePen

[Rodrigo 5,068 Likes (Superhero)]

Hi @Adesh and welcome to the GreenSock forums!

 

There are a few issues in your code and rather than go through them I think is better to show you an alternative for it. In cases like this is always better to start with the simplest setup which is go through the slides without any issues using just the buttons click handlers, then abstract that into a method to switch between the slides and finally add the text animations with the conditions either animate the text in or out.

 

Also is worth noticing that you are using V2 syntax mixed with the latest syntax and that your codepen doesn't use the latest version of GSAP. On top of that you are using left in order to move the slides left and right which is not the best possible approach. In this cases is better to use transforms with xPercent in order to get better performance from the browser and make it fully responsive.

 

Here is a codepen example that resumes all of the above which hopefully is enough to get you started:

See the Pen eYKvmYe by GreenSock (@GreenSock) on CodePen

 

Sorry that is a little rough, but I didn't have enough time to polish it to look nicer, but I hope the concept is clear. Let us know if you have more questions.

 

Happy Tweening!

[Adesh 3 Likes (Newbie)]

Lots of love and thumbs up!

 

GSAP forum and the community are indeed super responsive and helpful. I really appreciate your help!!

 

Continue the awesome work on GSAP!

[Adesh 3 Likes (Newbie)]

Hello @Rodrigo

 

I am facing 3 more issue on same slider which is listed below.
1) I need to add slider dots to jump slides but i am getting error.
2) I need to add prev, next arrow HTML into all separate slides, Because i need to add text instead of arrow and it will change based on slide.

3) I need to change slide using drag and drop.

I am beginner on the Greensock, Please help me on the above points, It's a lot to me!
Thanks,