How to make those animated product demo recordings like on threads.com?
http://threads.com
How to make those animated product demo recordings like on threads.com?
E.g. check this gorgeous demo on threads.com homepage. How is this done?
How to make those animated product demo recordings like on threads.com?
E.g. check this gorgeous demo on threads.com homepage. How is this done?
So if you inspect it as @Alex3917 said it's 3 different animated SVG with transitions. Now the question is how do you make that? There are a lot of ways to animate svgs, here are a few:
You can make it just by manipulating the DOM element with vanilla Javascript. i.e you use animate(). Here is a good intro: https://www.kirupa.com/html5/web_animations_animate_method.htm
Basically you make the SVG in sketch, target the DOM element inside it. SVG is just like a div - you can animate separate part of it by targeting via ref in React or document.getElementById
You use a svg animation library like snap.svg. here: http://snapsvg.io/docs/
What Threads probably used was Lottie, which is a library made by Airbnb to turn their animation into JSON. What you need for that is a SVG mockup that you will import into Adobe After Effect, then use Lottie to export it. https://airbnb.io/lottie/
Adobe After Effect is not the most user-friendly and it cost $$. What I would suggest for a basic animation is method 1 or 2. CSS and Javascript can make some pretty neat SVG animation by themselves.
Source: I make landing pages for startups as a side hustle and make demo SVG all day long
wow thanks so much for the detailed reply! That's clearly a whole new skillset to develop to make such beautiful animations.
How much work is it actually to create something like the Threads animation for someone who does it all day? I was sort of assuming that would have been like 3 or 4 months of work for someone given the complexity and high level of execution, but it's not what I do for a living.
Looking at the source, it's 3 different animated SVGs with one visible at a time. The SVGs seem to be comprised of some pure text elements and shapes defined with code, and some JPGs for things like profile images, and then all the elements are animated together.
I know there is software to make animated GIFs from videos, but it looks like this was made by hand since you can see the different components within the SVGs. Meaning it was probably expensive as fuck. I'm sure the shapes themselves were probably drawn in Sketch or some other SVG editing software, but that's still tens of thousands of dollars of developer time.