Repeating, infinite animation loop using framer.js

Question

I'm trying to create a pulsating, looping animation effect using framer.js I've loaded an image into a layer and I'd like to scale it up and down continuously. I can't figure out how to scale it down and loop through the animation indefinitely. This is what I currently have:

imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/icon.png"})
imageLayer.center()

animationA = new Animation({
    layer: imageLayer,
    properties: {scale: 2.0},
    curve: "ease-in-out"
})


animationA.start()

Like this? http://stackoverflow.com/questions/25589805/how-do-i-make-a-continuous-loop-with-the-animate-method — FiLeVeR10, Feb 14 '15 at 18:48
This seems to work if I try to animate a layer that doesn't contain an image, but unfortunately not with an image layer... — Goren Berdichevsky, Feb 14 '15 at 18:57

score 3 · Answer 1 · answered Feb 14 '15 at 20:32

solved it like this:

imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/icon.png"})
imageLayer.x = 100
imageLayer.y = 100

animationA = new Animation({
    layer: imageLayer,
    properties: {scale: 2.0},
    curve: "linear",
    time: 0.4

})

animationB = new Animation({
    layer: imageLayer,
    properties: {scale: 1.0},
    curve: "linear",
    time: 0.2

})

animationA.start()

animationA.on(Events.AnimationEnd, function() {
    animationB.start()
  });

animationB.on(Events.AnimationEnd, function() {
    animationA.start()
  });

score 0 · Answer 2 · answered May 26 '15 at 23:51

Awesome.. thanks for this. I fixed your code so it's all in coffeescript.

imageLayer = new Layer({x:0, y:0, width:128, height:128})
imageLayer.x = 100
imageLayer.y = 100

animationA = new Animation({
    layer: imageLayer,
    properties: {scale: 2},
    curve: "linear",
    time: 0.2
})

animationB = new Animation({
    layer: imageLayer,
    properties: {scale: 1.0},
    curve: "linear",
    time: 0.6
})

animationA.start()

animationA.on Events.AnimationEnd, ->
    animationB.start()

animationB.on Events.AnimationEnd, ->
    animationA.start()

score 0 · Answer 3 · answered Jul 25 '16 at 20:17

Here's how I did it. It uses a single animation variable instead of 2.

animationTime = 1.8

animation = new Animation
    layer: sketch.spinner
    properties: 
        rotation: 360
    curve: "linear"
    time: animationTime

animation.start()

Utils.interval animationTime, ->
    #reset the animation
    sketch.spinner.rotation = 0
    animation.start()

score 0 · Answer 4 · answered Jul 28 '16 at 14:18

You can use Animation.reverse() for this:

layerA = new Layer
    point: Align.center

scaling = new Animation
    layer: layerA
    properties: 
        scale: 2
    curve: "ease-in-out"

pulse = ->
    scaling.start()
    scaling.onAnimationEnd ->
        #Reverse the scaling animation
        scaling = scaling.reverse()
        #Sart the animation again
        pulse()

# Start of the pulse animation  
pulse()

However, if you have a animation that ends at the same point as it begins, you can use the recently introduced looping: true parameter of Animation:

layerA.animate
    properties: 
        rotation: 360
    curve: "linear"
    time: 5
    looping: true

Full prototype here: http://share.framerjs.com/hvex1plbkiqt/

score 0 · Answer 5 · answered Jun 02 '17 at 04:06

Simple scaling example.

Two key points:

1) Use reverse() to create the reverse animation.

2) After each animation ends, trigger the other animation to start.

animation = new Animation 
    layer: bookmark
    properties:
        scale: 1.08
    time: 1
    curve: Bezier.easeInOut

animation.start()

animation.onAnimationEnd ->
    reversedAnimation = animation.reverse()
    reversedAnimation.start()
    reversedAnimation.onAnimationEnd ->
        animation.start()

And here it is in action.

score 0 · Answer 6 · answered Aug 02 '18 at 10:34

You could use States too. https://framer.com/getstarted/guides/prototype#states

LayerA.states.flashGreen =
    color: "#00F082"
    shadowColor: "#00F082"
    shadowBlur: 10
    shadowSpread: 3
    animationOptions:
        time: 1
        curve: Bezier.ease

layerA.stateCycle()
layerA.onAnimationStop -> layerA.stateCycle()

Repeating, infinite animation loop using framer.js

6 Answers6

Simple scaling example.