Jump to content
Search Community

Wait for timeline to finish before running new animation (on click)

carljohnston.uk test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all,

 

I've made a very rudimentary slider to scroll through images.

 

It all works as expected, apart from one slight bug:

If the user clicks through the images too quickly, the animation stops and immediately runs the function again.

 

From what I can tell, the solution to this is to either remove the click event while the timeline is running (is this possible?), or to wait until the timeline has finished before running the next animation.

If I were to wait for the timeline to finish before running the next clicked animation, would I run in to timeline stacking problems?

 

I've attached the codepen below for reference.

 

See the Pen EvXMVy by carljohnston-uk (@carljohnston-uk) on CodePen

Link to comment
Share on other sites

Hi @carljohnston.uk,

 

here are two interesting examples which could give some suggestions.

 

An Image slider with a cool code using the ModifiersPlugin coded by @OSUblake:

 

See the Pen LjLvLM by mikeK (@mikeK) on CodePen

 

Another slider  -  concept of @Rodrigo  -  which provides perfect explanations especially the point "slideAnimating".

 

See the Pen vdcoA by mikeK (@mikeK) on CodePen

 

Hope this can be helbful ...

 

Kind regards

Mikel

  • Like 5
Link to comment
Share on other sites

Since your timelines are not paused by default, they will play regardless of the context.
I suggest the following:

Create a 'global' object of the currently playing timeline.
On every press, get the timeline of the desired animation (with no autoplay), if the previous animation finished, play the timeline, if not, just wait.

This is the semi-edited codepen ( I just edited the forward logic)
 

var currentSlide = 0;
var allImages = document.getElementsByClassName('galleryImage');
var totalImages = allImages.length;

// nextImage
function nextImage() {
	var slideTl = new TimelineMax({repeat:0, ease:Power1.easeOut,paused:true});

	currentSlide++; // Maybe move this to the tl onComplete function.
	if (currentSlide >= totalImages) {
		currentSlide = 0;
		slideTl.set(allImages[totalImages - 1], {zIndex:0});
		slideTl.set(allImages[currentSlide], {zIndex:1});
		slideTl.to(allImages[currentSlide], 0.5, {autoAlpha:1});
		slideTl.set(allImages[totalImages - 1], {autoAlpha:0});
	}
	else {
    slideTl.set(allImages[currentSlide - 1], {zIndex:0});
    slideTl.set(allImages[currentSlide], {zIndex:1});
    slideTl.to(allImages[currentSlide], 0.5, {autoAlpha:1});
    slideTl.set(allImages[currentSlide - 1], {autoAlpha:0});
	}
  return slideTl;
}

// prevImage
function prevImage() {
	var slideTl = new TimelineMax({repeat:0, ease:Power1.easeOut,paused:true});
	
	if (currentSlide == 0) {
		slideTl.set(allImages[currentSlide], {zIndex:0});
		slideTl.set(allImages[totalImages - 1], {zIndex:1});
		slideTl.to(allImages[totalImages - 1], 0.5, {autoAlpha:1});
		slideTl.set(allImages[currentSlide], {autoAlpha:0});
		currentSlide = totalImages;
	}
	else {
		slideTl.set(allImages[currentSlide], {zIndex:0});
		slideTl.set(allImages[currentSlide - 1], {zIndex:1});
		slideTl.to(allImages[currentSlide - 1], 0.5, {autoAlpha:1});
		slideTl.set(allImages[currentSlide], {autoAlpha:0});

	}
	currentSlide--;
  
  return slideTl
}

// Gallery event listeners
let prevTimeline = new TimelineMax();

document.getElementById('next').addEventListener('click', ()=>{
  if (prevTimeline.isActive()){
    console.log('do overlap logic');
  }else{
    let tlToPlay = nextImage();
    prevTimeline = tlToPlay;
    tlToPlay.play();
  }
  
}, false);
document.getElementById('prev').addEventListener('click', prevImage, false);

 

  • Like 1
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.
×
×
  • Create New...