Embed elm-style-animations

[mdgriffith]

Embedding elm-style-animation

style-elements has interfaces for embedding css animations and transitions. This is great, but in many cases it's not powerful enough.

Coming up, you'll be able to embed elm-style-animations directly into your style-element stylesheet. These animations can send Msgs to your update function at any point in the animation. A single animation can be attached to multiple classes.

Here are two classes, Button and Nav which are both part of the Intro animation.

stylesheet =
    Style.render
        [ class Button
            [ borderColor Color.blue
            , animation Intro
                [ to
                    [ borderColor Color.red
                    ]
                ]
            ]
        , class Nav
            [ opacity 0
            , animation Intro
                [ to
                    [ opacity 1
                    ]
                ]
            ]
        ]

In your update function, calling Style.Animation.start Intro stylesheet will start the animation on both classes. This is very powerful for coordinating large, multi-element animations.

Notes

• This means the stylesheet is passed around as part of your model.
  • Performance is a consideration but I believe it can be sufficiently addressed.
• Animation's can start other animations by embedding Animation.start AnimationName as an animation step.
• Animation's can send Msgs just like Animation.Messenger.
• To do this seamlessly requires Html.Attributes.batch

[BrianHicks]

Would it be possible in simple cases to generate native CSS animations? That could solve some of the performance problems?

[mdgriffith]

Transitions and native CSS animations will continue to be supported in style-elements though I think supporting elm-style-animation will have to happen with a different interface.

So, it will be easy to add basic animations, and then upgrade to elm-style-animation later.

Performance-wise, I think the danger is if the virtual DOM is doing a diff on the entire style sheet on every frame. I believe this can be avoided as long as there is some careful consideration with things like lazy and only allowing normal static styles to be generated once at the start. The only style state that will actually be operated on will be the animation states.

Of course, gotta verify this with elm-benchmark. :D

[mdgriffith]

Some points that figure into potentially compiling elm-style-animation type animations into static CSS.

• Can you animate along a curve?
  • Specifying position at different intervals should be enough to do this!
• Can you send a Msg at a given step?
  • If we've calculated durations and know when an animation has been interrupted, then we could manage this.
• Auto draw an SVG path?
  • Not sure if this is possible, though this article talks about how to do it. The challenge they face is not knowing the full length of the path beforehand, and having to use JS to get it.
• Are animations smoothly interruptible?
  • And beyond that, do we care?

Sooooo, now I'm thinking it's likely doable.....

[mdgriffith]

In doing some thinking about this, here are the +/- of different approaches

Embed elm-style-animation

• [x] animate along curve
• [x] morph between svg shapes
• [x] draw path
• [x] send Msg at a specific step in the animation
  • (Useful/mandatory for coordinating some animations)
• [x] requires handling stylesheet in model (a pain)
• [x] requires passing stylesheet to every view (also a pain)
• [x] smooth interruptions (This might not be )
• [x] requires Html.Attributes.batch (probably blocked by this)

Animations are started via a step in the update:

Style.Animation.start Intro stylesheet

All elements that are included in that animation then begin their animation.

Native CSS Animations

• [x] animate along curve
• [ ] draw path
• [ ] morph between svg shapes - Not via pure css
• [ ] smooth interruptions
• [ ] send Msg at a specific step
  • Not without storing stylesheet in model
  • and passing stylesheet around every view.
• [ ] requires handling stylesheet in model (a pain)
• [ ] requires passing stylesheet to every view (also a pain)
• [ ] smooth interruptions
• [ ] requires Html.Attributes.batch

Options for starting an animation

Start Animations via adding an animation class.

div [ class Nav, animations Nav [(Intro, True)] ] []

You have to specifically wire this up for every element in the animation.

Dynamically insert CSS animation to Stylesheet

Start an animation in your update function:

Style.Animation.start Intro stylesheet

Tradeoffs:

• Stylesheet needs to be in the model and updated
• Though doesn't need to be passed around to every view
• Able to send 'Msg's at specific animation steps
• Don't need to wire up every animated element

[mdgriffith]

Note to potentially use will-change for transitions: https://dev.opera.com/articles/css-will-change-property/

[mdgriffith]

Im going to archive this because animation will likely look different. I'm waiting for a separate, currently private project to land before addressing this.