Totty.js - Elevate Web Visuals Effortlessly

Welcome to Totty.js, your gateway to a mesmerizing world of JavaScript-powered visuals. This cutting-edge library is meticulously crafted to elevate your web projects with captivating and immersive effects that leave a lasting impression.

Table of Contents

1. Introduction
2. Installation
3. Cool effects
   • Svg Line
   • Sticky Button
4. Table of Properties
5. Examples
   • Svg Line
   • Sticky Button

Installation

Use CDN.

<script src="https://tottyjs.netlify.app/js/totty.js"></script>

Required Libraries

<!--  Gsap (for basic animations) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

Cool effects

Svg Line

The feature creates a bending effect when hovering an SVG path, creating an engaging user experience.

<!-- Example Path -->
<svg id="curve">
   <path d="M10,150 Q200,150 390,150" fill="none" stroke="#000" stroke-width="6"/>
</svg>

// select your svg (which has path inside)
Totty.animateSvg("#curve", {
    ease: "elastic.out(1,0.3)",
    offsetLeft: 10,
    offsetRight: 10,
});

example

Sticky Button

This creates a smooth parallax sticky button effect.

// pass parent and children you want to move
Totty.makeSticky('.element-to-hover', '.element-to-move', magnitude, ease);

or via data attribute:

<div data-make-sticky data-sticky-magnitude="1">I am magnety!</div>
<!-- more the magnitude more it will move (default is 0.5) -->

You can also pass the element selector to the data attribute:

<div data-make-sticky="#stick-me">Magnety <div id="stick-me">me</div> magnet!</div>
<!-- for children default magnitude is (0.3) -->

Note: make sture to give the children pointer-events: none;

example

Table of Properties

	animateSvg
Property	Type	Default	Description
ease	string	elastic.out(1,0.3)	Ease that gives it a elestic effet.
duration	number	2	Duration of ease.
offsetLeft	number	0	Distance from left (respective to SVG).
offsetRight	number	0	Distance from right (respective to SVG).
xMultiplier	number	1	Left and right movement multliplier.
yMultiplier	number	1	Top and bottom movement multiplier.