Search code examples
animationpropertiesprototypestatesframerjs

Assigning different animationOptions to states on Coffeescript


In the code below, both states have the same animation properties. How can I assign different animation properties to each state?

for check in aniCheck
    check.states.add
        one: 
            opacity: 1
            scale: 1
        two:
            scale: 0
    check.states.animationOptions =
        curve:"spring(400,25,50)"
        delay: 2

    iconFav.on Events.Click, ->
        check.states.next("one","two")

Solution

  • You can run a function before the switch event.

    check.on Events.StateWillSwitch, (oldState, newState) ->
        if newState == 'one'
            check.animationOptions = 
                curve: 'spring(400,25,50)'
                delay: 2
        if newState == 'two'
            check.animationOptions = 
                curve: 'linear'
                delay: 0
    

    I'm just learning and build this Framer JS example for reference