I switched from anime.js to velocity.js and try to defnine a simple animation with delayed opacity. For this I use the stagger.
But if I put a function for the stagger delay in it, I have no delayed stag animation. every elemenet is popping up but not animated and delayed.
In the first i tried what I have used for the animation with anime.js and the second one is directly from the github issue.
Here is also my jsbin:
https://jsbin.com/firetuh/edit?html,css,js,output
var greenElem = $('.pointGreen');
var yellowElem = $('.pointYellow');
var redElem = $('.pointRed');
setInterval(function() {
greenElem
.velocity({
fill: '#5cb83f',
opacity: 1
}, { stagger:
function(elem, index) {
return index * 500
}
});
yellowElem
.velocity({
fill: '#feb65c',
opacity: 1
}, { stagger:
function(elementIndex, element) {
return 1000 * (0.85 - Math.exp(-elementIndex/10));
}
});
redElem
.velocity({
fill: '#d43f3a',
opacity: 1
}, { stagger: 500 });
});
It looks like this could be either an intentional oversight or a bug with velocity. It looks like from the code that stagger only works if the first value passed in is a pre-canned effect like fadeIn or transition.slideLeftIn - it doesn't look like it is supported for other animation types. You could, in theory, achieve this on your own with something like
yellowElem
.each(function(index, element) {
$(element).velocity({
fill: '#feb65c',
opacity: 1
},{
delay: index * 500
});
});
Also, you will want to change your setInterval to setTimeout
Related
I've created a simple GSAP timeline animation to slide a fullscreen div over the entire viewport.
Because the page that it's going to be sliding in over has scrollable content on it, I've set the visibility to hidden, and pushed it off of the page. When I click the selected nav link, the class of "active" is added and the animation fires.
For some reason, when I reverse it, it removes the class immediately, even if I add something like this:
$(closeAbout).on('click', "#close", function () {
timeline.reversed() ? timeline.play() : timeline.reverse();
$("#teambio").removeClass('active');
});
I've included all of the timeline code below, in case that's helpful to anyone:
var closeAbout = $('#close');
var openAbout = $('#about');
var main = $('main');
var timeline = new TimelineMax({
paused: true,
reversed: true
});
timeline
.to( "main", 0.3, {
opacity: 0,
}, 0)
.to(".about", 1, {
y: "0%",
ease: Power4.easeInOut
})
.to(".blurb", 1, {
y: "0%",
opacity: 1,
ease: Power4.easeInOut,
delay: 0.5
}, 0)
.to("#close", 0.5, {
opacity: 1,
ease: Power4.easeInOut,
delay: 0.8,
}, 0);
$(openAbout).on('click', "#about", function () {
$("#teambio").addClass('active');
timeline.reversed() ? timeline.play() : timeline.reverse();
});
$(closeAbout).on('click', "#close", function () {
timeline.reversed() ? timeline.play() : timeline.reverse();
$("#teambio").removeClass('active');
});
All I want is for the class to be removed AFTER the timeline finishes, and for some reason nothing that I've tried is working.
Also, I know that I could probably structure and name all of this better than it appears here, but I'm both new to GSAP and also just trying to get this to work.
Any help and patience would be greatly appreciated.
With something like this:
timeline.reversed() ? timeline.play() : timeline.reverse();
$("#teambio").removeClass('active');
The .play() or .reverse() function will run and start animating. Once that function returns, the next line will run, removing the class. You wouldn't want the next line to wait for the animation to complete because then all of your JavaScript would be waiting for the animation to complete!
What you should do instead is make use of GSAP's onComplete callback:
var timeline = new TimelineMax({
paused: true,
reversed: true,
onComplete: function() {
$("#teambio").removeClass('active');
}
});
GSAP will fire that function every time the tween completes.
By the way, we recommend that you upgrade to GSAP 3 doing so is easy! The new formatting is quite nice once you're used to it.
I am trying to add a simple javascript progress bar to my website, I found a few scripts, but I always encounter the same problem - I am able to intialize the loader and set it to increment to a given value, but cannot do it in steps. Here is a simple example - https://jsfiddle.net/kimmobrunfeldt/k5v2d0rr/
At the end there is:
bar.animate(1.0);
How can i have it animated in steps? Lets say first to 50% then (after 2 secs) to 75% and then 100%. I've tried
bar.animate(0.5);
bar.animate(0.75);
bar.animate(1);
as well as:
setTimeout(function(){bar.animate(0.5)}, 2000);
setTimeout(function(){bar.animate(0.75)}, 2000);
setTimeout(function(){bar.animate(1)}, 2000);
but it always chooses the last (highest) value, instead of being animated in steps. Any advice appreicated.
bar.animate(0.5);
bar.animate(0.75);
bar.animate(1);
The above code runs simultaneously, and the last one overrides the others.
setTimeout(function(){bar.animate(0.5); console.log("animate")}, 2000);
console.log('timeout 1 called');
setTimeout(function(){bar.animate(0.75); console.log("animate")}, 2000);
console.log('timeout 2 called');
setTimeout(function(){bar.animate(1); console.log("animate")}, 2000);
console.log('timeout 3 called');
Soon as the first timeout is set, it doesn't wait for the delay before setting the next. Check the logs on the console to see what happens.
The problem is that those scripts run simultaneously. Do something like this (or something better):
bar.animate(0.5); // Number from 0.0 to 1.0
setTimeout(function () {
bar.animate(0.75);
}, 2000);
setTimeout(function () {
bar.animate(1.0);
}, 4000);
If you wanted to just animate the bar in sequences for the sake of it, you can do keyframes with CSS too.
The problem is that you're, essentially, queuing up all of your steps to happen simultaneously. Instead, you want to pass a callback to the animate function so when it finishes, you can tell it to move to the next step.
// progressbar.js#1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/
var bar = new ProgressBar.Line(container, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {
width: '100%',
height: '100%'
},
text: {
style: {
// Text color.
// Default: same as stroke color (options.color)
color: '#999',
position: 'absolute',
right: '0',
top: '30px',
padding: 0,
margin: 0,
transform: null
},
autoStyleContainer: false
},
from: {
color: '#FFEA82'
},
to: {
color: '#ED6A5A'
},
step: (state, bar) => {
bar.setText(Math.round(bar.value() * 100) + ' %');
}
});
// Keep track of the current value
var value = 0;
setTimeout(function increment() {
value += 0.1;
bar.animate(value, function() {
// Animation has completed, queue up another step
if (value < 1) {
setTimeout(increment, 500);
}
});
}, 1000);
#container {
margin: 20px;
width: 400px;
height: 8px;
position: relative;
}
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<div id="container"></div>
I'm new to jQuery and am trying to fill a div over a certain amount of time. When that time is up I want to clear the div - pretty simple, right?
Summary: I click a button and the div starts filling(using animate({ height: "100%"}, workPeriod * 1000) over workPeriod which is 20 seconds. Once it's filled I want the div to be emptied. The div fills without issue and then once it's complete it takes about 5-10 seconds before it clears using animate({ height: "0%"}, workPeriod * 5000)
$('#begin').click(function () {
var workPeriod = 20
var start = new Date($.now());
var end = new Date(start.getTime() + 1000 * workPeriod);
var workInterval = setInterval(function () {
var currentDif = Math.floor((new Date($.now()) - end) / 1000) * -1;
if (currentDif < 0) {
$('#session-time').animate({
height: '0%'
}, 0);
clearInterval(workInterval);
//I want the animation above to occur instantly but it's happening several seconds after
//the clearInterval call
} else {
$('#session-time').animate({
height: '100%'
}, workPeriod * 1000);
}
}, 1000);
Question: How can I make the div empty immediately once it's full instead of waiting the 5-10 seconds?
btw, I'm very new to jQuery and still very much a beginner when it comes to programming so any advice will be well received
So, if you want to call another function/animation once your animation is complete, that functionality is already built into jQuery's animate function.
From the jQuery documentation:
$( "#clickme" ).click(function() {
$( "#book" ).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function() {
// Animation complete.
});
});
I tried to get it to work with your code posted above, but I couldn't get your timer stuff to work. Nevertheless, I made this codepen, to show that the animation complete function does work when your complete function is another animation.
I am learning how to schedule animations via JavaScript, especially with the help of jQuery. I tried to blink some h1 tags, but the animation doesn't seem to run fluently. It stops for a while and then go on.
The core animation code:
function animSlideHeading() {
$('.slide h1').animate({
opacity: .6
}, 500, 'swing', function() {
$('.slide h1').animate({
opacity: 1
}, 500, 'swing', animSlideHeading);
});
}
See this JSBin.
There are several elements matching the selector $('.slide h1'), so the callback is called multiple times, once for each element that is animated, and animSlideHeading runs more and more times the longer it goes, messing it up.
To solve it, you can use promises that resolve when the animations have completed for all the elements in the collection collectively
function animSlideHeading() {
$('.slide h1').animate({
opacity: 0.6
}, 500, 'swing').promise().done(function () {
$(this).animate({
opacity: 1
}, 500, 'swing').promise().done(animSlideHeading);
});
}
animSlideHeading();
FIDDLE
I'm trying to apply a CSS transition to an element, but at some point before it completes, remove the transition entirely and start another one.
This question answers how to stop a transition in its tracks, but I modified the jsFiddle there to illustrate the issue:
http://jsfiddle.net/zXVLd/
var $div = $('div');
$div.click(function(){
$div.css({
left: 0,
transition: 'none'
});
$div.transit({
top: 600,
},5000);
});
function complete(){
$div.css('backgroundColor', 'blue');
}
$div.transit({left: 600}, 5000, 'linear', complete);
What I want to happen is for the box to reset its position and move down when clicked, and for the completed handler on the first transition to not fire.
What does happen is the box resets its position when clicked, but doesn't move down until the first transition completes (even though the motion from the first transition is no longer happening). The completed handler still fires on the first transition as well.
I've updated your fiddle with the clearQueue method: http://jsfiddle.net/zXVLd/1/
var $div = $('div');
$div.click(function(){
$div.clearQueue().css('left', $div.css('left')).transit({
top: 600,
},5000);
});
function complete(){
$div.css('backgroundColor', 'blue');
}
$div.transit({left: 600}, 5000, 'linear', complete);
That does the trick. See http://api.jquery.com/clearQueue/ for more information on the clearQueue method.
To do this kind of animations, you can try to use GSAP's TweenLite. It's incredible what you can achieve with it. http://www.greensock.com/jump-start-js/ If you include this on your page and add the following code:
div.bind('click', function(e) {
// note that you can animate two directions, from and to
TweenLite.from(div /*element*/, 0.2 /*easing in seconds*/, {
// the css, but for positioning elements you can also use x and y.
x: 600,
easing: linear,
onStart: function() {
Stuff you want to do before the animation
},
onComplete: function() {
Stuff you want to do after animationg
}
});
});
The plugin which you use is using queue. So, it is just enough to call $div.dequeue(); I.e.
var $div = $('div');
$div.click(function(){
$div.dequeue();
$div.css({
left: 0,
top: 0,
transition: 'none'
});
$div.transit({
top: 600,
},5000);
});
function complete(){
$div.css('backgroundColor', 'blue');
}
$div.transit({left: 600}, 5000, 'linear', complete);
fiddle -> http://jsfiddle.net/krasimir/zXVLd/2/