This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2022-03-15
Channels
- # announcements (10)
- # asami (5)
- # babashka (49)
- # babashka-sci-dev (8)
- # beginners (25)
- # calva (98)
- # cider (2)
- # clj-kondo (22)
- # clojure (32)
- # clojure-dev (12)
- # clojure-europe (32)
- # clojure-nl (3)
- # clojure-spec (3)
- # clojure-uk (10)
- # clojurescript (12)
- # community-development (1)
- # conjure (71)
- # cursive (7)
- # datalog (6)
- # events (2)
- # figwheel-main (2)
- # fulcro (4)
- # jobs (2)
- # kaocha (3)
- # lsp (43)
- # membrane (12)
- # missionary (9)
- # off-topic (61)
- # pathom (7)
- # polylith (2)
- # reagent (38)
- # remote-jobs (4)
- # shadow-cljs (17)
- # specter (1)
- # tools-deps (38)
- # vim (51)
- # web-security (5)
Hmmm I wast trying to do a CSS transition
on an SVG attribute, but apparently you can't do that because it can only style a select few presentation attributes. So that puts me in JS animation domain it seems. It's quite low priority, but was just wondering if there are nice libraries that work with Reagent to do transitions like this.
I'd start looking at React libraries for that because React can definitely introduce its own peculiarities in the whole process. And React<->Reagent interop is not that bad.
Yea it tends to be 1. Cljs things 2. React things 3. ... 4. ... 5. JS things in terms of easy integration. Found some examples of people hacking D3.js into componentdidupdate or whatever but that's a big can of worms just to make some transitions feel nicer
directly embedded
Nope that's the whole problem, I want to transition the x/y position
The first thing I tried is just put a CSS transition on it but that's not supported.
I don't think so
Strange. https://stackoverflow.com/questions/35201001/how-to-transition-transform-in-svg suggests that it should be possible to use transition
. But I haven't tried it myself.
I'll give it a go...
Nope...
transition: all 1s;
in the CSS, and in the inspector I can see it's applied and the HTML changes
<svg transform="translate(-150, 100)" class="staging">...</svg>
but it's just jumping around.
> some typos in your script (no units, `attr()` instead of css()
), use this
I think that's the key, you have to modify the CSS rather than the HTML attributes. Not sure if you can do that in a neat way in Reagent/React{:style {:transform (str "translate(" vx "px " vy "px)")}}
doesn't do anything at all
oh! ,
and it's working?!?!
It's sooooo finicky! I tried to wrap another :transform
in :style
and in that case it shows up as an actual style=
attribute in the HTML and doesn't work.
If you apply some :style
and it doesn't make its way into the Inspector, it's 95% chance that you did something wrong.
yea no actually managed to make that work too. Was not applying the transition to the other element yet :face_palm:
So now... am I going to replace all x/y with translate :thinking_face: :face_palm:
hey it actually seems to work. It's silly, but it works.
oh no!! It works in Firefox but not in Chrome
Chrome just doesn't apply the transform on a nested SVG element.
And if you apply the transform to a g
inside the SVG then the rotation axis becomes the origin and it completely flips out if you then rotate the element
> Chrome just doesn't apply the transform on a nested SVG element. So the transform is there in the Chrome's inspector, but it's not applied?
exactly
Like, it's an obvious browser bug
yea it is, but... apparently so unconventional that both Firefox and Chrome have weird issues around them.
Potentially it may be not about that but rather about the closest parent that has position: relative
or something like that.
It's 50/50 here - either you did something wrong or there's a genuine bug in some or all of the browsers. I've seen enough of the latter to never brush it off.
Yea svg defines "viewports" which is basically the nearest svg element
But there are buggy edgecases where you apply styles on the svg tag itself.
lmao I got rid of the nested SVGs but now the transition is completely insane https://twitter.com/pepijndevos/status/1503765068881747973
:D At least it looks funny. If you can create an MRE in pure JS, I'd try asking on SO instead - this seems to be a highly specific thing that also has nothing to do with CLJS or even React, so SO would be a better place.
I'm basically hitting this I think: https://stackoverflow.com/questions/26480363/strange-animation-with-transition-on-transform-matrix
It interpolates the matrix values, so since the translation is now folded into the transform, it interpolates these quite significant offsets in different matrix indixes
I think I either have to work with separate rotation/translation/scaling from the start, or decompose the matrix into these operations. It seems like CSS has specific animation behavior for those functions.
lmao I got rid of the nested SVGs but now the transition is completely insane https://twitter.com/pepijndevos/status/1503765068881747973