Make tween finish and then restart

[Daniel Hult]

Hi guys,

Im making kind of a slideshow and have some logic between the slides with GSAP, but having some issues thinking logically..

In the codepen you can see at the bottom that I call the function 3 times manually. I want it to repeat endlessly and loop through the slides.
Was trying to do some callback functions on the onComplete and onRepeat, but I think I might just be thinking too hard.

Just trying to make the number fade down, then the next one fade up and so on (and then go back to start if it hits the end of the loop).

Btw: Im still a club greensock member, just not on this account (I use the other one for work)  

See the Pen vYGmeJa by daniel-hult (@daniel-hult) on CodePen

[ZachSaucier]

Hey Daniel. I'd say you're definitely overcomplicating things. Here's what I'd do:

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

 

I think you'd learn a lot from my article about animating efficiently.

 

7 minutes ago, Daniel Hult said:

Im still a club greensock member, just not on this account (I use the other one for work)  

No worries, we help everyone, member or non-member  But thanks for supporting GreenSock.

[Daniel Hult]

Thanks for the reply!

I made this example very reduced because I was just trying to make it easier for you to debug - but I might have a solution anyway with your code  

Just curious about one more thing. Why do you use this:

gsap.utils.toArray('.slide');

I see it in the forums here a lot but never understand why when you can do e.g [...document.querySelectorAll('.something')] or Array.from(....)
 

[ZachSaucier]

2 hours ago, Daniel Hult said:

I see it in the forums here a lot but never understand why when you can do e.g [...document.querySelectorAll('.something')] or Array.from(....)

They're pretty much equivalent. But I find utils.toArray to have easier syntax. 

[PointC]

There's a whole bunch of new utility methods in GSAP 3 that will make your life a bit easier.

 

https://greensock.com/docs/v3/GSAP/UtilityMethods

[GreenSock]

2 hours ago, ZachSaucier said:

They're pretty much equivalent. But I find utils.toArray to have easier syntax. 

Yep, gsap.utils.toArray() can technically handle more than the other options you mentioned. It can handle Arrays, jQuery objects, NodeLists, selector text, a single DOM element, a single generic object...it'll take almost anything and make it into an Array. 👍

[Daniel Hult]

Yeah, I've come to realize after using gsap for a while.. that it's quite big (in terms of functionality)  I sometimes just look through the documentation and find something that I've wondered how to achieve about before.

Thanks for the replies guys - very helpful as always

[OSUblake]

16 hours ago, Daniel Hult said:

I see it in the forums here a lot but never understand why when you can do e.g [...document.querySelectorAll('.something')] or Array.from(....)

 

Much easier to read.

 

const somethings = [...document.querySelectorAll('.something')];

// vs
const somethings = Array.from(document.querySelectorAll('.something'));

// vs
const somethings = gsap.utils.toArray('.something');