Closed mdgriffith closed 7 years ago
Would it be possible in simple cases to generate native CSS animations? That could solve some of the performance problems?
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
Some points that figure into potentially compiling elm-style-animation
type animations into static CSS.
Msg
at a given step?
Sooooo, now I'm thinking it's likely doable.....
In doing some thinking about this, here are the +/- of different approaches
Msg
at a specific step in the animation
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.
Msg
at a specific step
Html.Attributes.batch
div [ class Nav, animations Nav [(Intro, True)] ] []
You have to specifically wire this up for every element in the animation.
Start an animation in your update function:
Style.Animation.start Intro stylesheet
Tradeoffs:
Note to potentially use will-change
for transitions:
https://dev.opera.com/articles/css-will-change-property/
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.
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-animation
s directly into yourstyle-element
stylesheet. These animations can sendMsg
s to your update function at any point in the animation. A single animation can be attached to multiple classes.Here are two classes,
Button
andNav
which are both part of theIntro
animation.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
Animation.start AnimationName
as an animation step.Msg
s just likeAnimation.Messenger
.Html.Attributes.batch