Node Editor Help Please

[zackmcr]

New to BF animations - I have a simple image fade in and out timeline setup, I can’t work out how to make it loop when its finished, is it a Node event? I’ve found the GSAP Timeline action in Note Editor but can’t figure out how to get it to restart the timeline once it completes.

Thanks in advance

[manc]

Hi there

You can set repeat to -1 for it to repeat infinitely. By default that’ll always restart the animation from it’s starting point so if you wanna infinitely loop between start and end of the animation, you’ll need to enable yoyo as well

See if that works out. If not, feel free to share some more details about your setup so we can figure it out

[zackmcr]

Thanks Manc appreciate the reply. I’ve tried that already but that’s just for the single animation in the timeline. What I actually need is for it to get to the end of the last animation and restart it. I’ve seen the yoyo setting too which I believe reverses the direction but it needs some kind of trigger to restart it (or reverse it).

This I believe used to be in the “Events” tab but since they changed it to Node Editor I can’t work it out.

[manc]

Ahh ok gotcha. We do have events for playing the timeline but it doesn’t currently offer any advanced settings. Here is what you can do:

1. Get your Timelines ID by right-clicking on it
   

   

2. In the Node Editor, create a new Event (on Pageload or however you wanna trigger it) and connect a JS Action
   

   

3. In the JS Action, add the following (replace the Timeline ID with yours):

let anim = await getTimeline("2fed7b11-aa41-03a1-36a0-378d41a0bb65");
anim.tl.repeat(-1);
anim.tl.yoyo(true); //Remove if you don't need it
anim.tl.play();

Here is a basic animation of 2 elements with yoyo enabled:

and here without yoyo:

[zackmcr]

Excellent. Solved. Seems a bit crazy to have to use a JS snippet to achieve something that seems pretty straightforward, but it works perfectly, thanks mate.