Web Animations Transitions Interactions
In Pure HTML

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

Get Started
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
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, spring>]

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

  /* Another animation added */
  animate:[tx(4rem <order: 1>) r((+)360deg) <2s, alternate, infinite>]
"></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="animate:wobble-h()">...</div>

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

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

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

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

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

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

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

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

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

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

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

<!-- Combination -->
<div data-tor="animate:pulse() animate:swing() animate: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, spring>)
">...</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
circle circle
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, infinite, target: #path-01, oriented: true>)
">...</div>

<!-- Translate along the path on scroll -->
<div data-tor="
  scroll:translate-along-path(<1s, infinite, target: #path-01, oriented: true>)
">...</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:[s(1.5) bg(#843087) <1s, spring>]
On focus within
Form 
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
<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!

* We're really looking forward to your feedback!

Become an Early Adopter

Be part of innovation. Animate smarter with a low-code using TorusKit!

$49 $19 /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!