https://futureofcoding.org/ logo
Join Slack
Powered by
on a similar note, I'd like to have animations on ...
# thinking-together
k
on a similar note, I'd like to have animations on diagrams of ideas for a blog post I'm working on. what sorts of tools or libraries should I be using to make this easier? I'd like to add a button to send a message, and animate how it flows from the encoder to the decoder
t
Whats the animation? if its simple like a dot or a text label moving around you can achieve that with animated SVGs https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate
to make it triggered by a button you can add the animate element onClick
k
this is great! is there a good tool to do this? or do people mostly do this manually?
like am I going to have to go down the greensock or whatever with after effects pipeline or is there something else?
seems like a giant gap between svg animations and greensock / after effects
feels like I'm missing something obvious
t
I do it manually. I jsut did quick research an illistrator does not export SVG animations and the counter suggestion was https://www.svgator.com/ but I have not used it
does look like it has potential I will try it!
k
cool will check it out, thanks
t
this is why I do it manually
k
yeah the ui for this is kinda terrible too... hmm
g
wondering: has anyone tried to generate SVG animation by asking ChatGPT/Claude?
k
I tried but I got mostly bad interpretations of my original image
can share a screen shot hang on
currently trying two.js
and have something mostly not too terrible
here's another version with claude using threejs: https://claude.site/artifacts/db47ee10-d98f-4e6d-b3cc-aa553d963ad4
... and here's one: https://claude.site/artifacts/2f23f5e2-1400-4e24-b1d3-6ccf8701905c for the prompt:
Copy code
can you help me generate an animated svg using schramm's theory of media choice? Probability of Choice = Possible Rewards / Required Effort
g
FWIW: My knee-jerk reaction would be to work from the bottom up: feed your raw, manually-generated SVG to Claude and ask it to create a path on it from (x1,y1) to (x2,y2), then ask it to move a red dot along the path in NN seconds... I wouldn't ask it to generate the picture, only to modify the picture that you drew.
k
yeah, Unfortunately claude doesn't take svg uploads for some reason
you have to paste as text
I'll take that one I think
m
I use https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength and getTotalLength for paths other then bezier curves. And in a requestAnimationFrame handler a regular html element is positioned on the path using css transform. Something like this: https://potatodie.nl/diffuse-write-ups/move-a-dot-along-a-path/
t
More specifically I do it manually in observable but attach sliders to the artistic values so I can manually bring the diagram to the feel I want. Try playing with the sliders https://observablehq.com/d/2c4b1ae7e1ffbd94
k
The move a dot on a path blog post is super useful, thanks
a
you might also try https://schem.io/ I ran across it recently and haven't had a chance to do anything real with it, but seems like the right kind of tool for this
k
here's what I managed to get out of manim with a bit of finagling... I can just embed this and loop it, or render out to gif
communication-model.mp4
Open in Slack
PreviousNext
Powered by