TweenMax after animation finished - javascript

When first animation will be done after that I want another animation on the same target.
var lnk = document.querySelector('#clickme');
var tl = new TimelineMax();
lnk.addEventListener('click', go, false);
function go(){
tl.to('.glasko', 1, {width: 500, height: 500});
};
After that I want to change background color of div.
tl.to('.glasko', 2, {backgroundColor: 'red'});
What is best practice for this?

GSAP makes it easy & simple with TimelineMax. You just need to write second animation after first animation using same TimelineMax instance and this is the best approach.
var lnk = document.querySelector('#clickme');
var tl = new TimelineMax();
lnk.addEventListener('click', go, false);
function go(){
tl.to('.glasko', 1, {width: 500, height: 500});
tl.to('.glasko', 2, {backgroundColor: 'red'});
};
demo

Related

GSAP timeline over element

im try to fire timeline when a li it's hover, so i create a var with my timeline, and with event.delegateTarget to find children and not all with .CLASS
this is my code
$(".gb-help-list ").on('mouseover', 'li', function (e) {
console.log('mouse');
var tl = new TimelineLite();
tl.to($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut})
.to(".line-top", 2, {width: '100%', ease: Power4.easeOut}, "-=1");
});
i don't see any error in console, but this : o($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut} doesn't fire....
anyone can helpme?
Thx in advance
Assuming that delegateTarget method works, which as per jQuery's documentation seems fine, the only issue here is that the second line of the tween does not have an element to tween. You'll need to pass one to it, something similar to this:
$(".gb-help-list ").on('mouseover', 'li', function (e) {
console.log('mouse');
var tl = new TimelineLite();
tl.to($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut})
.to($(event.delegateTarget).find('.line-top'), 2, {width: '100%', ease: Power4.easeOut}, "-=1");
});

How to modify TimelineLite timing?

I’m quite new with the GreenSock and I got myself in trouble...
I would like to modify GreenSock TimelineLite timing offset for reverse so that some delays get deleted (I think that they are called staggers).
Here is an example: http://jsfiddle.net/4bvnv1d5/
var red = $('.red');
var green = $('.green');
var blue = $('.blue');
var black = $('.black');
var tl = new TimelineLite({onReverseComplete:reverseCompleted});
$('#start').click(function(){
tl.to(red, 0.3, {ease: Power1.easeInOut, 'margin-left':'100px'});
tl.to(green, 0.3, {ease: Power1.easeInOut, 'margin-left':'100px'});
tl.to(blue, 0.3, {ease: Power1.easeInOut, 'margin-left':'100px'});
tl.to(black, 0.3, {ease: Power1.easeInOut, 'margin-left':'100px', onComplete:lastCompleted, onCompleteParams:[black]}, "+=4");
});
$('#reverse').click(function(){
tl.reverse();
});
function lastCompleted(target) {
console.log('lastCompleted');
}
function reverseCompleted(){
console.log('reverseCompleted');
tl.clear();
tl.restart();
}
On play there is a four second delay with the last box, but on the reverse I’d like to animations to play right after each other with no delays. There is function lastCompleted() which is triggered after the last tween gets run. How can I use that function to remove the delay between the black and blue box animations?
Thanks!
Take a look at this fiddle.
JavaScript:
var red = $('.red');
var green = $('.green');
var blue = $('.blue');
var black = $('.black');
var tl = new TimelineLite({
paused: true,
callbackScope: this,
onReverseComplete: onTlReverseComplete
});
tl.staggerTo([red, green, blue], 0.3, { marginLeft: 100, ease: Power1.easeInOut }, 0.3);
tl.addLabel('MyLabel');
tl.to(black, 0.3, { marginLeft: 100, ease: Power1.easeInOut, onReverseComplete: onBlackBoxReverseComplete, callbackScope: this }, '+=4');
$('#start').click(function () {
tl.play();
});
$('#reverse').click(function () {
tl.reverse();
});
function onBlackBoxReverseComplete() {
tl.reverse('MyLabel');
}
function onTlReverseComplete() {
tl.stop();
}
Quite a few things have changed from your code. Here is the list:
The tweens are added into the tl instance outside the scope of click handler of #start button. The click handler only .play()s the timeline forward.
.staggerTo() method is used instead of adding adding the 3 tweens one by one before the one for .black element.
Also, margin-left has been replaced by its JS equivalent marginLeft and since it accepts numbers and defaults to pixels, no need to pass the values as strings.
The tween for .black element has now a onReverseComplete callback.
Hope this helps. Let me know if you have any questions.

How to create smarter toggle animation using velocity

I am using velocity.js to deal with animations and its for the most part great. I have a basic demo on codepen that displays a simple toggle button, however the js to make it animate is seemingly very cumbersome.
Whats the best way to deal with toggling animation like that in my example?
var open = false;
$('.filter').click(function(e){
e.preventDefault();
var el = $(this);
if(!open){
el.find('.filter__line:first').velocity({translateY: [0, -5]}, 200, function(){
$(this).addClass('filter__line--thick').velocity({rotateZ: '45deg'}, 200);
});
el.find('.filter__line:last').velocity({translateY: [0, 5]}, 200, function(){
$(this).addClass('filter__line--thick').velocity({rotateZ: '-45deg'}, 200);
});
open = true;
} else {
el.find('.filter__line:first').velocity({rotateZ: '0deg'}, 200, function(){
$(this).removeClass('filter__line--thick').velocity({translateY: [-5, 0]}, 200);
});
el.find('.filter__line:last').velocity({rotateZ: '0deg'}, 200, function(){
$(this).removeClass('filter__line--thick').velocity({translateY: [5, 0]}, 200);
});
open = false;
}
});
http://codepen.io/matt3224/pen/zGgKwP?editors=011
Thanks
I used Velocity for a long time and ran into those sort of problems a lot. I would highly suggest GSAP if you're doing any sort of complex animations. GSAP timelines allow you to easily play, pause, and reverse a series of animations and the syntax is nice and clean. You can find more info on the GSAP website.
I made a quick demo using this technique on Codepen.
Here's what the script looks like:
$(document).ready(function(){
var top = $('.part-1');
var mid = $('.part-2');
var btm = $('.part-3');
var tl = new TimelineMax().pause();
tl.to(mid, 0.3, {x:100, opacity:0})
.to(top, 0.3, {rotation:18, transformOrigin:"left top"},"second")
.to(btm, 0.3, {rotation:-18, transformOrigin:"left bottom"},"second");
var active = false;
$('h1').click(function(){
if(!active){
tl.play();
active = true;
} else {
tl.reverse();
active = false;
}
}); // end of click
}); // end of ready

javascript raphael object function passing

I apologize for asking this question but I am just looking for a little guidance on this morning. I simply want to create a function so that way I can make a Raphael element glow by just passing in that element. Below is the code I have. Why does this not work?
var paper = Raphael("playarea", 500, 500);
var rectangle = paper.rect(100, 100, 200, 200, 4);
function elemHover(var el)
{
el.hover(
// When the mouse comes over the object //
// Stock the created "glow" object in myCircle.g
function() {
this.g = this.glow({
color: "#0000EE",
width: 10,
opacity: 0.8
});
},
// When the mouse goes away //
// this.g was already created. Destroy it!
function() {
this.g.remove();
});
}
elemHover(rectangle);
here is the fiddle http://jsfiddle.net/aZG6C/15/
You should fill the element( rectangle in our case) to trigger the hover.
rectangle.attr("fill", "red");
Try this fiddle http://jsfiddle.net/aZG6C/17/
The full code will look like
<div id="playarea"></div>
​<script type="text/javascript">
var paper = Raphael("playarea", 500, 500);
var rectangle = paper.rect(100, 100, 200, 200, 4);
function elemHover(el)
{
el.hover(
// When the mouse comes over the object //
// Stock the created "glow" object in myCircle.g
function() {
this.g = this.glow({
color: "#0000EE",
width: 10,
opacity: 0.8
});
},
// When the mouse goes away //
// this.g was already created. Destroy it!
function() {
this.g.remove();
});
}
rectangle.attr("fill", "red");
elemHover(rectangle);
</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
Update
Hover event is triggered only if the element is filled with something. If you want to have a transparent element you can try
rectangle.attr("fill", "transparent");
Check the fiddle here http://jsfiddle.net/aZG6C/20/

Stop animation and reset position of an element in Raphaël.js

I have this simple animation that moves from side to side, Im trying to create a reset button so that the animation stops and gets back to default, but I cant seem to get i right.
The library I am using is Raphael, but I'm almost sure that with a simple javascript I can reset the values inside the function.
Body onload init function
function init() {
paper = Raphael("loadSVG");
var bg = paper.rect( 0, 0, "240px", "90px", 0 );
bg.attr( {fill: "#f3f3ff"} );
rect1 = paper.rect(150, 20, 50, 50);
rect1.attr( {fill: "#ffaaaa", "stroke-width": 3} );
}
The animation function
function moveRect1() {
if( xEnd == 150 )
xEnd = 50;
else
xEnd = 150;
rect1.animate( {x: xEnd}, 1000, "Sine", function (){
moveRect1();
});
}
and the stop button that don't work :)
function stopsvgRect1() {
rect1.stop();
}
You need to bind the stop button to the function you've created.
For example like this:
document.querySelector('#stop').onclick = function() {
stopsvgRect1();
};
Open this fiddle to see it in action.
edit:
As the position should also be resetted, you can choose Raphael.transform() for this action.
Open my updated fiddle to see how it works.

Categories