Looking for New Animation Ideas!
I recently created an animation, which you can check out here :
https://github.com/Ibrahim-AbuFarha/animation-test/blob/main/README.md
If you have any interesting idea that you think would make a great animation, please share them.
GitHub
animation-test/README.md at main · Ibrahim-AbuFarha/animation-test
Contribute to Ibrahim-AbuFarha/animation-test development by creating an account on GitHub.
5 Replies
I was helping someone write this for this site today.
It takes a SVG image, parses it, extracts the components, & causes them to appear one at a time using
<animate> tags with a begin value of [previous element id].end.
SMIL animations using <animate> tags actually has a reasonably complex events and interaction model.Is this so complicated? I have six more blocks like this one, and I want to create different types of animations
As you can see, I created layers, gave them absolute positions, and controlled each one individually
This is really neat! And I only had initially heard of SMIL a few months ago even when I was deep into trying to learn SVGs. The behaviour you mentioned of being able to start one element when the previous element ends is so powerful and cool. Gonna try to find the video I watched for OP
Aha! This shows a very basic and introductory version of how it works https://youtu.be/OjPrduUvX_I?si=4xykAEDMLiTN2KHh
Roberto Matthews
YouTube
Creating Complex SVG Animations Using SMIL | SVG Animation Tutorial
Join Roberto Matthews in this tutorial to learn how to create intricate SVG animations using SMIL (Synchronized Multimedia Integration Language). Discover how to design and animate SVG elements to build captivating animations. We'll cover setting up SVG objects, positioning elements, using SMIL for smooth animations, and even adding dynamic text...
Do you know if they made this avg by hand or if there is a tool that allows you to “mosaic” an existing shape?