jQuery .animate() switch to GSAP TweenMax
Question
I am working on a project that animates single words in quick succession with varying degrees of speed. I have built something quick and dirty using jQuery 's .animate() and callbacks to make this animation.
You can see an example here on Codepen and the code below too (pretty big).
I am wondering how I can convert this to using GSAP . Below is what I am currently working on as a replacement for jQuery's .animate() and also a Codepen of that version is here :
TweenMax.staggerFromTo('.frame', 1, { opacity: 0, delay: 1 }, { opacity: 1, delay: 1 }, 1);
As you can see my GSAP version is not working correctly like my quick jQuery one.
You can also see that in my huge horrible jQuery file that I can easily amend speeds for each frame which is very important, so I'd need to be able to do this with the GSAP version too.
How could I do this?
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700' rel='stylesheet' type='text/css'>
<script>
var clickTag="";
</script>
</head>
<body>
<div id="ad-container">
<div id="preloader">
<!-- show something while the assets load -->
<div id="preloader"></div>
</div>
<div id="ad-content" class="loading">
<div id="para-1">
<div id="frame1" data-speed="regPace" class="frame left">
<p>ANALYSING</p>
</div>
<div id="frame2" data-speed="regPace" class="frame left">
<p>complex</p>
</div>
<div id="frame3" data-speed="regPace" class="frame left">
<p>data</p>
</div>
<div id="frame4" data-speed="regPace" class="frame left">
<p>is</p>
</div>
<div id="frame5" data-speed="regPace" class="frame left">
<p>challenging.</p>
</div>
<div id="frame6" data-speed="regPace" class="frame left">
<p>Especially</p>
</div>
<div id="frame7" data-speed="regPace" class="frame left">
<p>here</p>
</div>
<div id="frame8" data-speed="regPace" class="frame left">
<p>at</p>
</div>
<div id="frame9" data-speed="slowPace" class="frame left">
<p>GCHQ.</p>
</div>
<div id="frame10" data-speed="regPace" class="frame left">
<p>Sometimes</p>
</div>
<div id="frame11" data-speed="regPace" class="frame left">
<p>you</p>
</div>
<div id="frame12" data-speed="regPace" class="frame left">
<p>have</p>
</div>
<div id="frame13" data-speed="regPace" class="frame left">
<p>to</p>
</div>
<div id="frame14" data-speed="regPace" class="frame left">
<p>act</p>
</div>
<div id="frame15" data-speed="regPace" class="frame left">
<p>quickly</p>
</div>
<div id="frame16" data-speed="regPace" class="frame left">
<p>but</p>
</div>
<div id="frame17" data-speed="regPace" class="frame left">
<p>accurately.</p>
</div>
<div id="frame18" data-speed="regPace" class="frame left">
<p>at</p>
</div>
<div id="frame19" data-speed="regPace" class="frame left">
<p>other</p>
</div>
<div id="frame20" data-speed="regPace" class="frame left">
<p>times,</p>
</div>
<div id="frame21" data-speed="regPace" class="frame left">
<p>you</p>
</div>
<div id="frame22" data-speed="regPace" class="frame left">
<p>get</p>
</div>
<div id="frame23" data-speed="regPace" class="frame left">
<p>to</p>
</div>
<div id="frame24" data-speed="regPace" class="frame left">
<p>spend</p>
</div>
<div id="frame25" data-speed="regPace" class="frame left">
<p>a</p>
</div>
<div id="frame26" data-speed="regPace" class="frame left">
<p>bit</p>
</div>
<div id="frame27" data-speed="regPace" class="frame left">
<p>more</p>
</div>
<div id="frame28" data-speed="regPace" class="frame left">
<p>time</p>
</div>
<div id="frame29" data-speed="regPace" class="frame left">
<p>on</p>
</div>
<div id="frame30" data-speed="regPace" class="frame left">
<p>things.</p>
</div>
<div id="frame31" data-speed="regPace" class="frame right">
<p>Sometimes</p>
</div>
<div id="frame32" data-speed="regPace" class="frame right">
<p>you</p>
</div>
<div id="frame33" data-speed="regPace" class="frame right">
<p>start</p>
</div>
<div id="frame34" data-speed="regPace" class="frame right">
<p>to</p>
</div>
<div id="frame35" data-speed="regPace" class="frame right">
<p>follow</p>
</div>
<div id="frame36" data-speed="regPace" class="frame right">
<p>a</p>
</div>
<div id="frame37" data-speed="regPace" class="frame right">
<p>line</p>
</div>
<div id="frame38" data-speed="regPace" class="frame right">
<p>of</p>
</div>
<div id="frame39" data-speed="regPace" class="frame right">
<p>thought</p>
</div>
<div id="frame40" data-speed="regPace" class="frame left">
<p>and</p>
</div>
<div id="frame41" data-speed="regPace" class="frame left">
<p>it</p>
</div>
<div id="frame42" data-speed="regPace" class="frame left">
<p>leads</p>
</div>
<div id="frame43" data-speed="regPace" class="frame left">
<p>to</p>
</div>
<div id="frame44" data-speed="regPace" class="frame left">
<p>a</p>
</div>
<div id="frame45" data-speed="regPace" class="frame left">
<p>dead</p>
</div>
<div id="frame46" data-speed="regPace" class="frame left">
<p>end.</p>
</div>
</div>
<!--<div id="frame1">
<h1>Banner content</h1>
</div>
<div id="frame2" class="off">
<h1>Banner content 2</h1>
</div>-->
</div>
</div>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TimelineMax.min.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/AttrPlugin.min.js"></script>-->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!--<script src="lib/zepto.min.js"></script>-->
<script src="script.js"></script>
<script src="http://cdn.flashtalking.com/frameworks/js/api/2/9/html5API.js"></script>
<script type="text/javascript">
container = myFT.$("#ad-container");
myFT.applyClickTag(container, 1);
</script>
</body>
</html>
JavaScript:
$( document ).ready(function() {
var regPace = 400;
var fastPace = 200;
var slowPace = 700;
var pause = 1600;
var container = $('#ad-container'),
content = $('#ad-content'),
/*f1 = $('#frame1'),
f2 = $('#frame2'),*/
/*clickHandler = (function() {
container.on( "click", function(event) {
window.open( clickTag, "_blank" );
});
})(),*/
////////////////// READY ///////////////////
bannerInit = function(){
/// preload assets
showBanner();
},
////////////////// GET SET ///////////////////
showBanner = function() {
content.removeClass('loading');
$('#preloader').addClass('off');
anim();
},
////////////////// GO ///////////////////
anim = function(){
// your animation stuff // GSAP or whatever
/*$('#para-1 div').each(function(index,element){
//var that = $(this);
var speed = $(this).data('speed');
if (speed == 'regPace') { pace = regPace};
if (speed == 'fastPace') { pace = fastPace};
if (speed == 'slowPace') { pace = slowPace};
setTimeout(function(){
console.log('the speed for '+index+': '+pace);
$(element).animate({"opacity":"1",},0);
$(element).delay(pace).animate({"opacity":"0",},0);
},index * pace);
});*/
/*function doThis(){
console.log('Paragraph 1 complete');
}
doThis();*/
$('#frame1').animate({"opacity":"1",},0,function(){
$('#frame1').delay(regPace).animate({"opacity":"0",},0);
$('#frame2').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame2').delay(regPace).animate({"opacity":"0",},0);
$('#frame3').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame3').delay(regPace).animate({"opacity":"0",},0);
$('#frame4').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame4').delay(regPace).animate({"opacity":"0",},0);
$('#frame5').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame5').delay(fastPace).animate({"opacity":"0",},0);
$('#frame6').delay(fastPace).animate({"opacity":"1",},0,function(){
$('#frame6').delay(fastPace).animate({"opacity":"0",},0);
$('#frame7').delay(fastPace).animate({"opacity":"1",},0,function(){
$('#frame7').delay(fastPace).animate({"opacity":"0",},0);
$('#frame8').delay(fastPace).animate({"opacity":"1",},0,function(){
$('#frame8').delay(fastPace).animate({"opacity":"0",},0);
$('#frame9').delay(fastPace).animate({"opacity":"1",},0,function(){
$('#frame9').delay(fastPace).animate({"opacity":"0",},0);
$('#frame10').delay(fastPace).animate({"opacity":"1",},0,function(){
$('#frame10').delay(fastPace).animate({"opacity":"0",},0);
$('#frame11').delay(fastPace).animate({"opacity":"1",},0,function(){
$('#frame11').delay(fastPace).animate({"opacity":"0",},0);
$('#frame12').delay(fastPace).animate({"opacity":"1",},0,function(){
$('#frame12').delay(fastPace).animate({"opacity":"0",},0);
$('#frame13').delay(fastPace).animate({"opacity":"1",},0,function(){
$('#frame13').delay(fastPace).animate({"opacity":"0",},0);
$('#frame14').delay(fastPace).animate({"opacity":"1",},0,function(){
$('#frame14').delay(fastPace).animate({"opacity":"0",},0);
$('#frame15').delay(fastPace).animate({"opacity":"1",},0,function(){
$('#frame15').delay(fastPace).animate({"opacity":"0",},0);
$('#frame16').delay(fastPace).animate({"opacity":"1",},0,function(){
$('#frame16').delay(fastPace).animate({"opacity":"0",},0);
$('#frame17').delay(fastPace).animate({"opacity":"1",},0,function(){
$('#frame17').delay(fastPace).animate({"opacity":"0",},0);
$('#frame18').delay(fastPace).animate({"opacity":"1",},0,function(){
$('#frame18').delay(regPace).animate({"opacity":"0",},0);
$('#frame19').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame19').delay(regPace).animate({"opacity":"0",},0);
$('#frame20').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame20').delay(regPace).animate({"opacity":"0",},0);
$('#frame21').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame21').delay(regPace).animate({"opacity":"0",},0);
$('#frame22').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame22').delay(regPace).animate({"opacity":"0",},0);
$('#frame23').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame23').delay(regPace).animate({"opacity":"0",},0);
$('#frame24').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame24').delay(regPace).animate({"opacity":"0",},0);
$('#frame25').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame25').delay(regPace).animate({"opacity":"0",},0);
$('#frame26').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame26').delay(slowPace).animate({"opacity":"0",},0);
$('#frame27').delay(slowPace).animate({"opacity":"1",},0,function(){
$('#frame27').delay(slowPace).animate({"opacity":"0",},0);
$('#frame28').delay(slowPace).animate({"opacity":"1",},0,function(){
$('#frame28').delay(slowPace).animate({"opacity":"0",},0);
$('#frame29').delay(slowPace).animate({"opacity":"1",},0,function(){
$('#frame29').delay(slowPace).animate({"opacity":"0",},0);
$('#frame30').delay(slowPace).animate({"opacity":"1",},0,function(){
$('#frame30').delay(pause).animate({"opacity":"0",},0);
$('#frame31').delay(pause).animate({"opacity":"1",},0,function(){
$('#frame31').delay(regPace).animate({"opacity":"0",},0);
$('#frame32').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame32').delay(regPace).animate({"opacity":"0",},0);
$('#frame33').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame33').delay(regPace).animate({"opacity":"0",},0);
$('#frame34').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame34').delay(regPace).animate({"opacity":"0",},0);
$('#frame35').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame35').delay(regPace).animate({"opacity":"0",},0);
$('#frame36').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame36').delay(regPace).animate({"opacity":"0",},0);
$('#frame37').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame37').delay(regPace).animate({"opacity":"0",},0);
$('#frame38').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame38').delay(regPace).animate({"opacity":"0",},0);
$('#frame39').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame39').delay(regPace).animate({"opacity":"0",},0);
$('#frame40').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame40').delay(regPace).animate({"opacity":"0",},0);
$('#frame41').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame41').delay(regPace).animate({"opacity":"0",},0);
$('#frame42').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame42').delay(regPace).animate({"opacity":"0",},0);
$('#frame43').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame43').delay(regPace).animate({"opacity":"0",},0);
$('#frame44').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame44').delay(regPace).animate({"opacity":"0",},0);
$('#frame45').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame45').delay(regPace).animate({"opacity":"0",},0);
$('#frame46').delay(regPace).animate({"opacity":"1",},0,function(){
$('#frame46').delay(regPace).animate({"opacity":"0",},0);
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
/*$('#frame1').show(2000,function(){
$(this).hide(0);
$('#frame2').show(2000,function(){
$(this).hide(0);
$('#frame3').show();
});
console.log('jello');
});*/
}; //// END ANIM /////
bannerInit();
});
1 answers
solution1
2 ACCPTED 2015-09-26 12:10:58
First off, go have a read of one of my answers which introduces you to GSAP with plenty of links for you to first go through if you haven't heard of or tried GSAP before.
Secondly, your Codepen doesn't really work in Chrome for me (45+, Macbook Pro) but it does in Firefox. Not really sure what is the reason but something about security I presume.
Anyway, your jQuery 's animate() calls were difficult to understand thanks to the callbacks-within-callbacks loops :) and I am not sure if there would have been a better way to do them even if we were to keep using animate() .
Having said that, the decision to do all the animations with GSAP has to be applauded :)
Codepen URL can be found here and here is how the final JavaScript looks like:
var timeline = new TimelineMax({ paused: true });
var easeOut = Power2.easeOut;
var easeIn = Power2.easeIn;
var durationRegular = 0.2;
var durationSlow = 0.8;
var durationFast = 0.1;
var pauseLocation = 5;
var pauseInterval = 2;
var container = $('#ad-container'), content = $('#ad-content');
var bannerInit = function() { showBanner(); };
var showBanner = function() {
content.removeClass('loading');
$('#preloader').addClass('off');
anim();
};
var anim = function() {
var frames = $('.frame');
var numFrames = frames.length;
var dataSpeed = '';
TweenMax.set(frames, { autoAlpha: 0 });
timeline
.to(frames[0], 1, { autoAlpha: 1, ease: easeOut })
.to(frames[0], durationRegular, { autoAlpha: 0, ease: easeIn });
for (var i = 1; i < numFrames; i += 1) {
dataSpeed = $(frames[i]).data('speed');
var duration = durationRegular;
if (dataSpeed === 'slowPace') {
duration = durationSlow;
} else if (dataSpeed === 'fastPace') {
duration = durationFast;
}
timeline
.to(frames[i], duration, { autoAlpha: 1, ease: easeOut })
.to(frames[i], duration, { autoAlpha: 0, ease: easeIn });
}
timeline.play();
timeline.addPause(pauseLocation, onTimelinePaused);
};
var onTimelinePaused = function() {
TweenMax.delayedCall(pauseInterval, function() {
timeline.resume();
});
};
//
bannerInit();
The main feature of GSAP that is being used here is called TimelineMax , documentation for which can be found here .
Other notable features being used are:
-
.set()method of TweenMax . -
.play()and.resume()methods of TimelineMax . -
.addPause()method of TimelineMax . -
autoAlphaproperty, can be found within CSSPlugin . -
Power2easings which can be found within Easing section of the documentation.
Let me know if you have queries.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
TweenMax does not animate (GSAP)
Animate rotate negative (jQuery GSAP)
TweenMax Repeat GSAP
GSAP - TweenMax : TweenMax.getAllTweens() returns objects instead of TweenMax instance
TweenMax / GSAP stagger raw array values
GSAP TweenMax - not able to access variables inside timelines
TweenMax GSAP not animating, only works in codepen?
gsap tweenlite/tweenmax garbage collecting, references and performances
Fire multiple tweens simultaneously with GSAP and TweenMax
Animate blur filter with GSAP
Related Tags