Jump to content
Search Community

Carousel/Slider plan?

ngc7293 test
Moderator Tag

Recommended Posts

I'm looking forward to GSAP Carousel/Slider. I don't know if you have this plan?

The best carousel plug-in I've ever used is "jQuery carouFredSel", but this project has disappeared for a long time.

Such as slick and swiper are not perfect.

Do you really not have this plan?

  • Thanks 1
Link to comment
Share on other sites

The beauty of GSAP is that you can build with it what ever your hearth desires. I've build a carousel with GSAP I'm really happy with, because I can extent it with animations if needed.

 

Here is a basic version 

See the Pen GREebPK by mvaneijgen (@mvaneijgen) on CodePen

 and here a more elaborate version 

See the Pen YzQZBgr by mvaneijgen (@mvaneijgen) on CodePen

  • Like 6
Link to comment
Share on other sites

1 minute ago, mvaneijgen said:

The beauty of GSAP is that you can build with it what ever your hearth desires. I've build a carousel with GSAP I'm really happy with, because I can extent it with animations if needed.

 

Here is a basic version 

 and here a more elaborate version 

 

Thank you for sharing. I just look forward to GSAP. Thank you very much.

Link to comment
Share on other sites

  • 10 months later...

Hello @mvaneijgen, in your elaborate Version above – how would you animate that staggered text before the slide-out? I try to understand the logic here, as i would like to animate single elements for both "directions" (slide-in and slide-out). Like single text elements sliding in and out instead of animating the whole .slide element.

Link to comment
Share on other sites

Hi @anz that is a completely different type of slider and will require an other type of approach. I would suggest to try your hand at your own solution and pop back here with a minimal demo when you get stuck.

 

I would not recommend to build a slider as your first project with GSAP, because as you can see it can get really complicated fast. There is a lot  you can do with just a timeline  and the function  .tweenTo()  https://greensock.com/docs/v3/GSAP/Timeline/tweenTo() which will keep everything a lot more simple. Hope it helps and happy tweening! 

  • Like 3
Link to comment
Share on other sites

Hello @mvaneijgen, thank you for your response – it's much appreciated.

This here works the way i was talking about: 

See the Pen JjBjMZW by dev_anz (@dev_anz) on CodePen

 

The only thing i am not able to get working is: staggering the h1 on the move-out (line 89). Any idea why something like this doesn't work here?

tl.to(text.chars, { y: 100, autoAlpha: 0, stagger: 0.05 });

 

 

Link to comment
Share on other sites

I think the issue is that the autoAlpha is not getting reset on the next cycle. It has been awhile since I've worked on this slider and it is just a proof of concept (this was my first full fletched project build with GSAP). I don't have time to debug it further at the moment, but hope it helps

 

See the Pen XWBWEmB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

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