Using the loopOut() Expression in After Effects

Getting the Project Files

Download the Project Files

Before diving into this tutorial, ensure you have all necessary assets at your fingertips. After downloading, extract the archive if your system hasn't automatically done so. The project files include a pre-built clock graphic with properly separated layers, optimized for animation in After Effects. Download link: Project Files

Project Overview

This tutorial demonstrates the power of After Effects expressions—specifically the loopOut() function—to create seamless, infinitely repeating animations. Rather than manually keyframing hundreds of repetitive movements, you'll learn to harness code-based automation that scales efficiently across projects of any duration. These techniques are essential for motion graphics professionals working on social media content, UI animations, and complex motion systems where repetitive elements are common.

Setting up the Anchor Points

Proper anchor point placement is crucial for realistic animation behavior. Each element must pivot from its natural rotation point to achieve convincing motion.

1. Double-click the mantle clock layer to enter the precomposition workspace.
2. Select the hour hand and press Y to activate the Pan Behind tool (Anchor Point tool). Drag the anchor point to the base of the hour hand where it would naturally pivot.
3. Repeat this process for the minute hand and pendulum, ensuring each anchor point sits at the mechanical pivot point of the respective element.

Animating and Adding Expressions

Now we'll create the base animations and apply different loopOut() expressions to achieve distinct motion behaviors for each clock component.

1. Select the pendulum layer and press R to reveal Rotation properties.
2. Click the stopwatch icon next to Rotation to create an initial keyframe, then set the rotation value to 30 degrees.
3. Move the playhead forward approximately one second to the 0;00;01;00 timecode.
4. Change the rotation value to -30 degrees to complete the pendulum's swing arc.
5. Select both keyframes, right-click either keyframe, and navigate to Keyframe Assistant > Easy Ease to create natural, organic motion curves.
6. Alt-click (Option-click on Mac) the Rotation stopwatch to open the expression editor. Type loopOut("pingpong") to create seamless back-and-forth motion that reverses direction at each keyframe.
7. Select the minute hand and press R for Rotation properties.
8. With the playhead at the timeline origin, click the Rotation stopwatch to establish the initial keyframe.
9. Advance the playhead to approximately 0;00;01;00.
10. In the rotation property, change the first value (revolutions) to 1, creating one complete 360-degree rotation.
11. Alt-click the Rotation stopwatch and enter loopOut("")—the default loop expression that continuously repeats the keyframed animation cycle.
12. Return the playhead to the timeline origin and select the hour hand. Press R for Rotation and click the stopwatch to set the initial keyframe.
13. Move the playhead to approximately 0;00;01;12 (12 frames forward).
14. Set the hour hand's rotation to 30 degrees, representing the movement between hour markers.
15. Alt-click the Rotation stopwatch and enter loopOut("offset"). This expression adds the initial 30-degree movement to each subsequent loop iteration, creating cumulative rotation that mimics real clock behavior.

Understanding LoopOut Variations

The three loopOut() expressions used in this project serve distinct purposes in modern motion graphics workflows:

LoopOut("pingpong"): Creates oscillating motion perfect for pendulums, breathing animations, or any element that needs to reverse direction smoothly. This is particularly valuable for UI hover states and organic motion graphics.

LoopOut(""): The default cycling behavior that repeats keyframes infinitely without modification. Essential for loading animations, rotating logos, and any repeating motion that maintains consistent timing.

LoopOut("offset"): Adds the keyframe values cumulatively with each loop iteration. This is crucial for elements that need progressive movement—think scrolling backgrounds, advancing mechanical elements, or any animation requiring continuous forward progression.

Video Transcription

Hello, this is Tziporah Zions from Noble Desktop, and in this tutorial, I'm going to show you how to create sophisticated loop expression animations in Adobe After Effects. We'll be implementing several powerful expressions—small bits of code within After Effects—to generate infinitely repeating animations that maintain perfect timing and consistency.

What you're seeing here represents the completed animation. Expressions are automated lines of code that eliminate the need for manual keyframe creation across extended timelines. While they might sound intimidating initially, they're actually straightforward tools that dramatically accelerate your workflow and ensure mathematical precision in repetitive animations.

These techniques are particularly valuable for social media content, user interface animations, and complex motion graphics projects where repetitive elements are essential. Rather than manually keyframing hundreds of repetitions, expressions handle the automation intelligently, adapting to timing changes and maintaining perfect synchronization.

Our primary asset is this clock graphic, which comes pre-loaded in the project file. It was strategically prepared in Adobe Illustrator with separated layers to optimize animation workflow in After Effects. The asset is located in the project's assets folder should you need to relink it, and the complete project file is available in the video description.

Let's begin the implementation. We'll start by double-clicking the mantle clock precomposition to access our animation workspace. Our focus will be on three key elements: the hour hand, minute hand, and pendulum—each requiring different animation behaviors.

First, we'll establish proper anchor points by pressing Y to activate the Pan Behind tool. This tool determines the pivot point for each animated element. For the pendulum, we'll position the anchor point at its suspension point—where it would naturally swing from. The hour and minute hands require anchor points at their base, where they connect to the clock mechanism.

After positioning anchor points, I'll switch back to the Selection tool by pressing V. Now we'll animate the pendulum by pressing R to reveal rotation properties. We'll establish the pendulum's swing range at 30 degrees, creating our first keyframe, then move approximately 90 frames forward and set the opposite position at negative 30 degrees.

Selecting both keyframes and applying Easy Ease through the Keyframe Assistant creates natural, organic motion curves that simulate real-world physics. Now comes our first expression: Alt-clicking the active stopwatch opens the expression editor, where we'll type loopOut("pingpong").

This pingpong modifier creates bidirectional looping—the animation plays forward to the last keyframe, then reverses back to the first, creating seamless oscillation. After deselecting to activate the expression, you'll see the pendulum continues swinging indefinitely beyond our keyframes.

The distinction between loopIn() and loopOut() is timing-based: loopIn() repeats animation before the first keyframe, while loopOut() continues beyond the last keyframe. Since we want continuous motion after our animation ends, loopOut() is the appropriate choice.

For the minute hand, we'll create mechanical rotation behavior. After setting rotation keyframes, we'll change the first rotation value to 1, representing one complete revolution over our timeline duration. The expression loopOut("") or alternatively loopOut("cycle") creates continuous rotation without reversal—perfect for clockwork mechanisms.

The hour hand requires more sophisticated behavior using loopOut("offset"). By setting a 30-degree rotation over an extended timeline, the offset expression adds this value cumulatively with each loop iteration. This creates the progressive movement characteristic of actual clock hour hands, where each cycle advances the position rather than resetting it.

One powerful feature of expressions is their adaptability. If you adjust keyframe timing by selecting and moving them, the loop expressions automatically adjust to the new duration while maintaining their mathematical relationships. This flexibility is crucial for iterative design processes where timing adjustments are common.

These loopOut() techniques extend far beyond rotation properties. They apply equally to position animations for scrolling backgrounds, scale properties for breathing effects, or opacity for blinking elements. The offset expression is particularly powerful for complex motion paths—if an element follows an intricate curved path, loopOut("offset") will repeat that exact path while advancing the element's overall position.

This automation capability is what separates professional motion graphics workflows from manual animation approaches. Whether you're creating loading animations for web applications, social media content with repeating elements, or complex mechanical animations, these expression techniques provide the precision and efficiency that modern projects demand.

That concludes our exploration of loopOut() expressions in Adobe After Effects. These foundational techniques will serve as building blocks for more complex automation workflows as your projects evolve. This has been Tziporah Zions for Noble Desktop.