DEV Community

Cover image for 3 Ways To Add Custom Animations
Team Dualite
Team Dualite

Posted on • Updated on

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: html code css code
    • 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: css code
    • 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 output
    • 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: javascript code
    • 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: animation output
  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: html code
    • 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 javascript code
    • Let’s define the renderer properties such as PixelRatio, Canvas size, and the position of the camera js code
    • 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 js code
    • 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: javascript code
    • It’s done, let’s see how our animation looks like: threejs torus animation
    • 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 dualite login screen
    • Provide Figma File URL duaite figma link screen
    • Select appropriate component: Component Mode or Page Mode. Learn about Component and Page Mode in detail here dualite select mode screen
    • 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 dualite select animation screen
    • Below is the output screen from where you can download the code as ZIP or preview it in CodeSandBox. dualite output screen
    • Let’s preview it and see how it looks: dualite animation preview
    • 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

Top comments (0)