Fork me on GitHub
#clojurescript
<
2019-09-23
>
roklenarcic14:09:38

This is more of a general JS question. I see that CSS can animate between 2 CSS styles. But how do people implement animations where the element moves to be under a different div altogether

dominicm17:09:44

There's a Google approach, FLIP

dominicm17:09:50

might be of interest to you

athomasoriginal21:09:55

> where the element moves to be under a different div altogether Can you explain a little more?

dazld21:09:15

think it’s doable but quite complex with pure CSS to have one element follow others - so, normally you’ll have an absolutely positioned element (so it’s out of the document flow) and some JS to animate transforms based on your conditions.

dazld21:09:27

https://www.rolls-roycemotorcars.com/en-GB/ownership.html for example - scroll down and watch the blue line

dazld21:09:05

it’s a common UI thing

dazld21:09:44

(guessing that’s what @U66G3SGP5 was thinking of?)

roklenarcic07:09:18

I was thinking something like, I have a stack of cards (which are inside a div), and I want them to move to div on the other side of the screen in an animated manner

dominicm07:09:27

FLIP is definitely what you're after 🙂

dominicm07:09:38

I recently used a good library for this, although I can't remember it's name right now. Began with p.

dominicm08:09:22

Well, it may not work so well for the DOM shifting technique. But FLIP is generally the strategy you want here 🙂

dazld21:09:05

I put together a simple template for shadow, sass and reagent, with some light tooling (via make) - https://github.com/dazld/shadow-cljs-sass

dazld21:09:43

it’s opinionated, but hopefully in a nice way.

dazld21:09:55

feedback welcome!