Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
2 contributors

Users who have contributed to this file

@tombrewsviews @dariocravero
305 lines (211 sloc) 6.72 KB

Animate scopes

If you didn't add Views to your app through our use-views command, you will need to add our animations library manually by running yarn add @viewstools/animations in the main folder of your project.

Add animations to properties

Say we want to animate the width of a simple button:

ButtonAnimatedWidth

Button Vertical
  backgroundColor red
  onClick <
  width 100
    Label Text
    text Hi

First we need to add a condition (scope) to the Vertical. Animations can be only triggered when the condition value changes (true/false):

Button Vertical
  backgroundColor red
  onClick <
  width 100
  when <isClicked
  width 150
  Label Text
    text Hi

Animations work on scopes and require base value on the base scope. You can think of scopes as animation frames.

Base scope is always a starting frame and each scope defines next frame.

This wouldn't work (there is no width property on the base scope):

Button Vertical
  ## (base scope starts)
  backgroundColor red
  onClick <
  ## (base scope ends, isClicked scope starts)
  when <isClicked
  width 150
  ## (isClicked scope ends)
  Label Text
    text Hi

Add name of the curve after the value to animate any animatable property. We want to animate width after the button is clicked, so we add spring after width's value in the isClicked scope:

ButtonAnimatedWidth Vertical
  backgroundColor red
  onClick <
  width 100
  when <isClicked
  width 150 spring
  Label Text
    text Hi

Here's the code auto-generated by the Morpher from the ButtonAnimatedWidth.view file. ButtonAnimatedWidth.view.logic.js

Animation curves

EaseAll

Spring

Spring curve

tension is the spring energetic load (default 170). friction is the spring resistance (default 26).

Syntax examples:

  • width 150 spring
  • paddingLeft 20 spring tension 20
  • marginTop 10 spring tension 20 friction 20
  • translateY 10 spring tension 20 friction 20 delay 300

Configuration examples:

Spring default

Spring 2

Spring 3

Spring 4

Spring 5

EaseIn

No maximum. Default duration 150.

Syntax examples:

  • width 150 easeIn
  • paddingLeft 20 easeIn duration 300
  • translateX 20 easeIn duration 300 delay 300

Configuration examples:

EaseIn curve1

EaseIn curve2

EaseIn curve3

EaseOut

No maximum. Default duration 150.

Syntax examples:

  • height 150 easeOut
  • left 20 easeOut duration 300
  • scale 20 easeOut duration 300 delay 300

Configuration examples:

EaseOut curve1

EaseOut curve2

EaseOut curve3

Ease

No maximum. Default duration 150.

Syntax examples:

  • rotate 150 ease
  • bottom 20 ease duration 300
  • translateY 20 ease duration 300 delay 300

Configuration examples:

Ease curve1

Ease curve2

Ease curve3

Linear

No maximum. Default duration 150.

Syntax examples:

  • maxWidth 150 linear
  • right 20 linear duration 300
  • flexGrow 3 linear duration 300 delay 300

Configuration examples:

Linear curve1

Linear curve2

Linear curve3

Delay

Add delay to any animated property with a milliseconds value, like in the examples above.

In the Hurray button we are delaying the padding's animation:

paddingLeft 100 easeOut delay 500
paddingRight 100 easeOut delay 500

Delay

List of all animated properties

In general, all the numerical value properties can be animated.

Animatable Layout props

  • width
  • height
  • maxWidth
  • maxHeight
  • minWidth
  • minHeight
  • flexGrow (wow!)
  • bottom
  • top
  • left
  • right

Animatable Spacing props

All margins and paddings can be animated! Make something fancy ⭐️!

Animatable Color props

Animations work on color, backgroundColor, and opacity, including spring curves 🤩. Funky!

Color Spring Animation

Animatable Transform props

  • scale
  • translateX
  • translateY
  • rotate

Animatable Border props

  • borderWidth
  • borderColor
  • all border radius props
  • outlineColor
  • outlineWidth

Combine animated properties

You can animate more than one property in a block, although you will get the best results if you will use only one spring animation per block.

ButtonBounce

Here we are animating:

  • scale
  • backgroundColor
  • paddingLeft
  • paddingRight
ButtonBounce Horizontal
  alignItems center
  backgroundColor #ffaa00
  borderBottomLeftRadius 5
  borderBottomRightRadius 5
  borderTopLeftRadius 5
  borderTopRightRadius 5
  justifyContent center
  onClick <
  paddingBottom 10
  paddingLeft 20
  paddingRight 20
  paddingTop 10
  scale 1
  when <isClicked
  backgroundColor #00c276 linear
  paddingLeft 100 easeIn
  paddingRight 100 easeIn
  scale 1.5 spring tension 20
  Text
    color #ffffff
    fontFamily Montserrat
    fontSize 18
    fontWeight 400
    text Click Me
    when <isClicked
    fontFamily Lobster
    fontSize 28 linear
    text Hurray!!!

As you can see the text also changes when condition isClicked get's toggled on. Same goes for animations. You can animate many properties across blocks and scopes.

Side note. Any interactive blocks need some sort of logic to make them fully functional. Here's an example of the logic file we've used in our animated example. Save it together with the ButtonBounce.view file. ButtonBounce.view.logic.js

Transitions, lists, loops, and Tools

We still need to use JavaScript to animate transitions between views. Here's an example of a function used in a logic file that does the trick for now. Transitions and loops will be added to the next major release. 😊

We are also working on animating list's items. Here's an example of what's possible today using Javascript in the logic file.

Views Tools beta will support props animations!

Known issues - work in progress

  • There can be only one spring animation in the view
  • EaseInOut curve has a bug and currently doesn't work
  • delay on spring curves doesn't work

Big thank you to @amymc for the massive contribution! 🎁 🎈 🎊

Reach out with questions via our Slack Questions Channel. Mention @tom or @dario to make sure that we get your notifications.

You can’t perform that action at this time.