Torus Kit

Low-code tool for creating web animations right in the HTML without writing any JS or CSS code. #lowcode #webanimations #html

[Dujoor @dujoor]

🎉 Today's featured project: TorusKit - Animate The Web | Javascript Animation Library | CSS Library by @toruskit

Check it out 👇
https://t.co/xgi77iRFtH

[Torus Kit @toruskit]

@mgaak1dev Does anyone remember HomeSite? :D

[Torus Kit @toruskit]

@kpirkovikj Minimalistic beauty!

[Torus Kit @toruskit]

@BrenKinfa I'm Ondrej. A creator of @toruskit - a low-code CSS animation toolkit. And BTW, nice animations ;) What library have you used?

[Torus Kit @toruskit]

@Teo_Goulois Very nice! This is literally asking for subtle reveal and scroll animations :) If you have a minute, check @toruskit. It may help with that a lot

[Torus Kit @toruskit]

@Call_me_greyy Very nice! Have you considered adding some revealing or scroll animations here? With @toruskit you can add them in minutes instead of hours (plus no JS or CSS code needed)

[Torus Kit @toruskit]

@thejoysharma @KeyframeS Nice progress! If you find the CSS keyframes limits, check @toruskit to push your animations further ;)

[Torus Kit @toruskit]

@Chandadesign What tools are you going to use for that?

[Torus Kit @toruskit]

@CodePen @pluralsight Participated! https://t.co/P3IsDpEHpH

[Torus Kit @toruskit]

The "shadows" are done by using a built-in group (stagger) utility, just by adding:

data-tor-group="
.text =>
sx(1.5) o(0)
animate:tz(/-25/px)
animate:[sx(1) o(1) <2s, delay: /+100/ms>]
animate:[scale(0.95) <infinite, alternate, 2s, delay: /+100/ms>]
"

And that's it!

[Torus Kit @toruskit]

New #CodePenChallenge accepted and done! This interactive Colorful 3D Text shadow is done with @toruskit.

Live: https://t.co/sevltJz2Ts

#CSSAnimation #LowCode #WebAnimations

[Torus Kit @toruskit]

Rotating is done with this simple HTML attribute:
`data-tor="
rotateY(-40deg) rotateX(30deg)
mouse(x, parallax):rotateY((+)10deg)
mouse(y, parallax):rotateX((-)10deg)
mouse(parallax):rotateZ((-)5deg)
"`

The `(+)/(-)` adds or removes the rotation of the current one. Yes, multiple transforms can be applied to one element!

[Torus Kit @toruskit]

@Wisteraverse What was the biggest issue? Plugin compatibilities? Customizations? At least the CSS animations is something that @toruskit may help

[Torus Kit @toruskit]

@Inveeest That's right :) No need to write any JS or CSS. Everything is done in HTML, like `&lt;div data-tor="hover:scale(2 &lt;1s, spring&gt;)"`. Even for viewport reveals, scroll/mouse effects, etc.

[Torus Kit @toruskit]

@santu_design Now it's time to add some animation! Check the @toruskit to add them without a headache. No JS/CSS required - just pure HTML

[Torus Kit @toruskit]

@Inveeest Looking awesome! What tool have you used for the animation? You can also check @toruskit for the easy
web animations without JS/CSS code.

[Torus Kit @toruskit]

We've just earned recognition for our website! https://t.co/wTAmoU1uZG

[Torus Kit @toruskit]

@ItsPeterDesign Impressive. I would add just a little bit of line height on the heading. Are you planning to animate this hero? It's almost asking for some reveal effects! You can use a @toruskit to make them fast;)

[Torus Kit @toruskit]

That moment when a "simple" JS animation turns into a math degree 🧠💣
#webdev #frontenddev #cssanimation #html