Where do I start with this UI?!
Basically this:
https://twitter.com/dvsj_in/status/1733032980728455194?t=cYiZvMSYJRqI6yBYOf6Q7A&s=19
Any feedback, pointers to tools, methods (use 2 gifs/use svg/etc) or any similar implementations you've seen welcome!
8 Replies
Svg animation on hover ?
think you could do it with a sprite of 4 images.
on hover you'll have 2 animations
first animation (forwards) goes from image 1 to image 2
second animation (with delay and infinite repeat) changes between image 3 and 4
ohw, now i see in the replies of that twitter post a more difficult one.
yea, this requires a little bit more. SVG and a lot of Maths in JS
Ahh, okay! Will check the svg route out
Thank you @hart❤🔥 and @MarkBoots!
https://www.wickeditor.com/#/
I'm looking at this to make the SVG animation. Do you have any other suggestions?
You could try to use a video that auto plays on hover but youd have to reset it if the users mouse leaves before the video finishes ? But it could be blurry and pixelated , that’s why svgs are ideal. It wouldn’t be too many paths to manipulate and even easier with sprites
as you can see in the twitter post replys, there is a second task to change colors and speeds. so videos/gifs/spites will not be sufficient
you could look at https://lottiefiles.com/animation/svg
LottieFiles
Svg animations - Explore and Download Top Lottie Animations - Lotti...
Level up your designs with stunning Svg animations on LottieFiles. Download as Lottie JSON, Optimized Lottie JSON, dotLottie, Optimized dotLottie, MP4 or GIF.
Ah that wasn’t there when I initially looked
At this point I think it's better I skip that part altogether 😂
Thanks for the lottiefiles, will take a look