Introducing Torus Kit 2.0 - A faster way to create CSS interactions

We're super excited to introduce you the Torus Kit v2.0 release! It brings a completely new, rewritten engine, performance boost, new Class actions feature, rewritten Slider component, and some small changes to syntax. We're gonna go through new features in detail in this post.

What’s Torus Kit?

But first things first. Let’s talk about the Torus Kit. What it is and how it can help you in your development.

Effects and interactions

Torus Kit is an all-in-one toolbox for creating CSS interactions and effects right in your HTML. You don’t need to write any JavaScript or CSS styles. Everything is included, so you can fully focus on your coding.

You can easily create scroll-linked effects such as parallax, make revealing effects when an element appears into the viewport, create tilt interactions, change the background while you moving the mouse, or any other style change based on various triggers.

Example

Here’s an example how you can easily to create parallax effect with amount of 20 on scroll trigger.

<div data-tor="scroll:@parallax(20)">..</div>

Or you can set multiple effects to group of child elements. In this case we’re adding bg(primary) and scale.to(125%) on hovertrigger to .box elements.

<div data-tor=".box => hover:[bg(primary) scale.to(125%)]">..</div>

Loops and animations

The Loops feature will help you to create animations right in your HTML. With the 10+ predefined loops, you can create animations that catch the visitor’s attention, or just animate the content/illustration to bring life to your webpage.

Components and utilities

Torus Kit integrates the Bootstrap components and utilities and brings new ones that make your workflow more fluid. You can create nice revealing or hiding animated Alerts, Dropdowns, or Modals. With Torus Kit’s Slider component you can not only make sliding content, but you can make complex animations when items slide in into view. Check the Components and Utilities documentation to see more of them.

What’s new

Now let dive into what’s new in version 2.0.

Performance

From version 2.0 we’ve started to use MutationObserver as a pre-paint phase from the document render flow. That means that all script initializations made in this phase are done before you can view the full rendered page. Thanks to that, we can dynamically create CSS styles that are applied immediately without any flashing or delay. All initializations are done asynchronously so there is minimum blocking time during the page parsing.

Another performance boost comes from ditching all methods that forces the layout/reflow. These methods created a performance bottleneck, which reduces page rendering speed. We have replaced them with the asynchronous IntersectionObserver that is fast and has minimal impact on performance.

File size

Because the CSS styles are now created dynamically for only what’s really used on the page, we could drastically reduce the final stylesheet file. We’ve also reduced JavaScript files thanks to redesigned engine.

New triggers

We’ve increased the number of triggers and we’ve added new focus and focus-within to the existing ones. You can now style the <input> element when it gets focused or whole <form> using the focus-within trigger when one of the child <input> elements get focues.

Class actions

The Class actions utility helps you to make interactive class changes simple and easy. You can add, remove, or toggle one, or multiple classes on different elements based on various triggers such as click, hover, scroll, or timeout. Everything is defined right in the HTML without writing any JavaScript.

In combination with the .active and .show classes, you can create complex interactions where one trigger can trigger activate multiple effects on multiple elements across the page.

Example

Let’s assume that you have #off-screen navigation element, and will slide from left when it gets .active class. Instead of writing JavaScript with onclick method, you can use Torus Kit Class actions and define it all just in your HTML.

<div data-tor="click:class.toggle(active, {target: #off-screen})">...</div>

New Loops pause features

When you create an animation loop with the Loops tool, you can now set the pause between the iterations! This may looks like a trivial feature, but it’s actually not possible in CSS. But thanks to the new {pause: <time>} option, you can make any pause before running to the next iteration.

Redesigned slider component

Similar to the main Torus Kit engine, we have also rewrite the Slider code to be more performant. It also uses IntersectionObserver to calculate the slider items size, so there is a minimum effect on performance.

Boost your workflow to the next level

Save time and headaches by messing with custom JavaScript and CSS for your interactions. Don’t get tangled up with countless interactions libraries that may don’t work together.

Grab the all-in-one Torus Kit PRO and keep focused on your work!