All posts in HTML, CSS & SVG
With CSS and JS progress, implementing animations on websites has never been easier. But how do we make sure that our CSS animations and transitions will be meaningful to our users? That they will not be just some annoying “in-your-face” eye candy? That they will not trigger motion sickness and cause accessibility issues to some?
You will find here a transcript with CSS codepen and video examples and LOT of resources to dig further in specific topics. I also published the PDF version of the slides at the end of the article.
Stéphanie reworked her Portfolio and blog in 2018. I (Geoffrey) personally worked on the coding part, but also on the animation and micro-interaction part. And that’s what I want to write about today. Animation can be considered as part of a visual identity. Let’s go through the different little animations and their specificities. I want to share with you some tips, things I learnt before and practiced while creating those interactions, to inspire you.
TLDRN: if you need to export an SVG pattern with Illustrator (CC 2015) and want it to work in Internet Explorer and Edge, use File > Export (and not the File > Save as). Also don’t copy/paste your SVG from AI directly into your code editor.
This content is 6 years old. Remember that the following content might be outdated.In her beautiful article “Structuring, Grouping, and Referencing in SVG – The <g>, <use>, <defs> and <symbol> Elements” Sara Soueidan wrote about the SVG <symbol> element. To put it short (but you really SHOULD read the article) you can use <symbol> to group elements together and be able to re-use them later in your SVG. It looked like it works exactly like Illustrator symbols work so I …