Good to fulfill you! I’m Michael, a visible designer primarily based in Stockholm. I grew up within the Midwest within the US and labored in promoting earlier than switching to interactive tasks. In my free time, I apply new abilities in AfterEffects and Blender to create prototypes.
This was certainly one of my latest animations once I tried out some gem supplies in Blender.
My Program Stack
I usually use these applications and plugins when creating prototype animations:
- Blender – For 3D movement and visuals
- Figma – For structure and UI
- AfterEffects – For the movement and stitching within the 3D animation
- AEUX – A useful plugin to transform Figma to an AE file
- Motion 4 from Mt. MoGraph – A ton of useful scripts to hurry up the animation course of
- Flow – A plugin to make enhancing easing curves quite a bit less complicated
Idea and Explorations
I started with the thought of utilizing gems as the primary visible. Since I knew I wished to play with gemstone materials, I began in Blender to create some property that I may use when taking part in round with layouts in Figma. One thing concerning the gems felt like little rewards for achievements and I favored the idea of incomes gems for finishing fundamental grownup duties.
Glass and gems are all the time a fancy shader node tree that I by no means can bear in mind how one can arrange so I used this tutorial from blenderbitesize to construct the bottom materials for the gems.
Right here’s the ultimate shader setup in case you’re curious. A lot of the glass tutorials I’ve adopted have this identical output ultimately the place the refractions are damaged out in Purple, Blue, and Inexperienced. Blender’s customary Glass BDSF works okay, however to get the chromatic aberration that’s seen in gems and prisms, an additional layer of nodes is required to interrupt up the sunshine.
The good half about this particular setup is you can search for the IOR and dispersion qualities for precise gems and use the true values to get an additional layer of actuality to the scene.
Animation Course of
I all the time use Blender and AfterEffects which could be difficult to sync collectively. When you’re utilizing Cinema4D, the method could be a bit less complicated since there’s some integration constructed into AfterEffects with Cinema4D, however Blender is free, so it’s all the time my go-to.
Every mission might need a barely completely different workflow relying on the animation. Particularly, scroll animations like this one are the toughest since you are attempting to sync easing curves between two applications. It may possibly get even trickier if the UI impacts the 3D by refracting the background or having the cursor work together with 3D (like in this Dribbble post). For this gemstone submit, I knew I wished some huge scroll actions that will take up a while, and passed over the background refraction to simplify.
1. Export Format from Figma to AfterEffects
Figma and Adobe applications don’t work the most effective collectively, however AEUX is a useful plugin to simplify the method a bit. The draw back is that it may be a bit glitchy and takes a good quantity of cleanup in each Figma earlier than exporting and in AfterEffects earlier than beginning. Whereas it’s not good, it saves fairly a little bit of time.
A number of methods I’ve realized by way of trial and error:
- Body any unused parts collectively – Having as few layers as potential to work with in AfterEffects makes the animations extra manageable to create.
- Kind is all the time messy – Not an awesome answer for this downside. The main virtually is all the time tousled and the kind is normally positioned about 5-10px greater than you need. Moreover simply manually adjusting, you’ll be able to have AEUX rasterize the kind layers in the event you’re not animating them by including just a little asterisk (*) in entrance of the layer identify.
- Background Colours on the web page don’t routinely come over – Both create a brand new form in AfterEffects for the background or create a rectangle in Figma because the background.
- Vector shapes are a bit unpredictable – The easiest way to keep away from bizarre vector shapes is to stipulate the Flatten Choice (Cmd + E) in Figma earlier than exporting. Some shapes you don’t wish to do that with (normally circles and rectangles) as a result of there are a whole lot of useful AfterEffects options with fundamental shapes, however complicated shapes must be flattened.
- Identify your layers in Figma – I normally do that… Except I’m feeling lazy. It all the time saves me time in a while in AfterEffects so I don’t must hunt for layers. It additionally is an efficient alternative to wash up the file.
2. Construct Animation in AfterEffects
That is vital to do first to get the timings down. The render time for Cycles in Blender is sort of lengthy and even longer when a Glass shader is concerned, so determining the timing of the entire animation first helps. When you can at the very least get the primary thought first in AfterEffects, it’ll save a headache in a while.
Utilizing a number of nice plugins may also help too. These are my two go-to ones:
- Movement 4 from Mt MoGraph – There are a whole lot of helpful options in right here for menial AE duties and much more that I ought to use, however all the time overlook.
- Anchor Level Changes – Rapidly change the place the anchor factors are on a form
- Textual content-Break – Break aside textual content into form layers both as letters, phrases, or traces
- Stagger – House out layers within the timeline to create stagger results (like I’ve on the “Behavior Hustle” title)
- Circulate – I take advantage of this plugin to animate easing values as a substitute of the graph editor. It makes the curves a lot simpler to visualise and edit than simply utilizing the graph editor to examine the curves after.
- Copy/Paste Easing Values – The nice half is you can choose any two tweens on the timeline and replica the easing worth to another keyframes. It helps a ton to maintain all of your easings feeling related.
- Translate Easing Values to Code – The numbers beneath the graph editor (e.g. 0.48, 0.05, 0.20, 1.00) are additionally good handy to a developer and can be utilized in most animation frameworks as properly.
3. Export Tough Animation from AfterEffects into Blender
I put the exported video from AfterEffects as a texture on a airplane in Blender with the identical ratio as my AfterEffects comp, then use this as a reference for timings within the animation. Ensure to click on Auto-Refresh on the picture texture node so it updates on each body and places within the right variety of frames Blender ought to play from the animation. Additionally, it’s vital to remain in Cycles to see the video.
This simply offers me a tough thought of how the animation will work. Usually, the animation I export is quite a bit rougher than this. All I must know is the timings of the scroll and once I ought to make any huge strikes in Blender.
4. Construct the Animation in Blender
The animation workflow in Blender is one thing I’m nonetheless making an attempt to enhance on. The most effective half about Blender is that just about any property could be animated – every thing from shader values to the place of parts. The worst half is that it’s troublesome to get a high-level overview of your animation and see all the items working collectively.
It’s fairly simple to get began although.
- Set the beginning body of the animation – Open up the animation tab and transfer the cursor on the timeline to the place the motion ought to start
- Choose which object to animate within the scene – That is the place issues get a bit difficult. To see what has been animated, the factor must be chosen to disclose it within the timeline.
- Set a keyframe for the item’s beginning worth – Virtually something could be animated which permits for thus many prospects. Hover over the property you wish to animate (i.e. place within the Object properties panel) and press I or the white dot subsequent to the property. The primary keyframe ought to be positioned on the timelineand the property you chose will change to yellow. Within the screenshot beneath, you’ll be able to see the yellow animated properties on the suitable. Inexperienced properties means the property is anmiated, however there isn’t a keyframe on the present body within the timeline.
- Transfer the timeline cursor to the ending body of the animation
- Alter the animated property – You are able to do this manually if it’s a price like a part of shader node tree or the simply transfer or rotate your object.
- Set a brand new keyframe for the brand new object property – Hover the property that was animated and both hit I or click on the diamond keyframe icon subsequent to the animated property. It’s actually vital to recollect to set the brand new keyframe, in any other case Blender received’t put it aside whenever you hit play on the animation or transfer to a brand new body within the timeline. One of many extra irritating components is shifting round a number of objects and forgetting to set a brand new keyframe then shedding all that work.
- Play the animation – When you’re watching the animation in Cycles, I’d counsel saving your work for positive earlier than previewing the animation. Blender can crash unexpectedly right here if it’s making an attempt to play an animation whereas rendering. To play or pause the animation, simply hit house bar.
Save usually! Blender crashes fairly a bit and all the time unexpectedly. It usually crashes once I’m previewing an animation or if I’m caching one thing with physics.
5. Render a Take a look at from Blender into AfterEffects
Earlier than making the ultimate render, I’ll do a fast render with the Workbench render engine in Blender to check the animations in AfterEffects to additional sync up the timings. This may be tedious to match the easing curves and it helps to attempt to do any huge, scroll actions in AfterEffects. I usually do step 3 and step 4 a number of instances to tweak the 2 animations to get them good.
The toughest half is the render time with glass animations. I averted doing any distorted textual content behind the gems on this one as a result of you’ll be able to cheat a bit extra in AE and don’t must get every thing good.
I additionally cheated a bit right here and broke the gem animations into two components: the primary scroll the place the gems scale right into a carousel and the press interplay the place the gemstone scales up and the remaining drop out.
6. Loop Animation and Finalize Particulars
After the check render is within the comp, I begin engaged on the ultimate bits of animation. That is the place I begin including all the ultimate particulars since all of the items are collectively now and it’s a lot simpler to tweak.
Usually, I attempt to construct the looping a part of the animation earlier than I render out the ultimate render from Cycles in Blender to avoid wasting time. About half the time, I noticed I wanted to alter some timings or the size of the Blender animation to make the loop seamless.
A trick I’ve discovered to make looping the animation simpler to get actual is to construct the loop in a dad or mum composition, add the web page wipes there, after which duplicate your web page animation layer and restart it on the identical level as your animation begins.
The loop is pointless for dev prototypes and consumer tasks, however it positive does look good for social media and case research. ✨
7. Render the Ultimate Animation in Blender with Cycles
Conserving my fingers crossed that the ultimate render will prove, I begin the ultimate render from Blender which might take hours, particularly with glass supplies. If I get fortunate, the primary render might be shut sufficient and I can do some AfterEffects methods to wash it up and if I’m not so fortunate, I’ll must render once more.
Ultimate Outcome
After which all achieved! Typically it could possibly take a number of renders or repeating a number of of the steps.
These prototypes are all the time enjoyable to do as a result of it’s uncommon that I get to make as polished an animation in consumer tasks and they’re an opportunity to apply new abilities. Typically they repay when a consumer likes a selected animation and I’m in a position to reuse the identical thought in a while. The most effective recommendation I’ve discovered for these aspect mission posts is to have enjoyable with them and hold them pleasing. Studying new abilities is a giant time dedication and I all the time attempt to follow issues that I discover fascinating and ditch the issues I discover boring.
Thanks for scrolling!
– Michael
