Bounce.JS: Create Complex CSS Animations Fast

Bounce.JS: A powerful tool for easily creating smooth CSS animations

Bounce.JS, created by Joel Besada, is a simple and easy-to-use tool that helps developers quickly generate smooth and elegant CSS animations. It is part of the emerging JavaScript library and generator wave, effectively simplifying the creation process of complex animations.

Image from ipythat

JavaScript—a simple scripting language originally designed to enhance the dynamic effects of web pages—has made great progress since its inception in 1995. Invented by Brendan Eich, co-founder of Mozilla, JavaScript has gradually replaced Adobe Flash in the past five years and has become the technology of choice for web animation, games and applications.

The rise of JavaScript has spawned a new batch of libraries and generators, allowing developers to access more complex animation features more easily. Bounce.JS is one of them.

Bounce.JS allows you to generate smooth, elegant CSS animations through a simple interface, preview, share and export. Its operation is very intuitive! If you like exquisite animation effects, try Bounce.JS.

Next, we will explore the functionality and animation workflow of Bounce.JS and create a custom animation. I believe you will find it very interesting!

Interface

Bounce.JS's interface is concise and clear, making the animation creation process very simple.

To the left is the component list where you can add various effects to the animation chain and make adjustments. It also provides a range of animation presets that you can view and modify, saving time on adding components. The “Road Runner” animation preset is very interesting, and the author’s handling of the details is amazing. Many presets are available as templates to facilitate mixing custom animations and save time.

The center of the screen is the animation preview area, and a square acts as a placeholder to display all the actions of the animation.

There are three buttons below the preview screen: play animation, loop animation and slow motion.

Slow motion function is especially helpful for detailed analysis of animation motion trajectory.

Each animation you create has a unique URL, click "GET SHORT URL" to get a short link.

Disclaimer: Like most code generators, well-written code is often far superior to automatically generated code. However, writing code manually can be more time-consuming and labor-intensive. If you don't plan to manually adjust the code afterwards, it is recommended not to over-rely rely on Bounce.JS. Bounce.JS uses matrix transformations heavily, which is not the best way to all animation scenes.

I experienced this personally while making this animation. However, your animation may not be as complicated as this one, which is a good thing. Remember: the longer the animation timeline, the more code you generate, so don't overuse it.

This is the basics. The whole process is not technically complicated – the rest depends on your imagination.

Hand-Original Production

Let's create a custom animation. In the example below, I will show how to create a parachute animation—the type of exaggerated animation that is usually seen in cartoons—look from top to bottom.

In Bounce.JS, the animation is broken into "components". You can think of components as different parts of a dance move. Remember, we only design the behavior of the animation, not the object it animates, nor the background/stage. Of course, once our action is done, it is trivial to apply it to any object in any setting.

Animation Component 1

Q: What will the skydiver do after he skydiving?

A: Of course, they will open the parachute. So let's convert it into animation.

The best way to simulate the opening of a parachute is to use the Scale component. Referring to the original size of the square in the preview, I used the original size of 0.2 here, and the final size is 4. Basically, it gets 20 times larger at the end of the animation.

Since the width and length of the parachute (height seen from above) are the same, we keep the aspect ratios of the two dimensions the same. We select the Bounce attribute for Easing because it best suits our needs. In duration, we specify the time range that the animation should cover. Since the parachute is opened very quickly, I set it here for 2000 milliseconds.

No matter the order of the animated components, all components are activated immediately at the start of the animation, so if you want the component to start later, you need to specify the delay in the Delay field.

Tip: If you create complex animations, it is best to keep the components in the same order as they are activated so that it won't be easily confused.

The

Bounces field specifies the number of times an element bounces during the animation. In this case, I typed 16, which is a relatively high number, but it makes sense for parachute animation.

The same is true for the

Stiffnessvalue. Let's set a minimum value for this.

Animation Component 2

Next, we will simulate the movement of the parachute, just as the wind changes its path in a subtle and random way. To do this, we will use the Translate component. I've added a subtle move here (25 units to the right and 15 units to the bottom) which should be enough. I recommend using Bouncing as Easing again because of the smoothness of the animation.

Since this component will play throughout the animation, I let it play for 20000ms, which should cover its entire length. The parachute will move from the beginning of the timeline, so we don't need delay here. Since the parachute sports will be more affected by the wind, but harder than the first component, I gave it 22 Bounces and 3 Stiffness.

Animation Component 3

Finally, we will add the last component of the animation.

If you observe the skydiver from above, he will obviously appear smaller and smaller due to the passage of time and the increase in distance.

So his initial size will be 1, and the size at the end of the animation is actually 0. Let's insert these values ​​for width and height.

The duration of the animation should be quite long here, obviously. 25,000 milliseconds are enough.

Since this animation component will play at the same time as other components (i.e. no delay), we do not need to add any bounce or stiffness effects as it inherits from the previous component. So, like the screenshots here, leave them to 0.

Of course, you can adjust and mix your results at will, which is just a rough guide, but the results are obviously in your hands.

However, you should have similar results afterwards.

Once you are satisfied with the results, you can export the animation as CSS and use it in your project.

You can also find the repository of Bounce.JS on GitHub.

What do you think?

With the advent of many innovative new approaches to design and animation websites, generators like Bounce.JS are very convenient, especially in saving you valuable time to manually write such animation code.

Try it and post your experiment in the comments section. We would love to know your results!

Frequently Asked Questions about Bounce.js

How to install Bounce.js in my project?

To install Bounce.js, you can use npm or Bower. If you use npm, you can use the command npm install bounce.js to install it. For Bower, use the command bower install bounce.js. Once installed, you can include it in an HTML file using script tags.

Can I use Bounce.js with other JavaScript libraries?

Yes, Bounce.js is compatible with other JavaScript libraries. It does not interfere with the functionality of other libraries. You can use it with libraries like jQuery, React, Angular, and Vue.js.

How to create animations using Bounce.js?

Creating an animation with Bounce.js involves creating a new Bounce object and adding components to it. You can add components such as zoom, rotate, pan and tilt. After adding components, you can use the applyTo method to apply animation to elements.

Can I control the duration and delay of the animation in Bounce.js?

Yes, Bounce.js allows you to control the duration and delay of your animation. You can set duration and delay using the duration and delay methods respectively. Values ​​are in milliseconds.

How to link animation in Bounce.js?

You can use the chain method to link animation in Bounce.js. This method allows you to execute animations sequentially. You can pass an array of Bounce objects to the chain method to link them together.

Can I use Bounce.js for responsive design?

Yes, Bounce.js can be used for responsive design. Animations created with Bounce.js are scalable and adapt to different screen sizes. You can also use media queries to control how animations behave on different devices.

How to stop animation in Bounce.js?

You can use the stop method to stop the animation in Bounce.js. This method stops the animation and resets the element to its initial state.

Can I use Bounce.js for complex animations?

Yes, Bounce.js is able to create complex animations. You can combine multiple components and link animations to create complex effects. However, this requires a good understanding of libraries and CSS animations.

Is Bounce.js compatible with all browsers?

Bounce.js is compatible with most modern browsers. However, some features may not work in older browsers. It is best to test your animations in different browsers to ensure compatibility.

Can I use Bounce.js for commercial projects?

Yes, Bounce.js is open source and is available for free for personal and commercial projects. You can use it to create animations for your website, apps, games, and other projects.

The above is the detailed content of Bounce.JS: Create Complex CSS Animations Fast. For more information, please follow other related articles on the PHP Chinese website!