Create Webflow Animations: Comparison Between CSS and JavaScript

‍Summary of the key points from the article.

• 3 options for creating animations on Webflow: JavaScript, CSS, and GSAP
• If you want to animate your site while maintaining excellent loading performance: CSS and GSAP animations are the preferred options
• Most commonly used JavaScript animations can be replaced by CSS animations

🎁 Webflow Tips: use the Webflow interface to write quickly and error-free CSS code for you. Then copy/paste it using the CSS preview feature.

_________________________

Introduction

Webflow is a recognized "no-code" tool known for its ability to create "wow-effect" websites. This global recognition is partly due to its animations and the frequent presence of sites developed on Webflow at the Awwwards.

Within the platform, there are three main methods for creating animations:

• JavaScript, using the interaction panel,
• CSS, using various states in the style panel or adding custom code,
• GSAP, a topic we previously covered in this earlier article.

However, while we often discuss Webflow and its performance, we rarely talk about the impact of animations on a website's performance.

So → What are the best practices for balancing animations and performance on your website?

In this article, we will compare two methods of creating animations - JavaScript and CSS - to help you make the best choice.

CSS Animation vs JavaScript: the comparison

Performance, possibilities, challenges.. 

What is a CSS animation?

A CSS animation is a transition between two states of an HTML element, controlled by a CSS class. It is typically used for simple and lightweight animations, such as color changes or hover effects.

To fully understand how to target and animate your CSS properties, I recommend consulting the CSS selector reference documentation → CSS Selector Reference.

What is a JavaScript animation?

On the other hand, a JavaScript animation is a more complex animation that can be controlled by JavaScript code. It is generally used for more detailed animations that require greater control and flexibility.

Benefits of using CSS animations:

1. Lightweight and Fast: CSS animations are generally lighter and faster than JavaScript animations. This means they use fewer resources and can reduce page loading time, thereby improving your website's performance and user experience.
2. Ease of creation and management: CSS animations are often easier to create and manage than JavaScript animations. This can make the development process more efficient and less prone to errors.
3. Compatibility with Webflow: If you are using a tool like Webflow, CSS animations can be even easier to create. Webflow offers a WYSIWYG visual interface that allows for the rapid writing of HTML and CSS code. This can make the animation creation process even quicker and more intuitive.

In summary, using CSS animations provides numerous benefits in terms of performance, efficiency, and ease of use.

Creating CSS or JavaScript animations with Webflow

Webflow makes creating CSS and JavaScript animations incredibly easy. Directly from the Designer interface, you can use either the interaction panel to create JavaScript animations or the style panel to create CSS animations.

CSS - Here’s how to create a CSS animation on Webflow, step by step:

1. Select a CSS class: Start by choosing the CSS class you want to animate.
2. Define a style with the state 'None': Configure the initial design of your element using the state 'None'. This is the appearance your element will have before the animation triggers.
3. Define a second behavior/design in another state: Choose another state, such as 'hover', and define a different design for that state. This is the appearance your element will have when the animation is triggered (e.g., when the user hovers over the element).
4. Add a transition: If you want your animation to be smoother, add a transition. This will allow your element to gradually move from its initial state to its animated state, rather than changing instantly.

JavaScript - Here’s how to create a JavaScript animation on Webflow, step by step:

1. Select an element, section, or CSS class: Start by choosing the element, section, or CSS class you want to animate. JavaScript animations can be applied to a wide variety of elements.
2. Choose a trigger: Triggers are events that initiate the animation. Webflow offers a variety of triggers, including mouse interactions, scrolling, page loading, and more.
3. Define the animations: Once you have chosen a trigger, you can start defining your animations. You can choose from a variety of animations, including movements, rotations, opacities, and more. You can also define the animation duration, delays, and other parameters.
4. Add animation steps: For more complex animations, you can add multiple animation steps. Each step can have its own animations and parameters.
5. Test your animation: Once you have defined your animation, make sure to test it to ensure it works as intended. You can adjust the animation parameters and triggers as needed.

‍So... Js or CSS for Webflow animations?

In general, even though it sometimes requires writing and injecting custom code into your Webflow project, I highly recommend prioritizing CSS animations. Just do it wisely 🤓.

Use the visual interface of Webflow as a tool to facilitate and expedite the implementation of CSS animations. Here are some tips to follow 👇

Pro tips: use Webflow as a coding assistant with CSS Preview

One of the great advantages of Webflow is its ability to generate CSS code for you. This can save you a lot of time and help you avoid errors.

For example, consider an arrow that should move when the user hovers over it (the "hover" event). With Webflow, you can use the style panel to set the initial state and final state of the arrow, and then use CSS Preview to retrieve the generated CSS code.

Here’s how to do it:

1. Define the final state of the arrow: In the style panel, assign the arrow its class and set its state when it’s hovered over. This is where you define how the arrow should move.
2. Use CSS Preview to retrieve the code: Once you have defined the initial and final states of the arrow, you can use CSS Preview to see the CSS code that Webflow has generated for that state. Copy this code.
3. Integrate the code into Custom CSS: Next, go to Custom CSS and paste the code you copied. By adding this destination state with the hover effect to a parent element, such as the button containing the arrow, you allow the animation to unfold exactly as you defined it.

Example of creating and injecting CSS animations - Webflow embed code - by Harshit from Finsweet

By using this method, you can quickly and effectively create CSS animations (or replace JavaScript animations) on your Webflow site, maintaining optimal performance for your site.

Conclusion

Webflow offers many options for creating animations, whether in JavaScript, CSS, or even GSAP. Some can be done in "no-code", while others require some familiarity with coding.

It is important to note that using CSS or GSAP for your animations can enhance script lightweight and therefore the loading performance of your website. As is often the case, approaches that seem more complex at first glance can lead to superior results.

The key advantage to remember is that you can use CSS Preview to quickly and accurately create and write the code for a CSS animation with Webflow. It’s always nice to use tools that make your tasks easier.