Doing complex animations in Elm -- from elm slack

slack.txt

enkidatron [12:59 PM]  
Have you looked at http://package.elm-lang.org/packages/Fresheyeball/elm-animate-css/latest for handling animation?

fresheyeball [12:59 PM]  
well its for using the pre-fabs in `animate.css`

[12:59]  
not complex animations

[1:00]  
however Elm is excellent for complex animations as well

dtcaciuc [1:00 PM]  
@fredcy There's this, although I haven't tried it personally http://package.elm-lang.org/packages/thebritican/elm-autocomplete/latest

enkidatron [1:00 PM]  
oh yeah. I just saw "animation" and jumped.

fresheyeball [1:00 PM]  
for "complex" animations

[1:00]  
take a look at

[1:00]  
mdgriffith/elm-style-animation

[1:00]  
mgold/elm-animation

[1:00]  
szabba/elm-animations

[1:01]  
I've used the top two of those and hand a good experience

fredcy [1:01 PM]  
@dtcaciuc That’s exactly what I’m using as a basis. It’s 300 some LOC on top of that.

willgottschalk [1:01 PM]  
https://dribbble.com/shots/2985063-TV-Series-Animation/attachments/622305

[1:01]  
I’m looking to make something like that

newfivefour [1:02 PM]  
joined #general

dtcaciuc [1:02 PM]  
@fredcy I see. On a plus side, it's not nearly as daunting as 300 LOC in JS, since the code is infinitely less brittle

fresheyeball [1:02 PM]  
for that kind of a feel

szabba [1:02 PM]  
Mine has terrible docs, and I kept going back and forth between the same two API decisions

[1:02]  
(can't recall start they were)

willgottschalk [1:02 PM]  
so my idea is when the element is clicked you set it to position fixed

fresheyeball [1:02 PM]  
I would go for springs in http://package.elm-lang.org/packages/mdgriffith/elm-style-animation/latest

szabba [1:02 PM]  
@fresheyeball: ^^

willgottschalk [1:02 PM]  
but since you need it to stay in place you need a getClientBoundingRect

fresheyeball [1:03 PM]  
oh god

[1:03]  
no no no

[1:03]  
don't query

newfivefour [1:03 PM]  
Hi all. Just started playing with Elm. Love it.

willgottschalk [1:04 PM]  
@fresheyeball then how can I animate an element from anywhere on the screen to the center for any kind of device?

fresheyeball [1:04 PM]  
if you are going to be doing complex animation in elm

[1:04]  
then make elm responsible for layout

[1:04]  
`getClientBoundingRect` is the imperative mindset, where we write impure proceedures to describe changes in the runtime

[1:05]  
instead, capture a `Sub` of the window size

[1:05]  
and thats it

[1:05]  
make your layout a pure function from `Model -> Html Msg`

[1:05]  
where window size is on the `Model`

[1:06]  
in theory, there should never be a need to query in an fp ui.

willgottschalk [1:06 PM]  
yeah but an element can be anywhere in the window

fresheyeball [1:06 PM]  
yes

willgottschalk [1:06 PM]  
so I have to update each elements position whenever it changes?

fresheyeball [1:06 PM]  
yes

enkidatron [1:07 PM]  
(I'm glad fresheyeball is here, who actually knows what they are talking about, unlike me :slightly_smiling_face: )

fresheyeball [1:07 PM]  
haha

willgottschalk [1:07 PM]  
but that sounds more expensive than just sending a Cmd for a position

fresheyeball [1:07 PM]  
basically, if you want to do complex animations on elements

[1:08]  
shifting them from relying on CSS static positioning, to another form of positioning, and then doing queries is a very imperative approach

[1:08]  
and while you might think doing it in a more pure way is more expensive

[1:08]  
its actually not

[1:09]  
if everything is absolutely positioned, and the style attribute dictates position

[1:09]  
its less computation for the browser, vs the rip and pop of position change

[1:09]  
furthermore, its actually much cheaper, as the react community is learning now as well

willgottschalk [1:09 PM]  
so basically get rid of css all together?

fresheyeball [1:10 PM]  
no, not all together

[1:10]  
but not for circumstances with complex layout animations

[1:10]  
I would use CSS to style things, but not to lay them out

[1:11]  
or atleast not this time

[1:11]  
if you are not animating, then css for layout is better

[1:11]  
the example you sent, is fancy fancy mcSexy sexy

willgottschalk [1:12 PM]  
yeah

fresheyeball [1:12 PM]  
you are going to work for all the shiny mcshinenstien

[1:12]  
I'm trying to help you get that work done in a more functional style

[1:12]  
and get that work done abit smarter

[1:12]  
its still a different use case than standard plain jane numbed my brain layout

willgottschalk [1:13 PM]  
so there should be a container that’s `position: relative`

fresheyeball [1:13 PM]  
yes

willgottschalk [1:13 PM]  
and I set all of the shows to be `position: absolute`

[1:13]  
and compute the layout in each model

fresheyeball [1:13 PM]  
thats what I would recommend

[1:13]  
oh no

[1:13]  
don't compute the layout in the model

[1:13]  
the model shoud be as small as possible

[1:13]  
and represent only that which must be stateful

willgottschalk [1:14 PM]  
like each show is offset by a certain amount

fresheyeball [1:14 PM]  
compute the layout in pure functions _based on_ the model

[1:14]  
yes!

[1:14]  
you got it!

[1:14]  
you are going to have a thing somewhere like

[1:14]  
`List.map showView model.shows`

[1:14]  
inside of `showView` you should call a seporate pure computation function

[1:15]  
or actually

willgottschalk [1:15 PM]  
it should be an indexedMap right?

fresheyeball [1:15 PM]  
`List.indexedMap showView model.shows`

[1:15]  
yes

[1:15]  
haha you beat me to it

willgottschalk [1:15 PM]  
so I can offset based on that

[1:15]  
gotcha

fresheyeball [1:15 PM]  
and now that your layout mechanism is pure and stateless

[1:15]  
you can write tests for it

[1:16]  
and animate it easily with normal Elm code

[1:16]  
use the pure stateless layout version as "targets" for the animation code

[1:16]  
animate form one target to the other

[1:16]  
and if you use Springs

[1:16]  
you will get a nice organic effect

willgottschalk [1:17 PM]  
but if I compute the layouts don’t I lose the reference to their position

[1:17]  
when I need it when the animation triggers

fresheyeball [1:17 PM]  
not at all

[1:17]  
its a pure function

[1:17]  
you can commute when and as needed

[1:18]  
just call the pure function with the inputs for the current layout position to get the position of the clicked element

[1:18]  
then call the "centered" layout position

[1:18]  
and you have the ingredients to make a nice tween cake

willgottschalk [1:18 PM]  
ohhh

[1:18]  
gotcha

fresheyeball [1:18 PM]  
:wink:

[1:19]  
Andd..... don't forget to show graditude for the free help you get

[1:19]  
by posting your work somwhere

[1:19]  
so we can all drooollll