3 Ways To Add Custom Animations

Animations can breathe life into your web projects, adding a dynamic flair that captivates users. Whether you want to create subtle UI effects or complex 3d animations, understanding how to craft custom animations is a crucial skill. In this blog, we’ll explore popular ways to create custom animations

Let’s dive in!

1. Custom Animations with HTML/CSS and Javascript
   • Setting up the basic structure: Start by creating the HTML structure, link your CSS and Javascript file. We’ll animate a simple box that moves across the screen and changes color. See the code below:
   • Adding CSS Keyframes : Let’s define a basic keyframe animation in CSS that moves the box horizontally and changes it color, see the code below:
   • Animation Property: Animation property is added in .box with a name moveAndColor to define their keyframes
   • @keyframes : Keyframes are added for moveAndColor in 3 stage 0%, 50% and 100% respectively where box moves and changes its background color To learn more about Animations and Keyframes, check here
   • Let’s see the animation:
   • Animation is working as intended, but as you can see the animation is triggering automatically. Let’s add Javascript to implement interactivity to this animation. The idea is to stop and start the animation when the box is clicked. See the code below:
   • A click event listener is added on .box which basically triggers the inner logic whenever the user clicks on .box , to learn more about event listeners in Javascript, check here
   • Let’s see how it works:

2. Adding 3d animations using Three.js
    

   Three.js is used to add 3D elements and animations into your project. You can use Three.js in Javascript and libraries like React, the steps are pretty much the same. For ease of this blog we will implement this in HTML/CSS and Javascript

   • Include Three.js library : We will add the CDN script to our HTML to include Three.js into the project. If you are building it with React.js then install the library using your preferred package manager such as npm or yarn. Read more about installation here. See the HTML below:
   • Now, let’s start with the Javascript code to set up Three.js. To actually be able to display anything with Three.js, we need three things: scene, camera and renderer, so that we can render the scene with camera. Detailed explanation here
   • Let’s define the renderer properties such as PixelRatio, Canvas size, and the position of the camera
   • Next step is to define an object. To define an object in Three.js, we have to use Geometries from Three.js such as BoxGeometry, TorusGeometry and many more. In this we will use TorusGeometry and then add the geometry to the scene. Learn about various geometries here
   • Now, it’s time to animate the TorusGeometry. We will rotate the Torus on three axis : x,y and z respectively inside animate function, calling it later. See below:
   • It’s done, let’s see how our animation looks like:
   • You can create amazing and unrealistic animations with Three.js, see examples here. Three.js is incredibly powerful to create custom 3D animations. This example is taken from Fireship Youtube Channel

3. Using Dualite: Figma to Code Tool
   Dualits is Figma to Code extension which converts any design into efficient code including animations. Lets see how to use Dualite and convert animations into code

   • Launch Dualite and Login with Figma account
   • Provide Figma File URL
   • Select appropriate component: Component Mode or Page Mode. Learn about Component and Page Mode in detail here
   • Now, when you are at the home screen of Dualite:
     1. Select your animation
     2. Select desired frameworks. In this example, React and CSS are the target frameworks
     3. Click on CONVERT TO CODE button
   • Below is the output screen from where you can download the code as ZIP or preview it in CodeSandBox.
   • Let’s preview it and see how it looks:
   • Looking exactly how our design was. Now, you can use this animation code in your project  

Conclusion

Creating custom animations, whether in 2D with HTML, CSS, and JavaScript, in 3D with Three.js or using Dualite to generate code automatically, can be a rewarding experience. The key is understanding the basics and then experimenting with more complex ideas. As a developer, these skills will allow you to craft visually appealing and interactive experiences that engage users.
Try out all the methods and see what works best for your project.
 

To learn more about Dualite, visit our official website here