ngc7293 Posted January 21, 2022 Share Posted January 21, 2022 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? 1 Link to comment Share on other sites More sharing options...
mvaneijgen Posted January 21, 2022 Share Posted January 21, 2022 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 6 Link to comment Share on other sites More sharing options...
ngc7293 Posted January 21, 2022 Author Share Posted January 21, 2022 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 More sharing options...
anz Posted December 18, 2022 Share Posted December 18, 2022 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 More sharing options...
mvaneijgen Posted December 18, 2022 Share Posted December 18, 2022 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! 3 Link to comment Share on other sites More sharing options...
anz Posted December 19, 2022 Share Posted December 19, 2022 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 More sharing options...
mvaneijgen Posted December 19, 2022 Share Posted December 19, 2022 Is this what you are looking for? I've copied the split text logic to also and created textOut which then moves the elements out. See the Pen XWBWEmB?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
anz Posted December 19, 2022 Share Posted December 19, 2022 It is! Except for the h1 disappearing after the loop now. Right after the transition from Slide 5 to Slide 1. Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 20, 2022 Share Posted December 20, 2022 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 1 Link to comment Share on other sites More sharing options...
anz Posted December 20, 2022 Share Posted December 20, 2022 I will look into it - thanks for helping out with this one, i appreciate! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now