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
     
   
   
   • 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
     
     
   
   
   • 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 . Three.js is incredibly powerful to create custom 3D animations. This example is taken from
     
     
   
   
   • 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. Happy coding!