Elevate Your Web
animations interactions transitions effortlessly

Build interactive effects without writing any JavaScript or CSS. Get all work done in your HTML.

HTML

<!-- Card element mouse move -->
<div id="card" data-tor="
  mouse(x):tiltY(20deg <2s>)
  focus(#input):s(.95 <2s, elastic>)
">...<div>

<!-- Input pop-out on focus -->
<input id="input" data-tor="
  focus:[tz(2rem) s(1.05) br(0.5rem) o(1) <2s, elastic>]
"/>

<!-- Button animation loop and hover effect -->
<button id="button" data-tor="
  animate:ty(0.25rem <1s, alternate, infinite>)
  hover:s(1.15 <1s, elastic>)
">...</button>

<!-- Card background image blur -->
<img id="bg" data-tor="
  focus(#input):[s(1.2) filter(blur(1rem) <2s, elastic>)]
"/>

Animations
with ease

* Make interactions in seconds

From simple to complex motions in no time.

No matter if you want to create a simple hover effect, or multi-step timeline animation. TorusKit tools will make it easy and fun.

Get TorusKit

HTML

<!-- Add effects into multiple child elements -->
<div data-tor-group="
  path =>
    transform-origin(bottom) s(0) ty(100%)
    animate:[ty(100%) s(1) <3s, delay: /+200/ms, alternate, infinite>]
  ;
">
  <svg>
    <path />
    <path />
    <path />
  </svg>
</div>

Easy markup that saves headaches with CSS/JS.

Work with CSS as you would expect. Individual transforms? Smooth reverse transitions? Multiple animations together on one element ? All checked!

Get TorusKit

Static styling

Add custom CSS right in the HTML code. Just like you use Tailwind.

Individual transforms

Don't mess with the CSS transform. Just add a property you need.

Reverse any time

Reverse animation from last state are impossible with CSS. Not here. Try check/uncheck.

Multiple animations

Add another animations to the running ones on the same element.

HTML

<div data-tor="
  // Static styling
  bgi(linear-gradient(90deg, #fd44e9, #531bbe, #77e5fd)) br(1rem) padding(5rem) shadow(lg)

  // Individual transforms
  animate:[s(1.25) r(45deg) <2s, elastic, alternate, infinite>]

  // Timeline animation
  animate:[[br(5rem)], [filter(blur(1rem))] <2s, alternate, infinite>]

  // Another animation added
  animate:[tx(4rem) r((+)360deg) <2s, alternate, infinite>]
"></div>

Mouse and Scroll-linked effects together

Transform your website into an immersive and interactive experience with user-driver motions.

Get TorusKit

HTML

<!-- Scene rotation -->

<div data-tor="
  // `$options` variable and static styling
  $options(<2s, method: parallax>) rx(-8deg) ty(20%)

  // Interactive rotation on mouse
  mouse(x):ry(10deg $options) mouse(y):rx((-)8deg $options)
">...</div>

<!-- Sun scale on scroll -->

<div data-tor="
  // Static styling
  transform-origin(bottom center) s(0.75)

  // Interactive scale on scroll
  scroll:s(1 <2s, end: 40%>)
">...</div>

<!-- Car move and rotation on mouse -->

<div data-tor="
  mouse(x):[
    tx(-8rem <2s, method: parallax>)
    ry((-)20deg <3s, method: delta(10)>)
  ]
">...</div>

Trigger animation when scrolled into view

Unleash visual surprises and capture attention. Animate elements as they scroll into view, effortlessly.

Get TorusKit

HTML

<!-- Group set of effects for multiple elements -->

<svg data-tor-group="
  path => ty(5rem) o(0) inview:[ty(0rem) o(1) <3s, easing: out-expo>]
">...</svg>

Built-in loops for infinite motions

Elevate your web presence with seamless, continuous animations using built-in loops. Create visuals that engage your audience and enhance user experience.

Get TorusKit

Wobble

Jump

Blink

Fly

Pulse

Swing

Orbit

Radiate

Spin

Tada

Slide

Combination

HTML

<!-- Wobble -->
<div data-tor="loop:wobble_h()">...</div>

<!-- Jump -->
<div data-tor="loop:jump()">...</div>

<!-- Blink -->
<div data-tor="loop:blink()">...</div>

<!-- Fly -->
<div data-tor="loop:fly()">...</div>

<!-- Pulse -->
<div data-tor="loop:pulse()">...</div>

<!-- Swing -->
<div data-tor="loop:swing()">...</div>

<!-- Swing -->
<div data-tor="loop:swing()">...</div>

<!-- Orbit -->
<div data-tor="loop:orbit(1.5rem)">...</div>

<!-- Radiate -->
<div data-tor="loop:radiate(#00f4fc)">...</div>

<!-- Spin -->
<div data-tor="loop:spin()">...</div>

<!-- Tada -->
<div data-tor="loop:tada()">...</div>

<!-- Slide -->
<div data-tor="loop:slide-h()">...</div>

<!-- Combination -->
<div data-tor="loop:pulse() loop:swing() loop:blink(0.5)">...</div>

Multiple timeline types mixed together

Simple discrete transition? Or multi-step animation? Maybe a CSS-like offset-based one. No limits there, mix them together as you need!

Get TorusKit

Discrete timeline

Learn More

HTML

<div data-tor="
  animate:tx(5rem <2s, alternate, infinite, elastic>)
  animate:s(1.5 <2s, alternate, infinite, elastic>)
">...</div>

<!-- Alternative markup using "cluster" with options inheritance -->

<div data-tor="
  animate:[tx(5rem) s(1.5) <2s, alternate, infinite, elastic>]
">...</div>

Simple timeline that animates element from initial state to the new one. You can use a 'cluster' when setting multiple properties on one trigger.

Sequenced timeline with independent steps

Learn More

HTML

<div data-tor="
  animate:[
    [tx(-5rem <2x, alternate>)], // Independent repeat in step
    [r(360deg)],
    [s(1.5)]
    <3s, alternate, infinite>
  ]
">...</div>

Step-based timeline where the cluster represents a step. Each step can include multiple properties.Timeline will proceed to the next step only if all properties in the current step has finished.

Offset timeline

Learn More

HTML

<div data-tor="
  animate:[
    0%:[tx(0rem) r(0deg) s(1)],
    33%:[tx(5rem) r(0deg) s(1)],
    66%:[tx(5rem) r(360deg) s(1)],
    100%:[tx(5rem) r(360deg) s(1.5)]
    <3s, alternate, infinite>
  ]
">...</div>

Like regular CSS animation definition. Divide the animation into multiple percentage-based pieces. All properties have to initialized in the first step.

Combination with hover trigger

Learn More

HTML

<div data-tor="
  animate:[
    [tx(-5rem <2x, alternate>)],
    [r(360deg)]
    <3s, alternate, infinite>
  ]

  animate:[0%:[o(1)], 100%:[o(0.5)] <1s, alternate, infinite>]
  hover:s(1.25 <1s, elastic>)
">...</div>

These timelines can be mixed together even with another trigger. The example above shows how to mix two different animations triggers with independent 'hover' trigger.

Path reveal and offset animations

Gradually reveal SVG lines as you scroll, hover or on any available trigger. Use an SVG path to animate the element along.

Get TorusKit

HTML

<!-- Path reveal on viewport enter -->
<div data-tor="
  inview:reveal-path(<3s>)
">...</div>

<!-- Animating translate along the path -->
<div data-tor="
  animate:translate-along-path(<10s, linear, path: #path-01, infinite>)
">...</div>

<!-- Translate along the path on scroll -->
<div data-tor="
  scroll:translate-along-path(<1s, path: #path-01, infinite>)
">...</div>

Triggers for everything

TorusKit includes trigger for almost any situation. You can always combine them together.

Get TorusKit

On hover

hover:scale(1.25)

On active state

active:rotate(10deg)

On class change

.loading(parent):[width(1.75rem) s(1)]

On click

click:border-radius(2rem)

On focus

focus:[shadow(lg) bg(rgba(0,0,0,.1))]

On check

Check me

check:[s(1.5) bg(#843087) <1s, elastic>]

On focus within

focus-within:[bg(#2d0358) s(1.1 <1s>)]

Responsiveness for every device

Unlock the power of versatility with TorusKit! Seamlessly craft dynamic animations tailored for diverse resolutions.

Get TorusKit

Target the right resolution

This example shows that scale value is 1.2 by default, but 1.5 on md resolution and up. Then, when the resolution is xl and up, value of 2 will be used.

HTML

<!-- Path reveal on viewport enter -->
<div data-tor="
  animate:s([1.2 md::1.5 xl::2] <2s, alternate, infinite>)
">...</div>

Utilities that enhances your efforts

TorusKit includes numerous of utilities to make your development more comfortable and flawless.

Get TorusKit

Additive animations

Create cumulating effect by adding (or removing) another animation to the running one. Not possible with regular CSS.

Property shorthands

No need to write a full CSS property definition. Just use tx that refers to translateX. Many shorthands available.

Animation chaining

Set what to do when the animation starts or ends. Create complex sequenced or parallel transitions.

Element bounds

Get and use the element dimensions as animation value. Need to animate the height? Just use get(height).

Position shift

Move the element from original position. Useful for notification badges, tags, ribbons, etc. The shift:up(50%) explain itself.

Class/attribute toggle

Easily add/remove/toggle the class or attribute on the element using various triggers.

Variables

Store a value in a global or local (per element) variable for later use. Especially useful for repeating markup.

References

Create a reference trigger, that runs only when certain conditions are met. The @grow:s(2) will start only the @grow reference is called.

Your toolbox for advanced interactions

We are in beta!* Support our effort by purchasing the TorusKit to make it happen!

* The documentation is in progress, but the TorusKit itself is fully working!

Become an Early Adopter

Be part of innovation. Get your TorusKit that includes both v2 and v3 (beta) to support our further development. Documentation coming soon!

$69 $39 /onetime fee

All dynamic triggers
All utilities
Animations
Inview effects
Scroll effects
Mouse effects
Class / Attribute toggle
Shorthands
Additive properties
References
Motion path / offset effects
And many more!

Animations with ease

Static styling

Individual transforms

Reverse any time

Multiple animations

Wobble

Jump

Blink

Fly

Pulse

Swing

Orbit

Radiate

Spin

Tada

Slide

Combination

Target the right resolution

Animations
with ease