0

Following a Framer workshop example verbatim and for some reason cannot get a conditional statement to work.

This code runs as expected

layerA = new Layer
    backgroundColor: "#fff"
    borderRadius: 4
    width: 200
    height: 200
    rotation: 0


layerA.center()

layerA.states.add
  grow:
    scale: 1.5
    rotation: 90

shrink:
    scale: 1
    rotation: 0

layerA.states.animationOptions =
  curve: "spring(400, 50, 30)"

layerA.onClick ->
    layerA.states.next("grow", "shrink")

However, if I add the conditional below it is ignored?

    if layerA.states.current is "grow"
        layerA.states.animationOptions = 
        curve: "ease"
        time: 2
    else 
        layerA.states.animationOptions =
        curve: "spring(400,50,30)"
romeplow
  • 462
  • 1
  • 4
  • 13

1 Answers1

2

Seems the Framer API has been updated and now the .name property must be appended to states.current for this to work.

So the following conditional

if layerA.states.current is "grow"
    layerA.states.animationOptions = 
    curve: "ease"
    time: 2
else 
    layerA.states.animationOptions =
    curve: "spring(400,50,30)"

... would become

if layerA.states.current.name is "grow"
    layerA.states.animationOptions = 
    curve: "ease"
    time: 2
else 
    layerA.states.animationOptions =
    curve: "spring(400,50,30)"
romeplow
  • 462
  • 1
  • 4
  • 13
  • 1
    You can read more about the changes in the animation API here: https://github.com/koenbok/Framer/wiki/Animation-Upgrade-Guide – Niels Dec 05 '16 at 09:00
  • @Niels: This will be excellent reference for the future, thank you. – romeplow Dec 06 '16 at 12:41