3 Ways To Add Custom Animations

Table of Content

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!

‍

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:

‍

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

‍

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:

Select your animation
‍
Select desired frameworks. In this example, React and CSS are the target frameworks
‍
Click on CONVERT TO CODE button

‍

‍

This 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!

‍

Author

‍

Siddhant Jain

Software Developer at Dualite

‍

FAQ's

What are the prerequisites for creating animations using HTML, CSS, and JavaScript?

You should have a basic understanding of HTML, CSS, and JavaScript. Familiarity with CSS keyframes and JavaScript event handling will be beneficial.

What is Three.js, and why should I use it for 3D animations?

Three.js is a popular JavaScript library that simplifies the process of creating and rendering 3D graphics in a web browser. It is ideal for creating complex 3D animations, interactive 3D applications, and games.

Do I need to install Three.js to use it in my project?

No, you can include Three.js via a CDN link directly in your HTML file. However, for larger projects, it's recommended to use a package manager like npm to manage dependencies.

Can I create animations using both CSS and JavaScript together?

Yes, combining CSS animations and JavaScript allows you to create more dynamic and interactive animations. For example, you can use JavaScript to start, stop, or change animations based on user interactions.

What browsers support Three.js, and are there any compatibility issues?

Three.js works well with modern browsers like Chrome, Firefox, Safari, and Edge. Some older browsers may not fully support WebGL, which Three.js relies on, so always check compatibility.