Carrousel hangs on last rotation

[jiggy1965]

I've got a setup where I can have the red div appearing to rotate to the back and to the front again. With 'tl1.set(tweens[0].target, tweens[0].config);' I first have the div set to the middle of the container div. Then with the buttons I can for example have it move up if I click the 'right' button'. On a next click it goes to the bottom and when I click again it should return to the middle. But that doesn't happen. It stays at the bottom. But when I click again, the next tween appears to start from the middle. As if that last tween (from the bottom to the middle) programatically worked, but not visually.

 

So this didn't work:

tl1.set(tweens[0].target, tweens[0].config);

 

But strangely enough this does work:

tl1.set('#slide', {scale:1, opacity:1, zIndex:10, y:containerMiddle });

 

And that is the same basically as the content of tweens[0].config =  {scale:1, opacity:1, zIndex:10, y:containerMiddle }

 

So why doesn't  it work when I set the starting position through an array value, but it doesn't work when I set the starting position not in array form, though the content is the same?

 

When using 

tl1.set('#slide', {scale:1, opacity:1, zIndex:10, y:containerMiddle });

you can see that clicking on the buttons make the tweens work as normal (goes from the center to up to down to the center to the top etc.)

 

When using

tl1.set(tweens[0].target, tweens[0].config);

Then it also works until the last tween of case:3. When I click then, that last tween appears not to have happened, but when I click yet again the first tween starts again, but from the middle. As if that last tween was visually skipped, but happened anyway.

 

Can someone explain this?

See the Pen dygjyZd by coder1965 (@coder1965) on CodePen

[jiggy1965]

What I found out so far is that it does work when I set it up through a spread operator:

 

tl1.set(tweens[0].target, {...tweens[0].config});

 

Then when I click on the buttons, each tween happens as it should.

 

When I use this:

 

tl1.set(tweens[0].target, tweens[0].config);

 

Then when I click the buttons it goes correctly until the last of the 3 tweens has executed. Then a click makes it pause on its current position. A next click makes it jump to the position it was supposed to go and then continues with the next tween. So like in above codepen if you click on 'Right' (or 'Left') a few times.

 

Why do I have to use the spread operator on tl1.set to make it work? And why don't I have to use a spread operator then on the tl1.to tweens?

 

[Cassie]

Hi there - I'm not really sure how to replicate this object/spreading behaviour but maybe lets get this pen set up correctly before we dig into that.

One thing I can see quite clearly is that you don't need to use a timeline. You have actions playing on each click, that's definitely tween territory, you don't want to be adding a new animation to a sequence every time.

I've simplified this down a bit for ease of viewing. You can see if you look at the console how tweens are being added to an overall sequence, each time you click you're adding a tween, the timeline tries to continue playing from where the playhead currently is, but the duration of the timeline gets added to each click. So if you click fast there's suddenly a bunch more tweens, a much higher duration and the timeline has to play through then all in sequence.

See the Pen XWxBxPL?editors=0011 by GreenSock (@GreenSock) on CodePen

 

I'm assuming this is closer to what you're trying to do? Adjust the properties dynamically on each click?

See the Pen oNaMabv?editors=0010 by GreenSock (@GreenSock) on CodePen

If so maybe we can start with this demo which is simplified down and seemingly working as intended and then you can layer on from there if you're still confused?

(To my eyes) with the adjusted demo, both spreading and directly referencing that object seem to be working

[jiggy1965]

I've changed the setup a bit and removed the timeline's and replaced them with gsap.set / gsap.to

 

 

Eventually I wish to create a vertically rotating carousel with 4 of such red divs, but that's for later. You can see what is going wrong with this first one: If you click once on 'right' the red div goes up (correct). Click again and it goes to the bottom (correct). Click a third time and instead of moving up to the center it goes to the center directly (not correct).

 

That is when I'm using this line:

gsap.set(tweens[0].target, tweens[0].config);

 

If you comment that line and uncomment the line under it:

gsap.set('#slide', {scale:1, opacity:1, zIndex:10, y:containerMiddle });

 

Then it works like intended. Click right once and it goes up smoothly, click right twice and it goes down smoothly, click a third time and it goes back to the center smoothly.

So I was wondering why gsap.set(tweens[0].target, tweens[0].config) doesn't make it work and goes abruptly to the center on a 3rd click. While tweens[0].config is the same as '{scale:1, opacity:1, zIndex:10, y:containerMiddle}'. What also works is to put that line between a spread operator like this: gsap.set(tweens[0].target, {...tweens[0].config}). There seems to be something with the 'set' comment that makes it having problems with passing values in an array form for the configuration?

Can you explain this?

[Rodrigo]

Hi,

 

Actually the issue is on the objects you're creating for the specific configs. If you run this you'll see it:

function runCodeForIndex(index) {
  console.log(tweens[index].config.duration);
  switch (index) {
      //...
  }
}

When the index is zero duration is zero as well, while in the rest duration is undefined. The reason for this seems to be related to the set instance you have there:

gsap.set(tweens[0].target, tweens[0].config);

That basically takes the object and modifies it, so since a set() instance has a duration of zero, it adds that duration to it. In the rest of the cases you have the default duration set previously so after the first time the animation runs, the duration is one for those instances.

 

Adding this to the first configuration object seems to solve the issue:

tweens.push({target: '#slide', config: { scale:1, opacity:1, zIndex:10, y:containerMiddle, duration: 1, }});

Hopefully this helps.

Happy Tweening!