Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
aderaaij

Make sure animation resets on clicking 'next' in slider

Recommended Posts

I'm currently trying to build a slideshow to practice whatever I learn about Greensock. Most things behave as expected, except for when I click next/prev real fast. In that case the slideout animation never gets fired, and the next time I reach the same slide, everything is already animated. What would be the best way to prevent this from happening?

 

Thanks! 

 

Small edit: Got the same with this pen: 

See the Pen QjedBd by aderaaij (@aderaaij) on CodePen

See the Pen wKVaKE by aderaaij (@aderaaij) on CodePen

Link to comment
Share on other sites

Nice sliders.  We don't have the resources to troubleshoot your project in depth. We have to stay very focused on the API, but the problem appears to be with the logic here.

 

var _slideNext = function() {  
    clickCounter++;    
    slideCounter = clickCounter-1;
    if(clickCounter >= slideAmount) {
      clickCounter = 0;
      slideCounter = slideAmount - 1;
    }  
    var tl = new TimelineLite();
    tl 
      .add(_animateSlideOut(slideCounter))
      .to(slider, .9, {x:-clickCounter*sliderWidth, ease: Power2.easeOut})  
      .add(_animateSlideIn(clickCounter))
    _navButtons();    
  }

Since you are building a timeline that delays the animateSlideIn() animation, it is very possible that it will run AFTER you have already told that slide to animate out.

 

For instance if your app is on slide1 and someone clicks next you are going to build

 

Timeline 1

slide 1 animates out

slider moves

then slide 2 animates in

 

However if someone clicks next again while slide1 is animating out you will create

 

Timeline 2

slide 2 animates out

slider moves

slide 3 animates in

 

The problem is that after timeline 2 animates slide 2 out, timeline 1 is probably still running and will end with animating slide2 back in.

 

--

 

The biggest issue with the code is that your timelines are being created inside functions, so there is no way to target them and control them after they are made.

Better to use a global timeline variable and update each time a new transition is made.

 

IMHO if someone is clicking fast they want to jump to new content and not see transitions. In this case probably best to advance the transition timeline to the end and when you create new transitions, set the timeScale() VERY VERY high so that they will complete immediately. This will give the effect of a jump-cut or instant transition. 

 

If you want to maintain animations you could also add an onComplete callback to the transition that checks to see what the latest value of clickCounter is and then it will automatically create a transition to the next slide.

 

Imagine while the transition from 1 to 2 is happening someone clicks 3 more times. When slide2 comes in you could then create a new transition to slide 5.

 

Hopefully this helps you with finding a new direction. 

 

 

 

  • Like 2
Link to comment
Share on other sites

Hi Carl,

 

Thanks for the fantastic reply. I absolutely understand this is more of a general Javascript question than anything else, so I appreciate you taking the time to point me into the right direction. 

 

I won't have time to try your suggestions until the end of the week, but I'm sure I can get a bit ahead again.

 

Just to clarify one thing; you say it's better to create one master timeline? Would I then control different parts of the animation with tl.play, etc? 

 

Thanks again!

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