andrewmacmurray/elm-simple-animation

stateless animation utils for Elm

elm-simple-animation's Issues

How to make it work with tailwindcss (add to the wiki)

First of all, thanks for this Andrew.

I want to share some code that I think It's working for me.
Please consider (after making any changes you think necessary) making it available for others on the wiki, or readme or any where you see fit.
I know you give concise instructions about this, in the documentation.
But having this code available, might save some time and make it easy to adopt this package.

The code is about using Simple.Animation.Animated.custom with the packages: rffeldman/elm-css and matheus23/elm-default-tailwind-modules.

Here is it:

import Html.Styled as Htmls exposing (Html, div, text)
import Html.Styled.Attributes as Attr exposing (class, css)
import Tailwind.Utilities as Tw


animaStyleNode :
    (List (Htmls.Attribute msg) -> List (Htmls.Html msg) -> Htmls.Html msg)
    -> Animation
    -> List (Htmls.Attribute msg)
    -> List (Htmls.Html msg)
    -> Htmls.Html msg
animaStyleNode node animation attributes children =
    Animated.custom
        (\className stylesheet ->
            node
                (class className :: attributes)
                (Htmls.node
                    "style"
                    []
                    [ text stylesheet ]
                    :: children
                )
        )
        animation

htmlsExample : Htmls.Html msg
htmlsExample =
    animaStyleNode div
        flash
        [ css [ Tw.text_white, Tw.text_center, Tw.mx_4, Tw.p_6 ] ]
        [ text "I'm animating!" ]

flash : Animation
flash =
    Animation.steps
        { startAt = [ P.opacity 0, P.backgroundColor "#0382c8" ]
        , options = [ Animation.loop ]
        }
        [ Animation.step 1000 [ P.opacity 1, P.backgroundColor "rgb(19 228 187)" ]
        , Animation.step 1000 [ P.opacity 0, P.backgroundColor "#0382c8" ]
        ]

I think this way of styling (with tailwindcss) is gaining momentum.
A am also very interested in seeing what changes you would make to the code.

Regards,

Yoyo animation

Could be nice to have an option to make an animation yoyo back to it's first frame

For something like this animation:

Instead of writing:

pulseOpacity : Animation
pulseOpacity =
    Animation.steps
        { startAt = [ P.opacity 1 ]
        , options = [ Animation.loop ]
        }
        [ Animation.step 800 [ P.opacity 0 ]
        , Animation.step 800 [ P.opacity 1 ]
        ]

You could have a shorthand like:

pulseOpacity : Animation
pulseOpacity =
    Animation.fromTo
        { duration = 800
        , options = [ Animation.loop, Animation.yoyo ]
        }
        [ P.opacity 1 ]
        [ P.opacity 0 ]

Add Elm CSS adaptor

Have been meaning to do this for ages! Adding an Animated.elmCss helper would cover a lot of the common Html packages elm folks use.

A lot of the thought has been done in #20, so ideally the helper would look something like this:

import Html.Styled as Htmls
import Html.Styled.Attributes as Attr
import Simple.Animation exposing (Animation)
import Simple.Animation.Animated as Animated



animatedStyleNode :
    (List (Htmls.Attribute msg) -> List (Htmls.Html msg) -> Htmls.Html msg)
    -> Animation
    -> List (Htmls.Attribute msg)
    -> List (Htmls.Html msg)
    -> Htmls.Html msg
animatedStyleNode =
    Animated.elmCss
        { text = Htmls.text
        , node = Htmls.node
        , class = Attr.class
        }

Common module extended eases

Given that Simple.Transition is in the process of being added in #8 it might be nice to have a shared space for the extended eases (e.g. all the ones that make use of Cubic) so that both Animation and Transition can use them

Clearer docs for Animated Elm-UI

A few people have struggled to setup an elm-ui example when starting out with the library, this could be a sign that the docs aren't clear enough.

Some ideas:

• Add a link to a full working Ellie
• Include an example that can be copy pasted into a project

Any other ideas, thoughts are welcome!

Common format for Animated helpers

I only just thought of this after I published 1.0.0 🤦 but using a record to inject external dependencies (like for elm-ui https://package.elm-lang.org/packages/andrewMacmurray/elm-simple-animation/latest/Simple-Animated#UiOptions) could be a nice, low mental overhead pattern to use for other ones

So Simple.Animated.svg would become:

animatedSvg =
    Simple.Animated.svg
        { class = Svg.Attributes.class
        }

Please add this to the wiki

Andrew

This is very useful. I suggest that you put it on the wiki, readme or something.
In slack is about to get lost.

Regards,

Simple.Transition module

It could be nice to include a module to leverage CSS transitions nicely from elm

Perhaps something like:

transition : Html.Attribute msg
transition =
    Transition.all
        { duration = 500
        , options = [ Transition.delay 100 ]
        }
        [ Transition.opacity
        , Transition.color
        ]


transitionCustom : Html.Attribute msg
transitionCustom =
    Transition.properties
        [ Transition.opacity 200 [ Transition.delay 100 ]
        , Transition.color 500 [ Transition.easeInOut ]
        ]

Creating an Empty animation

This is created as a discussion for PR #14 .
I thought that adding Animation.empty would make it easier to match either no animation or some animation depending on the model.

My thinking is

animatedEl
    ( if shouldAnimate then
          expandFade
      else
          Animation.empty
    )

@andrewMacmurray mentioned that he usually makes conditional animations like:

if shouldAnimate then
   Animated.div expandFade [] [ element ]
else
   element

(For understanding both use the expandFade animation from the docs.)

In my opinion both work just fine (Andrew's might be slightly more performant, but I haven't tested it, but I can't imagine it is but much ). I just like the flexibility of being able to drop in an empty animation because both "Do I want this element to animate or not" and "Do I want an animated element or not" now have direct answers.

I'm interested what others think?
Thanks!

Also I am curious, should the name be Animation.empty because that is what the code is doing, or should it be Animation.none because that is what the intent is?

More in depth mouse hover example

In the readme there's an example of a transition triggering on mouse hover

It's not clear to me though where the "gold-box-on-hover" class comes from. Maybe you could provide an ellie example of how this works?

Animated Collections

A very common pattern in web-uis is to have sortable / filterable collections. These often need some reasonably complex state machinery to animate them.

I wonder if it could be nice to come up with a few examples and see if there are any common patterns that could be extracted into collection helpers.

E.g. https://ellie-app.com/dMdWvSVbZhca1

Include imports in examples

A few of the code examples have things like P.x in them. I had no idea what this was until I opened up the documentation on elm-packages and saw that one of the modules is Simple.Animation.Property. From there I inferred that P was an alias for Simple.Animation.Property.

I think it would be easier if, for example,

animatedDot : Html msg
animatedDot =
    Animated.div expandFade [ class "dot" ] []


expandFade : Animation
expandFade =
    Animation.fromTo
        { duration = 2000
        , options = [ Animation.loop ]
        }
        [ P.opacity 1, P.scale 1 ]
        [ P.opacity 0, P.scale 2 ]

was instead

import Simple.Animated as Animated
import Simple.Animation as Animation
import SimpleAnimation.Property as P

animatedDot : Html msg
animatedDot =
    Animated.div expandFade [ class "dot" ] []


expandFade : Animation
expandFade =
    Animation.fromTo
        { duration = 2000
        , options = [ Animation.loop ]
        }
        [ P.opacity 1, P.scale 1 ]
        [ P.opacity 0, P.scale 2 ]

leveraging animationend and transitionend

It could be nice to have a way to fire events when an animation or transition finishes - a recent example from the elm slack was animating something before a page transition.

One way of doing this could be to use the browser's animationend / transitionend events https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event

Here's a minimal example of that approach - https://ellie-app.com/cZPWSKSXcPZa1

Things I'd like to find out before anything like this gets added:

• Does this approach get out of hand with multiple animations going at once (e.g. if I have a list of animations can I tell which ones have ended reliably)?
• If we provide helpers do they play nicely with the elm-ui and svg wrappers?