Elevate Your Web
animations
interactions
transitions
effortlessly
Build interactive effects without writing any JavaScript or CSS. Get all work done in your HTML.
Get StartedAnimations 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.
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!
Mouse and Scroll-linked effects together
Transform your website into an immersive and interactive experience with user-driver motions.
Trigger animation when scrolled into view
Unleash visual surprises and capture attention. Animate elements as they scroll into view, effortlessly.
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.
Wobble
Jump
Blink
Fly
Pulse
Swing
Orbit
Radiate
Spin
Tada
Move
Combination
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!
Discrete timeline
Learn MoreSimple 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 MoreStep-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 MoreLike 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 MoreThese 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.
Triggers for everything
TorusKit includes trigger for almost any situation. You can always combine them together.
Responsiveness for every device
Unlock the power of versatility with TorusKit! Seamlessly craft dynamic animations tailored for diverse resolutions.
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.
Utilities that enhances your efforts
TorusKit includes numerous of utilities to make your development more comfortable and flawless.
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!
-
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!