Framer Classic » Animation » Time, Delay, Repeat and Looping

Time, Delay, Repeat and Looping

Since these settings are not properties of the layer but refer to the animation itself, you always put them in their special options object (which is added automatically when you use Auto-Code).

Time

The time argument sets the duration of the animation in seconds. The default value is quite long—one second—so you’ll often shorten it after having tested your animation.

But here, as an example, we increase it:

# animate the layer for 2 seconds
tealCircle.animate
    borderRadius: 0
    scale: 1.5
    rotation: 180
    options:
        time: 2
Open in Framer
Duration of 2 seconds instead of the default 1 second

Delay

The delay after which the animation should start, also defined in seconds.

# animate the layer for 2 seconds, 
# after a delay of 1 second
tealCircle.animate
    borderRadius: 0
    scale: 1.5
    rotation: 180
    options:
        time: 2
        delay: 1
Open in Framer
The same 2-second animation starting after a delay of 1 second

Repeat

How often an animation should play. The default value is 0 (zero repeats); the animation will play only once.

# animate the layer for 2 seconds,
# 4 times,
# with a delay of 1 second every time
tealCircle.animate
    borderRadius: 0
    scale: 1.5
    rotation: 180
    options:
        time: 2
        delay: 1
        repeat: 3
Open in Framer

Note that repeat does not reverse an animation. The layer will jump back to its original size, wait one second, and then animate again.

The animation plays once and repeats three extra times

Looping: Never stop repeating

Have an animation play forever by setting its looping to yes.

# keep rotating
purpleSquare.animate
    rotation: 360
    options:
        time: 6
        looping: yes
        curve: Bezier.linear
Open in Framer

I gave the animation a linear curve so that it’s a steady rotation at a constant speed.

Rotating ’til the end of time, or until you quit Framer

Leave a Reply