totalTime mangling with canvas

[jh3y]

Hey y'all! ?

 

Got an odd one. I could be missing something straightforward. But, in this pen, I'm animating a set of squares on a trail on a canvas. I want to create a seamless loop so I've constructed the timeline by looping over the squares three times and then tweening the `totalTime`. In the code, It currently tweens from `totalTime: 0` to `totalTime: 7` and the entire timeline is shown as expected.

 

But, as soon as I tweak the `totalTime` values, mainly the starting value, it breaks the animation window that I'd expect to see ? Not sure if I'm missing something clear and obvious. But, the technique should work in this scenario I imagine.

 

The looping code is at the bottom, try changing the initial `totalTime` to something like `1` and it doesn't show the `TRAIL` timeline window of `1` to `7`.

 

Are my timings off? Or, do I perhaps need to do something different when working with plain Objects like this?

 

Thanks in advance! 

 

– Jhey

const TRAIL_LOOP = gsap.fromTo(
  TRAIL,
  { totalTime: 0 },
  {
    totalTime: 7,
    repeat: -1,
    ease: 'none',
    duration: 6,
  }
)

See the Pen 783443d6a6ad7c9813b75807e80a92b4 by jh3y (@jh3y) on CodePen

[Carl]

cool animation. I don't understand everything about the code, the problem, or the exact solution you need. 

 

But assuming the end goal is a seamless loop try updating your loop timeline like so

 

const TRAIL_LOOP = gsap.fromTo(
  TRAIL,
  { time: 1.84 },
  {
    time : 3.69,
    repeat: -1,
    ease: 'none',
    duration: 3,
    immediateRender:false
  }
)

 

When it it first loads it will start somewhere around halfway through and then play through to a similar looking part of the loop.

 

I got those mystery numbers by playing around with GSDevTools a bit on TRAIL.

 

Since TRAIL doesn't repeat you can animate the time() instead of totalTime(), but it doesn't really make a difference.

I got rid of what I thought might be the cause of some of the glitchiness by setting immediateRender:false on the fromTo tween.

Again, not really sure of the exact particulars. 

 

Hopefully this helps somewhat.

[jh3y]

You know what? I think that's all it needed, an `immediateRender` in the `fromTo`. Then you can change things however you like. I had my `immediateRender` in the wrong place d'uh ?‍♂️

 

Thanks Carl! ? 

 

A little further up in the code I log the loop times in an Array to use by counting the `index` so should be good on that part ? See if I can actually build the rest of the demo now ?

 

 

[jh3y]

Update:: Got it working how I wanted ?

 

See the Pen PoyEGwE by jh3y (@jh3y) on CodePen

[Cassie]

niiiiiice, that's a ton of fun! 

[Carl]

?