Using the Animation object

Next up: the object.

For this example, we start with a green square placed 200 points left of the center:

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

We then create an Animation object. It’s an object (just like a layer), so you create it with the new keyword.

Directly after Animation, you have to add the layer you want to animate, followed by a comma (,).

# move greenSquare 400 points to the right
# while rotating it 180 degrees
move = new Animation greenSquare,
    x: greenSquare.x + 400
    rotation: 180
    options:
        time: 2

The rest works the same as the animate() function: you set the properties you want to animate to, and settings like time, curve, etc. go under options.

In this example, we’ll be moving the square 400 points to the right while rotating it 180 degrees.

Then, to trigger the animation, we call start() on our animation object, like this:

move.start()

But most often you’ll trigger an animation with an event, like a tap or click on the layer.

# start ‘move’ when ‘greenSquare’ is tapped
greenSquare.onTap ->
    move.start()

Different animations that target the same layer

Say you would like the rotation to start later. You can do this by simply turning it into a separate animation object with a different timing.

# move greenSquare 400 points to the right
move = new Animation greenSquare,
    x: greenSquare.x + 400
    options:
        time: 2

# rotate greenSquare 180 degrees
# after a delay of half a second
rotate = new Animation greenSquare,
    rotation: 180
    options:
        delay: .5

The rotate animation has a delay of half a second but will still finish before the move animation, because of its (default) duration of one second.

# start both ‘move’ and ‘rotate’ when tapped
greenSquare.onTap ->
    move.start()
    rotate.start()

Different animation objects can be started on the same layer as long they don’t animate the same properties.

Here’s an example of what happens when you do trigger two animation objects that alter the same property at the same time. If we add an x property to the rotate animation,…

rotate = new Animation greenSquare,
    rotation: 180
    x: greenSquare.x + 400
    options:
        delay: .5

…it will override the x animation in the move animation object, resulting in the rotation and slide animations running simultaneously (after rotate’s 0.5-second delay).

Starting and stopping an animation

Along with start() there’s also stop().

In this example, we’re using two new events: onTouchStart triggers when you press down, and onTouchEnd when you release.

The events are attached to Framer.Device.screen, so that you can tap anywhere:

# Press anywhere to start
Framer.Device.screen.onTouchStart ->
    move.start()
# Release to stop
Framer.Device.screen.onTouchEnd ->
    move.stop()

Press down to start() the animation, release to stop() it.

You’ll notice that the animation moves slower every time you start it anew. This is because an animation will always begin from its current properties and will animate for the whole of its duration (in this case, two seconds) to the new properties.

Pro tip: Use restart() to have an animation always start with the same properties.

# Press anywhere to start
Framer.Device.screen.onTouchStart ->
    # always start the same
    move.restart()

Reversing an animation

The reverse() function does just one thing, but it does it well. It creates a new animation object that’s exactly the opposite of the object you called it on.

# create a reverse of ‘move’
moveBack = move.reverse()

We’ll trigger this new animation two seconds later so that it’ll start directly after move.

# start ‘move’
move.start()
# start ‘moveBack’ after 2 seconds
Utils.delay 2, ->
    moveBack.start()

Pro tip: You can create the reverse animation and directly trigger it, like this:

# start a reverse animation after 2 seconds
Utils.delay 2, ->
    move.reverse().start()

This way you don’t even have to create moveBack.

But wouldn’t it be nice if we didn’t have to count two seconds, and instead could just say “Start that animation, when this one ends.”? Well, we can, with the animation events.