animation Archives

Figma

Using Videos and Blend Modes in Figma to Create More Interesting Screen Transitions

Figma only supports a simple dissolve animation. I wanted my transition to have more personality, so my solution used video and blend mode.

Extracurricular Activities

Takeaways from Making a Music Video with Geometry Nodes

Here, learn the most important steps if you'd like to make a music video using Blender Geometry Nodes.

Figma

How to Animate On Scroll in Figma: Part 2

Learn to create a parallax effect on scroll using Figma components and smart animations in this design tutorial.

Development

Help – My Webflow Animation Isn’t Working Properly!

I recently used Webflow to fine-tune the iconic Atomic team periodic table, but we struggled with the Webflow animation we were trying to achieve.

React / Redux

Create Dead-Simple Canvas Animations in React

Here, we'll cover two distinct ways to perform canvas animations in React. I believe there's room for both techniques when animating a canvas in React.

JavaScript

Create Sick Web Animations in Three.js with GSAP

Have you ever wondered how to create smooth animations for your threeJS web app? Luckily, we have a very handy tool called GSAP.

UX/Design Techniques

How to Animate On Scroll in Figma: Part 1

I hope Figma adds the ability to animate on scroll. Learn how to create an animated sticky header scroll effect in this Figma tutorial.

React / Redux

Animate App Components with React Transition Group

Animating app components can improve the user experience, but achieving this in React can be cumbersome. That’s where react-transition-group comes in.

UX/Design Tools

A Simple Way To Quickly Animate SVGs with Vivus.js

Vivus is a great tool that can quickly combine illustrations and animation. It will take your SVG and animate in the strokes as if someone were drawing it.

Swift

iOS SpriteKit Physics Tutorial in Swift

In this post I'll cover some major features of SpriteKit's sprite rendering and physics engine by implementing a small iOS game.

UX/Design Techniques

Turning a Sequence of PNGs into a Basic Animation with Flash

How we created fluid, natural-looking animations in Flash using a series of PNGs.

Software Science

Visualizing Garbage Collection Algorithms

Developers take garbage collection for granted, but it's hard to see how it works. Watch 5 different GC algorithm visualizations.