iamrufus Posted June 19, 2020 Share Posted June 19, 2020 Hi Ive just started using GSAP for the first time and i must say i am really enjoying it! My question is i would like to reset my .to animation on click to the default states the elements were in but i am just a little confused on how to do it. Apologies if this is a basic thing but i am learning my way round this slowly. This is my current code, its just a simple slider that animates a couple of images (function () { let slider = document.querySelector('.service--slider'); let slide = document.querySelectorAll('.service--slide'); let slideNext = document.querySelector('.service--slider--btn--next'); let slidePrev = document.querySelector('.service--slider--btn--prev'); let currentSlide = 0; slideNext.addEventListener('click', function () { slide[currentSlide].classList.remove('active'); currentSlide++; slide[currentSlide].classList.add('active'); gsap.timeline() .to(slider, { xPercent: -100 * currentSlide, duration: .7 }) .to('.service--slide.active .service--image--back--left', { scale: 1, rotate: -3, }) .to('.service--slide.active .service--image--back--right', { scale: 1, rotate: 3 },'-=.5') }); }()); What i would like is on the click event for both of these .to animations that target the current images on the active slide to revert back to their initial state in css which is scale 0 .to('.service--slide.active .service--image--back--left', { scale: 1, rotate: -3, }) .to('.service--slide.active .service--image--back--right', { scale: 1, rotate: 3 },'-=.5') Hope this doesnt sound to confusing, im sure there may even be a better way for me to structure it perhaps but its all a learning curve currently for me. Thanks everyone Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 19, 2020 Share Posted June 19, 2020 Hey Rufus and welcome to the GreenSock forums! 24 minutes ago, iamrufus said: Ive just started using GSAP for the first time and i must say i am really enjoying it! We're so glad to hear that I'm not sure that I understand what you're trying to do. Are you trying to animate out the previous "back--left" and "back--right" elements? If so you could animate them before you switch the active class: slideNext.addEventListener('click', function () { gsap.timeline() .to('.service--slide.active .service--image--back--left', { scale: 1, rotate: -3, }) .to('.service--slide.active .service--image--back--right', { scale: 1, rotate: 3 },'-=.5') slide[currentSlide++].classList.remove('active'); slide[currentSlide].classList.add('active'); .to(slider, { xPercent: -100 * currentSlide, duration: .7 }) .to('.service--slide.active .service--image--back--left', { scale: 1, rotate: -3, }) .to('.service--slide.active .service--image--back--right', { scale: 1, rotate: 3 },'-=.5') }); However, that code has a logical error because eventually the currentSlide will be above the number of slides that you have. Building this sort of thing from scratch is good for learning but if you're looking for the easiest way to get a slider done I recommend modifying one that's been built already Link to comment Share on other sites More sharing options...
iamrufus Posted June 19, 2020 Author Share Posted June 19, 2020 Hi Zach, Thanks very much for the reply, Yes all im looking to do is just reset the current scale of the images of the active slide back to default on click when moving to the next slide then remove the active class and add it to the next slide to animate the images in for that slide. (hope this kinda makes sense) As for the logical error im aware of it, im just testing the animations but i know as soon as it gets to my 4th slide its going to break 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