[[React] Targeting dom with useRef vs gsap.utils.selectors/gsap.context]

Hello! I wanted to know in terms of performance if there's any difference between using multiple useRef to select the elements of a react component and using the new feature gsap.context.

Second if it's posibble I'd like to know what is it going on in the shadows, how is that the library makes sure that the strings I pass which are inside the parent ref are getting targeted. Is there somewhere I could read about it?

[Stop repeat animation on its end]

20 hours ago, GreenSock said:

 

I just updated the codepen to do what you were requesting. Does that help?

 

The old code that'll just end a timeline the next time the yoyo completes looked like this:

function endTimeline(tl) {
    var repeats = Math.floor(tl.totalTime() / tl.duration());
    if (repeats % 2 === 0) { //make sure we end on a yoyo cycle which would be on an ODD number of repeats!
        repeats += 1;
    }
    tl.repeat(repeats);
}

 

And the updated code that toggles things looks like this: 

function toggleTimeline(tl) {
    tl.willStop = !tl.willStop; //just attaching a custom "willStop" property that we toggle so we can track even if the user clicks many times quickly.
    if (tl.willStop) {
        var repeats = Math.floor(tl.totalTime() / tl.duration());
        if (repeats % 2 === 0) { //make sure we end on a yoyo cycle which would be on an ODD number of repeats!
            repeats += 1;
        }
        tl.repeat(repeats);
    } else {
        tl.repeat(-1);
        if (!tl.isActive()) {
            tl.restart();
        }
    }
}

 

And for the record, "willStop" is just a name I made up - it's not some official part of the API. I just wanted some way of tracking the state so that if someone clicks many times quickly, it handles things properly. 

 

Does that help? 

This is very creative and nicely done. Thanks!

[Stop repeat animation on its end]

Yes! Thank you Jack.

Im learning bot things, gsap and JS and now im trying to figure out how to edit your solution to make the animation play again on another click ?

[Stop repeat animation on its end]

Hi everyone! I have no idea if this is easy to do but here we go...

How can I end an infinite timeline onComplete? I mean, I want to end it on user click but I don't want to kill(), clear() or pause(), I just want the animation to end his cycle then pause.

Is it simple?

Here's a pen I've made

See the Pen EOpgNd?editors=0011 by yikifp (@yikifp) on CodePen

 

See the Pen EOpgNd?editors=0011 by yikifp (@yikifp) on CodePen

[Inspiring HTML5 Banner Examples with GSAP]

Hey Hi everyone! What incredible pieces of work you make!

Im new in the business, I've started with Js GSAP and advertising about a year ago but I want to share this one I made in january.

https://bit.ly/2GakuUs

 

I'm still learning everyday so I hope to one day be like you guys