Smooth animation on repeat

[thomas159]

Hi, I'm having trouble getting the animation to repeat  smoothly without it briefly pausing before the loop.

 

I also need the colours to continually fade into each other as it loops so the last colour should fade into the first colour when the loop repeats but I'm not sure how to achieve this

 

See the Pen mMKpqP by thomas159 (@thomas159) on CodePen

[PointC]

Hi @thomas159

 

Welcome to the forum.

 

You can't have a timeline start the repeat before it has ended, but I think you could set the start color of your boxes to the last color of your loop and i should look seamless. Here's a fork of your pen.

 

See the Pen YxvejE by PointC (@PointC) on CodePen

Hopefully that helps Happy tweening.

[thomas159]

Hey @PointC thanks for the reply,

 

I did try this,  I guess somewhere my delay is causing the issue as yours seems to be seemless, I will give this another go adjusting the delay

 

var tl = new TimelineMax({ repeat: -1 })

       tl.to(this.box, 0.5, { css: { backgroundColor:"#F19939" } }, )
      .to(this.box2, 0.5, { css: { backgroundColor:"#F19939" } }, "-=0.5")
      .to(this.box3, 0.5, { css: { backgroundColor: "#F19939" } }, "-=0.5")
      .to(this.box, 1, { css: { backgroundColor: "#FF00ff" } })
      .to(this.box2, 1, { css: { backgroundColor: "#FF00ff" } }, "-=1")
      .to(this.box3, 1, { css: { backgroundColor:"#Ff00ff" } }, "-=1")
      .to(this.box, 1, { css: { backgroundColor:"#Fff" } }, )
      .to(this.box2, 1, { css: { backgroundColor:"#FFf" } }, "-=1")
      .to(this.box3, 1, { css: { backgroundColor:"#Fff" } }, "-=1")
      .to(this.box, 0.5, { css: { backgroundColor:"#F19939" } }, )
      .to(this.box2, 0.5, { css: { backgroundColor:"#F19939" } }, "-=0.5")
      .to(this.box3, 0.5, { css: { backgroundColor: "#F19939" } }, "-=0.5")

[PointC]

You don't need all those position parameter offsets. If you look at the JS of my fork, you'll see that you can simply target all three boxes in one tween. You also don't need the CSS wrapper. Not that you can't use it, but it saves some typing if you don't.

 

Happy tweening.

[thomas159]

thanks for the tips, I've created a new pen but I'm having an issue with box2 and box3, the first box is seemless, but the other 2 boxes are jumpy when tweening between them.

 

Also as I'm doing this in react and targeting the element via a ref rather than via the css

<div className={styles.box} ref={con => {this.box = con; }}/>

 I am getting the same problem as in my first pen where the animation fades out the back in as it repeats, which doesn't seem to happen when using css class in my second pen example

 

See the Pen PKBwbP by thomas159 (@thomas159) on CodePen

 

[mikel]

Hi thomas159,

 

I do not know what you want to achieve with this positioning of the tweens, but the second Tween starts before the first has finished:

 

  .to("#box3", 0.5, { backgroundColor: "#ff0000" }, '-=0.5')  // time 0.5 !
  .to("#box3", 1, { backgroundColor: "#f19939" }, '-=1')  //  start time -1 = tween before didn´t finish

 

Please have a look to this explanation of CARL (related Topic):

 

When the second tween starts, 0.4 seconds BEFORE the previous tween ends the engine is in a situation where 2 tweens are trying to change the borderWidth at the same time. Instead of wasting CPU by having 2 tweens fighting for control the engine allows the second tween to overwrite the part of the first tween that animates borderWidth. When you reverse or play the timeline again... the borderWidth part of the first tween is killed by the overwrite.

 

Does that help?

 

Best regards

Mikel

 

[thomas159]

my understanding was that the tweens are all fired sequencially so here it will fire the first tween then if there was no delay the 2nd tween and then the 3rd all 0.5 seconds apart, what I have done is add the delay to the 2nd and 3rd tween to fire them all at the same time

 

.to("#box", 0.5, { backgroundColor: "#f19939" })
  .to("#box2", 0.5, { backgroundColor: "#ff00ff" }, '-=0.5')
  .to("#box3", 0.5, { backgroundColor: "#ff0000" }, '-=0.5')

Once 0.5 seconds has elapsed it should then fire off the second round of tweens that last for a second and again a second delay on the 2nd and 3rd box so these fire at the same time

  .to("#box", 1, { backgroundColor: "#ff00ff" })
  .to("#box2", 1, { backgroundColor: "#ff0000" }, '-=1')
  .to("#box3", 1, { backgroundColor: "#f19939" }, '-=1')

 

you've suggested that it will look at the tweens for each element and sequentially run these ?

 

 .to("#box3", 0.5, { backgroundColor: "#ff0000" }, '-=0.5')  // time 0.5 !
  .to("#box3", 1, { backgroundColor: "#f19939" }, '-=1')  //  start time -1 = tween before didn´t finish

 

What i'm trying to achieve is basically having box,box2,box3 all fire at the same time and then again all firing at the same time and then again all firing at the same time, but there's seems to be some slight discrepancy with the delay which I just can't get my head around which is causing box2 and box3 to jerk when repeating the animation

[mikel]

Hi thomas159,

 

Regarding your positionings study this please: https://greensock.com/position-parameter

 

Did you agree with the pen of @PointC  for you purpose? 

See the Pen YxvejE by PointC (@PointC) on CodePen

 

I´m a little bit irritated ...

 

Kind regards

Mikel

[thomas159]

sorry didn't intend to irritate you.... yes the pen of @PointC works for a simplified example...I was just trying to expand on this, anyway I think react adds an extra layer of complexity which I'm not sure will work.

 

Thanks for the help

[PointC]

Just so I'm clear on what you're trying to do: are you trying to make those dots cycle so it looks like a loader? Your original pen had them all animating at the same time so I just wanted to clarify the desired outcome.

 

Thanks.

[thomas159]

HI @PointC

 

Yes that's correct I'm trying to cycle like a loader, I thought once I was able to get past the initial problem with the repeating loop I would be able to animate them in this way but it proved trickier than I thought.

 

I've switched to using ccs animations as I'm finding it too difficult to get gsap and react to work together well enough ( the codepen example transitions smoothly when looped, but when I use the same code in react I still don't get a smooth transition, it fades out briefly and then back in)