125 points by interactionwiz 5 months ago flag hide 20 comments
john_doe 5 months ago next
Great article! I've been looking for ways to improve microinteractions on my site. Will SVGs and JS help with performance?
anonymous_admin 5 months ago next
Yes, SVGs can be more performant than traditional image formats for small images like icons. Plus, you have more control with animations since they're defined in code. @john_doe
code_queen 5 months ago prev next
SVGs andJs can certainly help. Some major players, like Google, use this tech stack for smooth interactions. Don't forget about accessibility, though! @john_doe
happy_hacker 5 months ago prev next
What libraries or tools do you suggest to simplify coding SVG animations with JS? How do you make the animations feel natural, not robotic?
ux_genius 5 months ago next
Take a look at GSAP (GreenSock Animation Platform) for solid cross-browser compatability and great performance with SVG animations. Check out examples to learn how to create natural movements. @happy_hacker
animator_pro 5 months ago prev next
You can also create smooth SVG animations with Lottie by Airbnb, which uses After Effects for animation design. It takes care of the transformation math. Check out animista.net for inspiration and cool examples. @happy_hacker
js_guru 5 months ago prev next
SVG and JS are awesome for small, subtle animations. What about performance for larger, more complex animations? I image that's an issue, right?
smooth_ops 5 months ago next
There are ways to optimize and make large, complex SVGs work well. Canvas can be used as an alternative, but keep in mind that it has different benefits and drawbacks. Check out this article for techniques to make complex SVGs run smoothly: https://www.smashingmagazine.com/2016/11/smooth-as-butter-animating-svg-with-javascript/. @js_guru
security_master 5 months ago prev next
Just curious about vulnerabilities that could arise from integrating SVGs and JS. I want to make sure my site's secure.
safety_sam 5 months ago next
You're right to be concerned. There are security risks involved with using SVGs, mainly with XSS (Cross-Site Scripting) attacks. When manipulating SVGs with JS, sanitize any user input to ensure you're not opening up vulnerabilities. Check out OWASP's guide: <https://cheatsheetseries.owasp.org/cheatsheets/XML_External_Entity_Prevention_Cheat_Sheet.html>. @security_master
data_ninja 5 months ago prev next
I see SVGs and JS as a great way to create interactive data visualizations. Has anyone tried using ML for complex, large dataset interaction optimization with microinteractions?
ml_master 5 months ago next
Yes, ML techniques can optimize complex data visualizations and microinteractions. For instance, you can create a clustering algorithm to determine areas and data to highlight, maximizing the user's attention. I highly recommend taking a look at this project: <https://distill.pub/2018/microinteractions/>. It has some amazing examples. @data_ninja
tools_collector 5 months ago prev next
Anyone know of open-source tools or boilerplates that can help with SVG and JS microinteractions quickly?
crate_creator 5 months ago next
You should check out SVGator. It's an online SVG animation editor that automatically generates the JS code you can embed directly in your site. It doesn't have a component library, but it does quickly generate the JS and SVG needed for custom animations. There's a free and paid version: <https://www.svgator.com/>. @tools_collector
reach_ranger 5 months ago prev next
Can this tech stack be used to make responsive and adaptive microinteractions for different screen sizes and tablet and mobile, or is that not its forte?
responsive_ric 5 months ago next
SVGs are vector-based, so they scale well. Combining that with JS makes it easier to implement media queries to adjust your animations and placement for various screen sizes. SVG and JS can certainly be used for responsive and adaptive design. @reach_ranger
code_worm 5 months ago prev next
What are your favorite resources (blogs, articles, books, sites, etc.) to learn more about SVG and JS microinteractions?
knowledge_knights 5 months ago next
For SVG resources, Lea Verou's site has some great content, like her posts about SVG filter effects. Sara Soueidan's site is another excellent resource for anything related to SVGs. Additionally, I'd recommend the book 'SVG Animations' by Amelia Bellamy-Royds. For JS microinteractions, I suggest checking out Google's Material Design site and Petr Tichy's blog, particularly for using these techniques in React. @code_worm
anim_addict 5 months ago prev next
Any examples of awesome websites using these techniques? I love checking out amazing sites for inspiration.
site_spotter 5 months ago next
I highly recommend checking out <https://hellopablo.com>. It is an amazing example of using SVGs and JS for animations and interactions. Another great site is <https://www.refinery29.com>. It implements SVGs and JS for smaller, subtle animations that add to the user experience. @anim_addict