I am nesting timeline.
code is like:
timeLine.to(obj1,1.2,{css:{display:"block"}})
nestedTimeline1 = new TimelineMax({repeat:1});
// initially obj2 is with opacity :0
nestedTimeline1.append(TweenLite.to(obj2,1.4,{css:{opacity:1,left:187,bottom:108}}))
nestedTimeline1.append(TweenLite.to(obj2,.5,{css:{opacity:0}}),-.8)
timeLine.append(nestedTimeline1);
when i do:
timeLine.totalProgress(0);
my animation will start from first. But the issues is obj2 opacity will not be reset to 0.
i am not able to understand why this issue is coming?
any solution will be greatly appreciated..
Lets start with the first line.
You cannot animate to display:block - There's no numerical value to animate. You can animate from opacity:0 to opacity:1 just fine.
Now, lets think about the next problem.
You're attempting to animate opacity to 1 over 1.4 seconds.
Your next tween animates the same object from whatever to 0 over 0.5 seconds, with an offset of -0.8 seconds.
I'm not sure if you see the error here, but lets break it down in to a visual representation.
-------------------------------------------------- <-- Tween 1
--------------- <-- Tween 2
You see, Tween 2 finishes before Tween 1, since you pushed it back in the timeline 0.8 seconds and it only runs for 0.5 seconds. So Tween 1 now has that final 0.3 seconds to animate back to opacity:1
Also as a side note, you can use the convenience methods rather than .append(TweenLite...
nestedTimeline1.to(...) does the same thing.
Related
I am using JavaScript with the VelocityJS library to animate a pointer on my screen. The thing is that I get my input for how many degrees I have to rotate the pointer way more often than it can process.
The code that I have right now is:
function changePointer(msg){
kmh = parseInt(msg.payloadString);
degreesToTurnTo = Math.round(kmh * stapgrote);
$("#pointer").velocity({
rotateZ: degreesToTurnTo+"deg"
});
console.log(degreesToTurnTo);
}
The function is getting called about 5 times a second, but 1 animation already takes about half a second.
So my question is, how can I make an if statements that checks if the previous animation is ready (so that I can update it again once its finished). Or how can I cancel the current animation and start the next one (this method would be preferred since I am making a speedometer).
Thanks in advance!
With kind regards,
Mats de Waard
From: http://velocityjs.org/#stop
/* Prior Velocity call. */
$element.velocity({ opacity: 0 });
/* Later, midway through the call... */
$element
/* Stop animating opacity. */
.velocity("stop")
/* Animate opacity back to 1. */
.velocity("reverse");
So in your case something like:
$("#pointer")
.velocity("stop")
.velocity({
rotateZ: degreesToTurnTo+"deg"
});
I'm running a scroll event that triggers TweenMax animations, and I'm noticing that, while it looks good on Chrome, there is a considerable amount of lag on Firefox. Does anyone have a suggestion about how to handle this scroll event as efficiently as possible? Also, is there something about Firefox's rendering that I'm not aware of that might be causing this? Any leads would be appreciated!
The gist is that I'm looking for containers on my page called "customers", which each contain three individual "customer" elements. When a div that matches "customers" scrolls into view, trigger a TweenMax animation, and add a class called "animated", which prevents the element from re-animating subsequently.
Here is a fiddle with the basic demonstration:
http://jsfiddle.net/epp37jsq/
EDIT
To clarify, the fiddle only demonstrates the behavior of my animation function. The lag does not occur there because the file size is quite small. On the actual site, I have 11 groups of 3 "customers." The image is the same, but pulled in 33 times. In the future, the images will be unique. In essence, the animation is being called for each of these 11 groups. I'm looking for suggestions on how to improve the speed of my page.
And my code:
var scrollTimer = null;
$(window).scroll(function () {
if (scrollTimer) {
clearTimeout(scrollTimer); // clear any previous pending timer
}
scrollTimer = setTimeout(handleScroll, 500); // set new timer
console.log("fired!");
});
function handleScroll() {
scrollTimer = null;
$('.customers').each(function() {
if (!$(this).hasClass('animated')) {
if ($(this).isOnScreen(0.45, 0.45)) {
TweenMax.staggerFromTo($(this).find('.customer'), 0.3, {
y: 50,
opacity: 0
}, {
y: 0,
opacity: 1,
ease: Power2.easeOut
}, 0.15);
$(this).addClass('animated');
}
}
});
}
Usually with Firefox, translating on the x or y axis can cause some jank. Sometimes adding a slight rotation:0.001 to your tween can help make your tween more smooth in Firefox.
http://jsfiddle.net/pwkja058/
Also using the GSAP special property autoAlpha instead of opacity can help increase performance
TweenMax.staggerFromTo($(this).find('.customer'), 0.3, {
y: 200,
rotation:0.01, /* add a slight rotation */
autoAlpha: 0 /* use instead of opacity */
}, {
y: 0,
rotation:0.01, /* add a slight rotation */
autoAlpha: 1, /* use instead of opacity */
ease: Power2.easeOut
}, 0.15);
autoAlpha is part of the GSAP CSSPlugin:
http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/
autoAlpha - Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.
I'm animating one circle which scales, collides with two circles nearby it, and causes those circles to be animated to a certain position. Everything works, except when those two circles are animated to their post-collision position they continue to move. If you run my fiddle you'll notice that afterwards the two circles which collide with the bigger circle will actually continue to inch very slowly away from the circle well after the animation is complete. I tried .stop(true,true) on the animate function for the middle circle, called 'boss', but that only makes it so the middle circle isn't shown to grow. I tried .finish() on the boss growth animation but that doesn't help the other circles which continue to inch away well after the animation is complete.
FIDDLE: http://jsfiddle.net/direlelephant/fMLKZ/2/
EDIT: This is true whether I set the position of the divs to fixed or to absolute.
EDIT: I also tried .clearQueue() and .stop(true, false) and stop(true). ClearQueue() did nothing to help the problem, stop(true,false) prevented the middle circle from animating, as did stop(true).
The problem is: you create animations within loop. Replace part of your code with
if ( distanceformula( xcoord3, xboss, ycoord3, yboss ) < ((boss.outerWidth() / 2) + (objectify3.outerWidth() / 2)) ) {
console.log(1)
$( objectify3 ).animate( {
left: xmove3 + "px",
top: ymove3 + "px"
}, {
duration:3000,
step: function() {
console.log(2)
}
});
}
and open console.
You will see, that you created ~1000 animations (console.log(1) executes 1000 times) $( objectify3 ).animate, and then jQuery run 1000 animations one after one. They will end in ~1000 * 3000 seconds.
I think you need a flag and run animations only once with first intersection.
In the link:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
it is said that:
Note: The transitionend event doesn't fire if the transition is aborted because the animating property's value is changed before the transition is completed.
So I went ahead and tried it on http://jsfiddle.net/HA8s2/32/ and http://jsfiddle.net/HA8s2/33/ using Chrome and Firefox.
example: (click on either the left or right box in jsfiddle)
$(".foo").click(function(evt) {
$(".foo").addClass("hide");
setTimeout(function() {
$(".foo").eq(0).removeClass("hide");
}, 3000);
});
$(".foo").on("transitionend", function(evt) {
console.log("wow! transitionend fired for", evt.target, "at time =", (new Date()).getTime() / 1000);
});
this is with a CSS transition duration for 6 seconds:
transition-duration: 6s;
But both kept the animation. The left box actually "animate to a new value in the middle of the original animation", so it took 9 seconds for the left to finish, while the right box took 6 seconds to finish.
In addition, Firefox only have the two events in http://jsfiddle.net/HA8s2/32/ separated by 2 seconds, instead of 3 seconds.
The question is: how do I make the transitionend stop as described in the docs in mozilla.org? (and not by any other brute force method).
(in other words, I want to find out all the situations that the transitionend will not fire and test it out).
Update: I was able to abort the animation if I add display: none to the box on the left, as on http://jsfiddle.net/HA8s2/34/ and won't be able to abort it if it is visibility: hidden as in http://jsfiddle.net/HA8s2/35/ but these do not really "change" the property's value as the docs says -- it is to add or change another property value.
Couldn't you give it a new class that overrides the transition property, removing it?
Your current code is like:
.myelem { transition: 0.5s all; }
You would add this code:
.alsothis { transition: none; }
When you apply the alsothis class to your element, the new transition property value will override the other one, removing the animation effect.
I would like to know how does the jQuery .animate() function work? - calculation and stepping (how much it jumps)
When the animation starts, a timestamp is taken. Then everytime a step triggers (depends on browser and how much stuff is going on), it is calculated how much time has passed since the animation started and the progress is calculated from that.
For example, animation started at 1322338364714, and the animation is supposed to last 5000ms. Once a step is triggered the progress is calculated like so:
Get current time, say 1322338366714.
Normalize = 1322338366714 - 1322338364714 = 2000
Progress is 2000 / 5000 = 0.4 = 40%. So a div that is being animated from 0px to 100px, gets 40px height.