1

I am trying to make a simple pulsing animation of a on-screen element in Framer.js and now it looks like this:

element.animate
    properties: scale:1.3
element.on Events.AnimationEnd,->
    this.scale = 1
    locationUn.animate
        properties: scale:1.3

basically when the screen is loaded, the element will be enlarged and upon end of the animation, it's forced back to scale 1 and run the animation again; but this solution is not elegant and animation seems very abrupt.

I am new to CoffeeScript...is there anyway to write a infinite loop to check on some condition like this?

checker = true

while(checker == true){
    run animation
    if(some events occurs){
        checker = false
    }
}
....

How to realize this in CoffeeScript?

Rexroth
  • 109
  • 1
  • 12
  • is there a reason you'd expect that this would be different in coffeescript than javascript? Your coffeescript above looks fine and will work as expected. – Jed Schneider Jan 31 '15 at 13:18
  • The pulsing animation works but the animation is very abrupt (jumps from scale 1.3 directly to 1 with no transition). I'm looking for a general way of writing a infinite loop to hopefully make it smooth – Rexroth Feb 01 '15 at 18:33

1 Answers1

2

You can create a looping pulse like this:

circle = new Layer()
circle.style.borderRadius = "100%"
circle.backgroundColor = "white"
circle.center()

outwards = new Animation({
    layer: circle,
    properties: {scale: 1.3},
    curve: "ease-in-out"
})

inwards = outwards.reverse()

outwards.on(Events.AnimationEnd, inwards.start)
inwards.on(Events.AnimationEnd, outwards.start)

outwards.start()
Doug Proctor
  • 79
  • 1
  • 4