TweenLite staggerTo

Developer
Chrysto
Size
2,495 Kb
Views
42,504
  1. TweenLite staggerTo Previews
  2. TweenLite staggerTo HTML Codes
  3. TweenLite staggerTo CSS Codes
  4. TweenLite staggerTo JS Codes

How do I make an tweenlite staggerto?

Just a snippet, take from TweenMax core.. What is a tweenlite staggerto? How do you make a tweenlite staggerto? This script and codes were developed by Chrysto on 16 July 2022, Saturday.

TweenLite staggerTo Previews
IQ Test

TweenLite staggerTo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>TweenLite staggerTo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="button">change color</div>
<div class="letters"> <span>T</span><span>W</span><span>E</span><span>E</span><span>N</span><span>L</span><span>I</span><span>T</span><span>E</span><span>&nbsp;</span><span>S</span><span>T</span><span>A</span><span>G</span><span>G</span><span>E</span><span>R</span><span>&nbsp;</span><span>T</span><span>O</span> <div id="reporter"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/TweenLite.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/plugins/CSSPlugin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

TweenLite staggerTo - Script Codes CSS Codes

 body { font-family: Helvetica, sans-serif; font-size: 26px; } .button { display: inline-block; padding: 5px; margin-bottom: 20px; border-radius: 3px; cursor: pointer; color: whitesmoke; background-color: darkblue; } #reporter { display: inline-block; margin-left: 20px; } .button, .letters { position: relative; margin-left: 100px; }

TweenLite staggerTo - Script Codes JS Codes

var TM = {};
TM.staggerTo = function(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope) { stagger = stagger || 0; var delay = vars.delay || 0, a = [], finalComplete = function() { if (vars.onComplete) { vars.onComplete.apply(vars.onCompleteScope || this, arguments); } onCompleteAll.apply(onCompleteAllScope || this, onCompleteAllParams || []); }, l, copy, i, p; if (!$.isArray(targets)) { if (typeof(targets) === "string") { targets = TweenLite.selector(targets) || targets; } if (TweenLite._internals.isSelector(targets)) { targets = [].slice.call(targets, 0); } } l = targets.length; for (i = 0; i < l; i++) { copy = {}; for (p in vars) { copy[p] = vars[p]; } copy.delay = delay; if (i === l - 1 && onCompleteAll) { copy.onComplete = finalComplete; } a[i] = new TweenLite(targets[i], duration, copy); delay += stagger; } return a;
};
/* * Demo * */
var $button = $(".button");
var $letters = $(".letters span");
var $reporter = $("#reporter");
$button.on("click", changeColor);
function changeColor() { $reporter.empty(); var randomColor = '#' + Math.random().toString(16).substring(2, 8); TM.staggerTo($letters, 1, { color: randomColor }, 0.2, reportEnd, [randomColor], $reporter);
}
function reportEnd(_endColor) { $reporter.html(_endColor);
}
TweenLite staggerTo - Script Codes
TweenLite staggerTo - Script Codes
Home Page Home
Developer Chrysto
Username bassta
Uploaded July 16, 2022
Rating 3
Size 2,495 Kb
Views 42,504
Do you need developer help for TweenLite staggerTo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chrysto (bassta) Script Codes
Name
Medium.com style header effect
Fullscreen image in Canvas
One page website scrolling effect
Simple GSAP Slider
Single page website
Fullscreen Parallax
Page Header animation
Lastik menu
Click outside element
GSAP Parallax
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!