OneType Transforms

Source repo for building and testing transforms. The full catalog with previews, docs, and CDN setup is at onetype.com/transforms.

<div ot="accordion">
    <div>Question</div>
    <div>Answer</div>
</div>

Transforms

Accordion, Anime, Before/After, Count Up, Cursor, Glitch, Horizontal Scroll, Leaflet, Lightbox, Lottie, Magnetic, Marquee, Morph, Orbit, Parallax, Particles, Ripple, Scramble, Scroll Reveal, Shimmer, Signature, Split, Spotlight, Swiper, Tabs, Tilt, Table of Contents, Typewriter.

How it works

Each transform targets elements with the ot attribute. The runtime scans the page on load, loads dependencies, reads config from ot-* attributes, and runs the transform code.

<div ot="typewriter" ot-speed="100" ot-loop="true">
    <span>Hello World</span>
    <span>Welcome</span>
</div>

Lifecycle

Transforms support 7 lifecycle hooks that share the same context:

• code - element detected in DOM
• destroy - element removed
• visible - element enters viewport
• resize - element changes size
• scroll - scroll position, progress, direction, speed
• hover - mouse enter, move, leave with position
• click - click with position

Dev server

node server/back accordion

Runs a preview server on :3000 for the specified transform.

Links

• Website
• Documentation