Skip to main content

Looping

info

If you are not familiar with the concept of middleware, make sure to check the middlewares explanation. Also, make sure that you are familiar with the Actions concept.

The looping effect is one of the most visually appealing effects in most situations, and it is the detail that (usually) makes the difference between simple and advanced and professional graphics. The looping effect is something that has always been very tricky to achieve and has always involved a lot of code and understanding of the underlying logic of the animation engine.

And this is the place where Loopic comes in. Since Loopic is a specially designed tool for creating HTML graphic templates and animations, it has some special settings and API methods that make it very simple to achieve the looping effect. So, let's get started.

Prerequisites​

For this example, we will need one main composition and one nested composition. But let's go step by step.

Create a new composition​

Create a new composition that will be considered the "main" composition. Add some text elements to it, and add some shapes such as rectangles (just for the design purpose). Or you can simply import any PNG sequence of your choice.

Now set the Text element in and out animations, as well as the animation of the shapes that will be in the background of the texts (or just skip this if you are using PNG sequences). The main composition is currently just a linear animation without any looping, but no worries - the looping functionality will be enabled very soon.

Remember to add the Stop and outro action on the desired frame as on that frame our animation will be stopped and the animation will continue from that frame once we decide to hide the graphic.

Create a nested composition​

Now it is time to make the loop effect. The idea here is to move all elements that need to be loopable in a new, nested composition. That nested composition will be playing forever (in the loop), while the main composition will behave just like any other linear composition (it will stop on the stop and outro keyframes).

Select your loopable elements (in our case, it's the rectangle element), and move it to nested composition (Right click -> Move to nested composition). Now all our loopable elements are in a separate composition. With this change, nothing has happened, and the template will behave exactly like it was before.

Now let's tweak some settings.

Independent playback​

The first thing we need to modify is the synchronization of the playheads (playbacks) of main and nested compositions. Since the nested composition is contained inside the main composition, any time the main composition pauses, the nested composition will pause as well. The way to disable this is to set the detachedPlayhead of the nested composition to true (read more about the Composition element API).

Changing this property can be done in the Loopic's UI - when you select the Composition element, in the Settings panel on the right side you can check the checkbox "Detach Playhead".

Now if we preview our animation, the main composition will stop at the frame defined as the stop and outro frame, while the nested composition will continue playing, until it stops as well.

Looping​

Now that our playheads synchronization is off, it's time to enable the looping of the nested composition. And the way to do it is to go inside the nested composition, and on the very last frame add new Frame action with the code that plays the composition from the beginning (frame 0).

this.goToAndPlay(0);

Now if we preview our main composition, there should be the loop effect!

Final​

We got the looping working, and that's great. But, when we are animating out, our loopable elements are just suddenly disappearing from the screen, without any out animation, like our text element. The way to fix this is to add some animation keyframes to the nested Composition element (inside the main composition), which will gently animate the loopable nested composition out. In this example, we will just fade it out.

In the end, we got a fully animated and loopable graphic template. Note that you can still change your nested composition or main composition animations, and you can even change the duration of the nested composition - just make sure that the Frame action for looping is always on the last frame.