Animated Duotone on hover (from scratch using figma). Fireship video here and more notes below.
Sweet article on cubic bezier here
Animated stroke then fill effect here. Fireship 45 second video here.
DevEd animated stroke here
Glitch text effect with Kevin Powell here
Web icons without font awesome (a whopping 500kb of download bloat). Here
Use svg animation as loader here
Checkout three.js for the craziest site animation ever, like after effects
Okay so first off is you have to have opacity on The SVGs so you can have a little bit of overlapping to create a third darker color.
When you see a animation that you like in the wild you can pull up the dev tools hit control P and search for animation to bring up the animations tab. This records the animation and shows you the key frames to give you a sense of what’s going on. You can pause and then slow it down and when you click on an element it takes you to where it is in the Dom. You can see how SVG code is structured and can even copy and paste it if you want to mess with it in your own editor.
As it relates to this triangle animation looking at the code reveals that it’s actually four triangles and not two triangles two of them are just hidden off canvas to make the animation possible.
In figma a frame is essentially the view box in svg code. A tip when drawing in Figma is to draw on the smallest frame that will fit your graphic. This makes it easier to align things and make your graphics picture perfect. In this example the frame is 120 pixels wide by 100 pixels high. Draw three triangles using the polygon tool with a width and height of 54 pixels and a border radius of two. Give the middle triangle a slightly different color. Decrease the opacity to 60% for light one 80% for dark one and dark two.
Figma will automatically name your layers for you but if you’re going to animate you’re better off giving it its own custom name. This allows you to easily target it with CSS selector. In this case rename layers to dark one dark two and light one. Also rename the artboard triangles.
Another important tip for creating duotone icons is to group your elements together based on color. When you create a group it’s going to create a g element in the SVG code, which is kind of like a div in HTML. So group triangles based on color and rename the groups light Group and darkGoup. Position the light triangle to the left And the first dark triangle overlapping it. The second dark triangle will be placed off canvas but you’ll do that in the CSS So for now position it directly on top of the light triangle. Now select the triangles frame/artboard and export it as an SVG. When exporting click the menu and make sure that the include ID Attribute checkbox is checked. Also uncheck the “show in exports” box in the frame fill color.
Open up the SVG code in vscode. You’ll notice your view box is 0 0 120 100 which is in line with your frame.
You’re going to want to use this code directly in your markup which opens the door to animating using CSS. You can test this out by just pasting into The body element of a very simple HTML file.
You’ll notice that there’s a fill of #635BFF on the triangle. Inline styles like this are hard to override so delete it from the triangles and this will make them invisible.
Open up a style tag in a root element define CSS variables for both the –dark-color mentioned above and the –light-color of 80E9FF. For the SVG element you can add the cursor pointer property and then you can use rest the triangle colors with #darkGroup fill:var(–dark-color).
Now for the animation Target dark one dark to end light one selectors and set transition to all 1s ease
For the dark two set transform to translate x minus 100% to move entirely off the screen before the animation starts.
Now you can target the hover events for the SVG itself for each triangle.
SVG:hover #light1 to translateX(20%)
SVG:hover #dark1 to translateX(40%); opacity: 0;
SVG:hover #dark2 to translateX(0%); (This brings it back onto the screen)
This is great but you can also target events on the SVG using JavaScript. Change the styling of the button dynamically everytime it’s clicked.
Open up a script tag just before the closing body tag. I set a const of SVG equal to document.get element by ID triangles.
Then do a SVG.onclick = (e) => {con st colors equals an array of red blue green orange pink and purple. On the next line set a const rando equal to an arrow function with no parameter to colors[Math.floor(Math.random()* colors.length)]. And on the next line set document.document Element.style.cssText equals backticks and inside the back ticks you’ve got –dark-color: rando() where rando() is wrapped in template literal and you do the same for –light-color}
This changes the light and dark color variables to random colors. Since the all property is on the transition this color change will Also be animated.
So that sums up the triangle animation
Now for the looping animation which runs in the bg and doesn’t need the user to interact with it. Something like this will require keyframe animations.
In the demo there is an outline of a phone. Then some skeleton text pops in from the bottom. After that some icons drop in a staggered motion from the top.
In figma you’ve got a frame called phone and separate groups for the phone, the skeleton text, and the bolt icons. In the bolt group there are five bolts that are numbered based on the order in which they will appear. Export it and get it in the code like the previous example.
In some style tags target the #skeleton And just after that code @ keyframes fadeInUp from and to.
From should have its opacity to zero and transform translate why 20%.
Then define properties for two which is opacity one transform translate y zero
Then target the #bolt g {} then said it’s a capacity to zero and assign and animation property to dropIn 8s ease forwards infinite;
Defining the animation direction as forwards tells it to use the last value in the keyframe after the animation ends. So it applies the style from the last keyframe.
When you have an animation running on a loop you need to think carefully about your keyframes. You need to think about the animation in its entirety. So for the @ keyframes dropIn {} Set the key frame of 20% to opacity zero transform translateY -20%. Then set 30%, 100% to opacity one transform translate y zero.
At this point all the bolts should come in at the same time but how do you stagger it? The cleanest way is to define inline CSS variables directly in the SVG itself. So each bolt gets a style =”–order: 5″ So they can be accessed in the style sheet. Apply this to each bolt group.
Add to #bolt g {} an animation-delay set to: calc(var(–order)*200ms).
This will have the icons drop in 200 milliseconds after each other.
Now you have an animated SVG that will impress your friends get you a job and land your customers by standing out from the competition.