Using multiple timelines in VueJS

[100101110]

So, the codepen isnt working correctly as per in my local dev setup as yoyo isnt working it just stays a different color rather then returning to the original color, but that isn't the issue.

 

Im wanting to run multiple timelines with a small random time offset between them all in a loop. So randomly 3 timelines are being run at the same time. I was thinking of using a for loop but didnt seam to work for me.

 

Any help would be greate

See the Pen vwyJgg by 001001010001 (@001001010001) on CodePen

[Dipscom]

Yahs! Vue-themed question!

 

Hi Binary-code named individual, welcome to the forums!

 

Are you the 302, 12E, 9 or 456 representation?

 

To your question:

 

The repeat is part of TweenMax and TimelineMax, not TweenLite or TimelineLite. You will have to use TweenMax if you want to have the repeat and yoyo methods.

 

What you thought of doing probably will work once you have TweenMax instead of TweenLite. Which, by the way, the kb saving you get from loading TweenLite, CSSPlugin, TimelineLite, EasePack is so negligible in a normal webpage that you might as well just load TweenMax instead.

 

[100101110]

Hey,

 

haha actually it had no meaning I just bash the numbers out. It’s my way of providing anonymity with online profiles.

 

 Yeah I thought that was the case but it was working locally not sure how. 

 

What’s your thoughts on best creating multiple timelines. Ideally I’d like to set a state of number of timelines and then loop through them so there’s x timelines. 

 

Cheers

 

yeah Vue is awesome. 

[Dipscom]

What is the state for?

 

Will the timelines have tweens that react to the state? Or is it going to be static?

 

I'm a little bit fuzzy on the end result. As a starting point, I try and keep everything that is not reactive outside the state so, I would have the timelines all created in a loop and stored as a non-reactive attribute.

[100101110]

Hey

 

yeah state really wasn’t that important though I was going to use it to make sure it stops when the component wasn’t used. Eg a Boolean set in beforeDestroyed and the loop checks for it before continuing or not. But really don’t have to use state for the timeline. I just mimicked another’s and took it from there. 

 

Basically my my goal is. I have a global map made up of dots. I want to choose 5 random locations and make them change color using yoyo. On completion of each timeline I want to get another location rather then using the previous location. Also I want to offset the 5 timelines by a random time interval day between 0.5 and 2 sec so that they aren’t all on at the exact same time. 

 

Hope that hat makes sense. Currently it’s working fine with 1 timeline. I’m just trying to figure out how to create multiple without copy pasting the timelines. I’d rather do it programically using a loop or something. 

 

Thanks

[100101110]

I actually figure this one out and updated the codepen. Though for some reason the first stays in the changed colour which it doesnt when run locally.

 

The only thing I think that could be improved would be to run the timelines nested possibly? Though its a never ending loop so does it really matter? What would be best to performance e.g RAM and CPU usage on the client?

[Dipscom]

19 hours ago, 100101110 said:

haha actually it had no meaning I just bash the numbers out. It’s my way of providing anonymity with online profiles

 

Since you have no intrinsic representation of you binary nomenclature, I shall baptize you here as Nine, it will be far easier to type that than 100101110. You'll have to content yourself with a denomination bellow ten as you have not displayed any psionic abilities so far.

 

Firstly well done on solving your own issue. But I have to say: working on a problem while others sleep is cheating.

 

My two cents on you setup are as follows:

 

I think you might be over engineering it a little here. I don't see the need of you having timelines and nesting them onto another timeline. A much simpler setup is to fire out single tweens that callback at their completion a method to line up a fresh new tween.

 

[...]

 

After nearly two hours tinkering with your example pen, it turns out that the issue of the colour not animating back to its original value was a very subtle but annoying overwrite conflict. I'm not sure I will make a good job of explaining here so, forgive me if it causes more confusion than it helps.

 

The issue stems from you adding a tween to an element while it is still being tweened. GSAP will calculate the overwriting values and normally does a great job. Issues arise when the overwritting is happening when not intended - which was your case. As you had a random selector to pick the elements.

 

To simplify your code, I removed the timelines and made all animations run as single tweens. That brought in a new set of issues with the overwriting because of the delay you want these tweens to have.

 

The usual thing to do is to check if the element .isTweening() and do things from there. But! If you have a tween that is delayed, is paused or completed, it reports as not tweening. Sometimes the random nature of this setup meant that you would have a tween that was delayed but the random choice would pick this element again and set a new tween on it with another delay. Eventually, those two delayed tweens would end up matching up and the previously described unintended partial override would occur.

 

The solution I came up with was to not have  a delay on the Tween itself but delay the call to the creation of the tween instead, then have the tween play immediately. This way, the tween is either active or not existing at all.

 

See here a fork of your pen with my changes:

 

See the Pen OYWQOa?editors=0010 by dipscom (@dipscom) on CodePen

 

(I changed the animation to make it easier to spot inconsistencier)

 

Now I shall try and get some work done... Else I'll get in trouble.

[100101110]

Hi,

 

thanks ill I’ll take that name haha. 

 

Thanks mate. Appreciate the help. Yeah I also figured out that issue, which was more masked on my side as I had 1500 elements so was very unlikely to see a double up. 

 

Yeah that hat looks better. Appreciate it. 

[Dipscom]

Happy to help.