Text Kinetic Effect Using jQuery And GSAP
File Size: | 689 KB |
---|---|
Views Total: | 689 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A tiny script that makes use of jQuery and GSAP libraries to create a fancy kinetic animation effect on any text when clicking.
How to use it:
1. Import necessary JavaScript and Stylesheet:
import _ from "lodash"; import "reset-css"; import "./styles/style.scss"; import { gsap } from "gsap"; import $ from "jquery";
2. The HTML structure:
<div class="effect__wrapper"> <div class="effect-kinetic" id="effect-kinetic"> <div class="effect-kinetic__item effect-kinetic__item--black"> jQueryScript </div> </div> </div>
3. The necessary CSS styles:
.effect__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100vw; height: 100vh; } .effect-kinetic { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .effect-kinetic__item { font-family: "arial"; font-size: 8vw; font-weight: 700; -webkit-transform-origin: center center; transform-origin: center center; position: absolute; } .effect-kinetic__item--black:nth-child(1) { color: #000; z-index: 12; } .effect-kinetic__item--white:nth-child(1) { color: #fff; z-index: 12; } .effect-kinetic__item:nth-child(2) { color: #fbeb62; z-index: 11; } .effect-kinetic__item:nth-child(3) { color: #fb9363; z-index: 10; } .effect-kinetic__item:nth-child(4) { color: #fb5b5b; z-index: 9; } .effect-kinetic__item:nth-child(5) { color: #fb527b; z-index: 8; } .effect-kinetic__item:nth-child(6) { color: #fc52db; z-index: 7; } .effect-kinetic__item:nth-child(7) { color: #d35bfb; z-index: 6; } .effect-kinetic__item:nth-child(8) { color: #7353fa; z-index: 5; } .effect-kinetic__item:nth-child(9) { color: #5473fb; z-index: 4; } .effect-kinetic__item:nth-child(10) { color: #6cebfb; z-index: 3; } .effect-kinetic__item:nth-child(11) { color: #6afbf3; z-index: 2; } .effect-kinetic__item:nth-child(12) { color: #7cfb8b; z-index: 1; }
4. The core JavaScript (jQuery script) to enable the Kinetic Effect.
$(".effect-kinetic").each(function (index) { for (let i = 1; i < 12; i++) { var cloned = $(this).find(">:first-child").clone(); $(this).append(cloned); } $(this).on("click", function () { var tl = gsap.timeline(); tl.staggerTo(".effect-kinetic__item", 0.4, { rotation: "-3" }, 0.03, 0.7); tl.staggerTo(".effect-kinetic__item", 0.5, { rotation: 3 }, 0.03, 1.1); tl.staggerTo(".effect-kinetic__item", 0.5, { rotation: 0 }, 0.03, 1.6); }); });
5. Build the demo.
$ npm install $ npm run-script build
This awesome jQuery plugin is developed by mrzepecki. For more Advanced Usages, please check the demo page or visit the official website.