gagandeep Posted December 6, 2022 Share Posted December 6, 2022 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 See the Pen poKqBmm by gagandeep-050 (@gagandeep-050) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted December 6, 2022 Share Posted December 6, 2022 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 1 Link to comment Share on other sites More sharing options...
gagandeep Posted December 7, 2022 Author Share Posted December 7, 2022 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 More sharing options...
mvaneijgen Posted December 7, 2022 Share Posted December 7, 2022 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! 3 Link to comment Share on other sites More sharing options...
gagandeep Posted December 8, 2022 Author Share Posted December 8, 2022 Hi Thanks for your Time. I am at beginner level and will check these videos for sure but I am familiar with gsap but can you please help me with animation trigger on slider indicators and arrows. Thanks Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 8, 2022 Share Posted December 8, 2022 You can look in to the tweenTo function https://greensock.com/docs/v3/GSAP/Timeline/tweenTo() here is a video (also this channel is great if you want to give your learning a kick start!). Again, sliders can be really complicated, so I wouldn't pick that as your first project. Link to comment Share on other sites More sharing options...
Cassie Posted December 8, 2022 Share Posted December 8, 2022 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 More sharing options...
gagandeep Posted December 14, 2022 Author Share Posted December 14, 2022 Hi @Cassie @mvaneijgen I have tried this and reach here can you please help with sinking timing of animation and auto play together. Here is code See the Pen VwdgdEx by gagandeep-050 (@gagandeep-050) on CodePen Thanks in advance. Link to comment Share on other sites More sharing options...
Cassie Posted December 14, 2022 Share Posted December 14, 2022 Hi there - sorry, but you've asked the same question now multiple times and we've explained that it's too large a request for the forums. I suggest posting in the jobs and freelance forums. 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