Framer Classic » Events » Animation events

Animation events

Animation events are the events emitted by animations, and this means any animation: those started by an animation object, the animate() function, or by state changes.

Animation events
onAnimationStartThe animation started.
onAnimationStopThe animation stopped. (Is always triggered, either when it was stopped halfway or ran until completion.)
onAnimationEndThe animation ran until completion.

FYI: onAnimationStop will always be called before onAnimationEnd.

Chaining animations

You can listen to the AnimationEnd event of one animation to start a second one.

This way you can chain as many of them as you want, and create a whole sequence of animations (comparable to setting key frames on a timeline).

Here we listen to the ending of a move animation to trigger moveBack, its reverse (see Reversing an animation):

# start ‘moveBack’ when ‘move’ ends
move.onAnimationEnd ->
    moveBack.start()

By also listening to moveBack we can have both animations run continuously…

# …and start ‘move’ when ‘moveBack’ ends
moveBack.onAnimationEnd ->
    move.start()

…after we trigger the first one:

# start ‘move’
move.start()
Open in Framer
Once the first animation started, they will run consecutively

In the above example, we listen to the animation objects because both animations happen with the same layer, but when working with different layers, we can listen to the events emitted by the layers.

An example. We now have a green layer on the left and a blue one on the right (the green one is created last so that it’s on top).

blueSquare = new Layer
    borderRadius: 20
    backgroundColor: "rgb(40,175,250)"
    x: Align.center 200
    y: Align.center

greenSquare = new Layer
    borderRadius: 20
    backgroundColor: "rgb(125,221,17)"
    x: Align.center -200
    y: Align.center

We move the green layer to the right, while also rotating it…

# move ‘greenSquare’ to the right
greenSquare.animate
    x: greenSquare.x + 400
    rotation: 180
    options:
        time: 2

…and start an animation on blueSquare when greenSquare’s animation ends.

# animate ‘blueSquare’ after ‘greenSquare‘
greenSquare.onAnimationEnd ->
    blueSquare.animate
        x: blueSquare.x - 400
        rotation: 90
        borderRadius: 100
        options:
            time: 2
Open in Framer
The ending of the first animation triggers the second one

Note that we used simple animate() functions instead of animation objects.

Animation events are emitted regardless of how the layer is animated, be it with animate(), an animation object, or a state change like in this example:

# adding a ‘rightside’ state to ‘greenSquare’
greenSquare.states.rightside =
    x: greenSquare.x + 400
    rotation: 180

# animating to the new state
greenSquare.animate "rightside"
# animate ‘blueSquare’ after ‘greenSquare‘
greenSquare.onAnimationEnd ->
    blueSquare.animate
        x: blueSquare.x - 400
        rotation: 90
        borderRadius: 100
        options:
            time: 2
Open in Framer

Overview of the animation events

The three animation events
Open in Framer

Leave a Reply