Slow animation start and Staggered Pause

[Marshmallow]

Hi there,

 

I am working on a way for divs to slide away on scrolling/clicking a button. That seems to be working just fine. However when I do this the first time it takes an entire second before the divs start moving. Every action after that is instantaneous. But for some reason when it starts the timeline it takes that entire second.

 

Here is a gif of it in action, I click as soon as my mouse is on the black box.

 

And here is the code of my timeline

var tlWork = new TimelineMax({paused: true});

tlWork
	.to('.prev-work', 0.3, {
		opacity: 1,
		cursor: 'pointer'
	}, 1)
	.to('.yellow', 1,{
		top: '-100%',
	
		ease:Power2.easeInOut
	}, 1)
	.to('.blue', 1, {
		top: '0',
	
		ease:Power2.easeInOut
	}, 1)
	.addPause()
	.to('.blue', 1,{
		top: '-100%',
	
		ease:Power2.easeInOut
	}, 2)
	.to('.red', 1, {
		top: '0',
	
		ease:Power2.easeInOut
	}, 2)
	.to('.next-work', 0.3, {
		opacity: 0,
		cursor: 'auto'
	}, 2)
	
;

$('.next-work').on('click', function() {
	tlWork.play();
});

$('.prev-work').on('click', function() {
	tlWork.reverse();
});

$(".content").on('mousewheel DOMMouseScroll', function (e) {

    var direction = (function () {

        var delta = (e.type === 'DOMMouseScroll' ?
                     e.originalEvent.detail * -40 :
                     e.originalEvent.wheelDelta);

        return delta > 0 ? 0 : 1;
    }());

    if(direction === 1) {
		tlWork.play();
    }
    if(direction === 0) {
		tlWork.reverse();
    }
});

Other than that I also have another question. Right now I have to add separate classes for each new box that would be added, costing me and the company a lot of time if we were to add new items.

Is there a way to advance the animation by one step and then pause even if they all have the same class?

Maybe a staggered animation can be paused in some way?

 

Thanks in advance for your help.

 

~ Marshmallow

 

EDIT: Link to Codepen 

See the Pen jVvYKa by lavandongen (@lavandongen) on CodePen

[Dipscom]

Hi Marshmallow,

 

Welcome to the forums!

 

If you create a demo of what you are trying to achieve, does the same issue occurs? I see nothing particularly wrong in the code you have posted so, it will probably be something else on your setup. 

 

With a live demo we can see everything in context, making it easier to identify what could be wrong in the setup. Without the whole context, it is very hard to debug as we would be shooting in the dark. Here's how to create a codePen. And bellow the video with a walkthrough.

 

[Marshmallow]

I have created a codepen that has the same problem here: 

[Marshmallow]

Hi Marshmallow,

 

Welcome to the forums!

 

If you create a demo of what you are trying to achieve, does the same issue occurs? I see nothing particularly wrong in the code you have posted so, it will probably be something else on your setup. 

 

With a live demo we can see everything in context, making it easier to identify what could be wrong in the setup. Without the whole context, it is very hard to debug as we would be shooting in the dark. Here's how to create a codePen. And bellow the video with a walkthrough.

 

 

 

I have created acodepen that suffers from the same problem here: 

[Marshmallow]

I have it fixed, I gave the first commands order 1 were it should've been order 0. I guess it took a second to figure out I started it at #1 not #0

[Dipscom]

Ah. DUH!

 

I didn't see a little detail in the timeline... My bad.

 

You are creating your tweens using an absolute time parameter. This is your first line of the timeline:

tlWork.to('.prev-work', 0.3, {opacity: 1, cursor: 'pointer'}, 1)

That last 1 is telling GSAP to start playing the animation at one second. So, when the click tells the timeline to play, it starts playing as you would expect but there is nothing happening for one second, that's why you think nothing is happening.

 

You can either set all your starting tweens to 0 and the subsequent ones to whatever absolute time you need

tlWork.to('.prev-work', 0.3, {opacity: 1, cursor: 'pointer'}, 0)
 .to('.yellow', 1,{top: '-100%', ease:Power2.easeInOut}, 0)
 .to('.blue', 1, {top: '0', ease:Power2.easeInOut}, 0)

But better yet would be to set labels to group the animations that do not start immediately, that way, you won't need to be adjusting the position parameter every time the length of the animation changes.

tlWork
.to('.prev-work', 0.3, {opacity: 1,cursor: 'pointer'}, 0)
.to('.yellow', 1,{top: '-100%',ease:Power2.easeInOut}, 0)
.to('.blue', 1, {top: '0',ease:Power2.easeInOut}, 0)

.addPause()

.to('.blue', 1,{top: '-100%',ease:Power2.easeInOut}, "NextSection")
.to('.red', 1, {top: '0',ease:Power2.easeInOut}, "NextSection")
.to('.next-work', 0.3, {opacity: 0,cursor: 'auto'}, "NextSection")

 

Here's a video about the position parameter.

 

And some bonus tips:

Use autoAlpha instead of opacity - You won't have to keep changing the cursor from pointer to auto if you do.

Use x/y instead of left/top - That way the browser will use the GPU and animation will be smoother.

[Dipscom]

Too much typing to write an answer....