Jump to content
Search Community

totalTime mangling with canvas

jh3y test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.

  • Like 2
Link to comment
Share on other sites

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 😬

 

 

  • Like 2
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...