In this fiddle I have a small div with an opacity animation.
The animation plays correctly when the state changes to true and the component is mounted
and the div fades in.
However the animation does not play when the component is unmounted when the state goes to false.
I have the animation set as both, and I tried also applying a reverse animation (from 1 to 0) but it just ends up playing right after the first one and I end up with no square.
How can I make this fade animation play in reverse when the component disappears?
Edit:
I did not mention this is done in React.
My solution eventually was to just use a library for animation, which made this efortless.
I'm leaving the question up though in case others have vanilla solutions to the problem.
I've found sort of a hacky way to solve this. You might find something better later on, but for now, this works.
I've created a class .hide which sets opacity to 0 and visibility to hidden, which will be added to the box. The initial insertion animation is the same. But for exiting, I've applied a transition property to the box. When you click a second time, I've wrapped the setVisible() method in a setTimeout(), that has a delay timing the same as the transition duration for .hide.
This will allow the box to fade out first, and then the setVisible() method will be called.
If you don't want to use a setTimeout(), you can add an eventListener to the box for transitionend, and then call setVisible() once that is done.
Here's a fiddle: https://jsfiddle.net/32y8vjus/1/
PS: In the fiddle, I'm changing the background color to show that the transition happens before the box is removed. You can change that to opacity.
I am using a SVG image and animating the path of a diagram. It works fine. However, Once the image has been drawn I need to stop the iteration (stop from the image being redrawn). The code is found in this CODEPEN snippet attached here.
I tried removing infinite from animation in the CSS file, but the drawn image is being removed.
What I want to do is:
1.) Animate the image as shown in the code.
2.) Stop the animation from reanimating (this is because of the infinite attribute used in the animation)
3.) Once the image has been drawn, the image should remain the same unless the user refreshes the page.
Change this line:
animation: draw 10s infinite linear;
to this:
animation: draw 10s forwards;
The forwards fill mode works as follows: After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended
I want to change the opacity of a div (like 0.5) when the mouse is moving
and when the mouse doesn't move change the opacity to 1
is that possible ?
Thank's.
Yves
If you want to apply this to the element whenever the mouse is on the window, try this.
HTML
<div id="myDiv" style='width:100px;height:100px;background:rgb(255,0,0);'></div>
JS:
$(window).on("mousemove",function(e){
$("#myDiv").css({opacity:0.5});
clearTimeout(window.myTimeout);
window.myTimeout=setTimeout(function(){
$("#myDiv").css({opacity:1});
},100);
});
Basically, every time you move the mouse, you create a timeout but in the next movement, you cancel it. When you stop moving the mouse, eventually the timeout will execute and change the opacity of the element.
I've got a simple fiddle running a Tween animation using MooTools Fx.Tween and I can't seem to get the onComplete option to fire after the initial animation stops. For whatever reason, it always wants to fire in the middle. What am I doing wrong?
Fiddle
It seems you're doing it right.
I think there's a problem (basically, a 'conflict'.. you can use css transition OR js animation, not together) with -webkit-transition: all 1s linear 0 inside #bar . By commenting/removing it, it's working properly -> http://jsfiddle.net/vPuAR/
I have a vector circle and what to do the following:
I 'd like to animate it with tweenlite so it looks like a shockwave of an explosion. At first it fades in (from 0 to .5) and gets scaled and when it reaches half of the total animation time it fades out but it still gets scaled (hope you know what I mean).
Currently it looks horrible because I don't know how to get a smooth transition from part 1 to part 2 with TweenLite. My animation stops when reaching the end of part 1 and suddenly makes a jump to part 2.
Can someone help me out with this problem please? Thank you very much.:)
Total time of animation: .75 sec
total amount of scaling: 5
part 1 of 2:
TweenLite.to(blastwave, .375, {alpha:.5, transformAroundCenter:{scale:2.23},
onComplete:blastScaleFadeOut, onCompleteParams:[blastwave]});
part 2 of 2:
private function blastScaleFadeOut(object:DisplayObject, time:Number = .375, scaleVal:Number = 4.46) {
TweenLite.to(object, time, {alpha:0, transformAroundCenter:{scale:scaleVal},
onComplete:backgroundSprite.removeChild, onCompleteParams:[object]});
}
TweenLite applies an easing function to the tween transition to control the rate of change, and the default ease is a Quad.EaseOut (this means the rate of change in the tween will decelerate as it approaches the end using a quadratic function). This is why you see such a sudden change (or "jump"), because at the "joining point" of both tweenings (or parts, as you call them), the rate of change is quite different: the first tweening is at its slowest rate because it was reaching the end, while the other is at its quickest rate because it's just beginning.
I'm afraid the only way to really assure that there will be no "jump" (the rate will be the same at the end of part 1 and the beginning of part 2) would be to use a Linear.easeNone ease, which means no easing or acceleration (constant speed through the duration of the tween):
TweenLite.to(blastwave, .375,
{ease:Linear.easeNone, alpha:.5, transformAroundCenter:{scale:2.23},
onComplete:blastScaleFadeOut, onCompleteParams:[blastwave]});
//part 2 (put inside function)
TweenLite.to(object, time, {ease:Linear.easeNone, alpha:0, transformAroundCenter:{scale:scaleVal},
onComplete:backgroundSprite.removeChild, onCompleteParams:[object]});
But I'd recommend you to play around with the easing functions and their parameters and try to find a combination that suits your needs (Linear.easeNone is a little bit boring).
Hope this helps!
You should rethink how you manage those tweens. You should put the scaling of the sprite to one tween and then divide the alpha transitions into two separate tweens. By default, this won't work in TweenLite, because of it's Tween overwriting policies. However, you can change this either by using TimelineLite to chain your tweens, or add overwrite:OverwriteManager.NONE property to your tweens. These two solutions work:
Using TimelineLite to chain your tweens:
var timeline:TimelineLite = new TimelineLite();
timeline.insert(TweenLite.to(blastwave, 0.7, {scaleX: 7, scaleY: 7}));
timeline.insert(TweenLite.to(blastwave, 0.35, {alpha: 0.5}));
timeline.insert(TweenLite.to(blastwave, 0.35, {alpha: 0, delay: 0.35}));
Or just change the tween overwriting policy:
TweenLite.to(s, 0.75, {scaleX: 7, scaleY: 7, overwrite:OverwriteManager.NONE});
TweenLite.to(s, 0.35, {alpha: 1, overwrite:OverwriteManager.NONE});
TweenLite.to(s, 0.35, {alpha: 0, delay: 0.35, overwrite:OverwriteManager.NONE});
About TweenLite's OverwriteManager and tween overwriting.
On a side note, if you scale your explosion for 0.7 seconds, make the whole alpha in, alpha out process shorter, like 0.55 seconds. Looks better that way. :]