Jump to content
GreenSock

iamrufus

Resetting .to animation on click

Recommended Posts

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

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

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

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