We Keep Coding

How can I change the speed (duration) of an anime.js event using a slider?

I am using anime.js to animate an element that is being bounced back in forth from the edges of its container. I want to be able to adjust the speed of this animation using a range slider that I have elsewhere on the page.
My problem is that while the duration is adjusted, it appears that the slider instantiates completely and does not continue animating to where it originally was suppposed to. I want it to go from the far left to the far right, but when I resize it the animation will only go from the place where it was resized to the end of the container.
These have been my attempts when calling the onchange method of my slider.
function adjustSpeed() {
alternate.duration = 300;
}
and
function adjustSpeed() {
var alternate = anime({
targets: '#alternate .el',
translateX: width,
direction: 'alternate',
loop: true,
duration: 300,
easing: 'linear',
});
}
Any help would be very much appreciated.

I just came across this issue and I've found a better yet not perfect solution. AnimeJS has another static speed property that is by default set to 1. If you change this speed, the animation speed changes, though the animation "jumps" and it doesn't look smooth.
For example, if you want the speed to be 0.5x the original speed, set anime.speed = 0.5.
I'll update this answer if I come up with a better solution.

When you changed speed or duration, you have to stop and remove current animation. After that, you have to start new animation with new duration value.
Here is example of bouncing from left to right element.
var duration = 500
const animateBLS = () => {
const el = document.getElementById('dot')
anime.remove(el)
animation = anime({
targets: [el],
left: '100%',
direction: 'alternate',
loop: true,
easing: 'linear',
duration: duration
});
}
And there is the code for running new animations, called when durations is changed. It's finish current animation with new speed value, and start our main animation functions "animateBLS"
const el = document.getElementById('dot')
if(animation.reversed) {
anime.remove(el)
animation = anime({
targets: [el],
left: '0%',
direction: 'normal',
loop: false,
easing: 'linear',
duration: duration,
complete: () => {
animateBLS()
}
});
} else {
anime.remove(el)
animation = anime({
targets: [el],
left: '100%',
direction: 'normal',
loop: false,
easing: 'linear',
duration: duration,
complete: () => {
animation = anime({
targets: [el],
left: '0%',
direction: 'normal',
loop: false,
easing: 'linear',
duration: duration,
complete: () => {
animateBLS()
}
});
}
});
}

A dirty solution:
Manage frame manually by anime.tick combining with requestAnimationFrame, here're the demo:
https://codesandbox.io/s/anime-js-speed-adjustment-lm0ui?file=/src/index.js
The code is basically self-explained, if you have any further question, let me know.

jQuery animate left over time

I'm trying to make a div slide to the right by increasing the position left I want it to slowly go from the left hand side to the right and then loop back to the start. At the moment I'm just trying to animate the position so it doesn't jump instantly-
$('#pig').css('left', 200).animate(300);

The syntax is
$('#pig').animate({left: 200}, 300);
jQuery.animate documentation
To add animations in a queue you can either just chain them
$('#pig').animate({left: 200}, 300).animate({left: 0}, 300);
FIDDLE
or use the callback argument, or use jQuery's queue to set up as many animations as you'd like in a queue
$('#pig').queue(function() {
$(this).animate({left: 200}, 300);
$(this).animate({left: 0}, 300);
}).dequeue();
FIDDLE
or to make it recursive, you can use a combination of both
(function ani() {
$('#pig').queue(function() {
$(this).animate({left: 200}, 300);
$(this).animate({left: 0}, 300, ani);
}).dequeue();
}());
FIDDLE

Adeneo's answer is correct, but you also asked to loop back to the start. Assuming you want the div to go back to its original position, you need to chain another animation like this:
$('#pig').animate({left: 200}, 300, function() {
$('#pig').animate({left: 0}, 300);
});

setTimeout(function () {
$('#pig')
.css('left', 200)
.animate(300)
}, 1000)

animation execute before direction up

I using plugin one pagescroll fullpage.js.
How to use animation before direction up.
onLeave: function(index, nextIndex, direction){
if (index == 4 && direction == 'up'){
$('.nave-space').tween({ left:{
start: 100,
stop: 200,
time: 0,
units: 'px',
duration: 5,
// effect:'bounceOut' },
backgroundSize:{
start: '10% 10%',
stop: '100% 100%',
time: 0,
duration: 10,
effect:'easeInOut',
}
}); $.play();
}
}
I need help.

What you are looking for is how to chain multiple animations one after the other. I am not sure about the specifics about this plugin but generally the idea is that you can queue animations() or you can add one animation in the complete function of another animation.
You can find more about this here:
jQuery .animate()
Multiple sequence of animations

It is not possible right now.
There's an open issue about it in the github repository of the plugin.
It would require an beforeLeave callback.

mootools "fx.styles" and "addevent" equivalent in jquery

having a lot of trouble finding the equivalent of this code in jquery
var reveal = new Fx.Styles(div, {
duration: 200,
transition: Fx.Transitions.Quad.easeIn,
wait: true,
fps: 24
});
reveal.addEvent('onStart', function(){
tt_has(true);
});

I think it would become:
$(div).animate( {left: 500, top: 500}, 200, 'linear');
tt_has(true);
There is no 'start' event in jquery animations (they start automatically), so we call tt_has(true) right after the call to .animate(),
More info here.
Hope this helps. Cheers

fadeOut() and slideUp() at the same time?

I have found jQuery: FadeOut then SlideUp and it's good, but it's not the one.
How can I fadeOut() and slideUp() at the same time? I tried two separate setTimeout() calls with the same delay but the slideUp() happened as soon as the page loaded.
Has anyone done this?

You can do something like this, this is a full toggle version:
$("#mySelector").animate({ height: 'toggle', opacity: 'toggle' }, 'slow');
For strictly a fadeout:
$("#mySelector").animate({ height: 0, opacity: 0 }, 'slow');

Directly animating height results in a jerky motion on some web pages. However, combining a CSS transition with jQuery's slideUp() makes for a smooth disappearing act.
const slideFade = (elem) => {
const fade = { opacity: 0, transition: 'opacity 400ms' };
elem.css(fade).slideUp();
};
slideFade($('#mySelector'));
Fiddle with the code:
https://jsfiddle.net/00Lodcqf/435
In some situations, a very quick 100 millisecond pause to allow more fading creates a slightly smoother experience:
elem.css(fade).delay(100).slideUp();
This is the solution I used in the dna.js project where you can view the code (github.com/dnajs/dna.js) for the dna.ui.slideFade() function to see additional support for toggling and callbacks.

The accepted answer by "Nick Craver" is definitely the way to go. The only thing I'd add is that his answer doesn't actually "hide" it, meaning the DOM still sees it as a viable element to display.
This can be a problem if you have margin's or padding's on the 'slid' element... they will still show. So I just added a callback to the animate() function to actually hide it after animation is complete:
$("#mySelector").animate({
height: 0,
opacity: 0,
margin: 0,
padding: 0
}, 'slow', function(){
$(this).hide();
});

It's possible to do this with the slideUp and fadeOut methods themselves like so:
$('#mydiv').slideUp(300, function(){
console.log('Done!');
}).fadeOut({
duration: 300,
queue: false
});

I had a similar problem and fixed it like this.
$('#mydiv').animate({
height: 0,
}, {
duration: 1000,
complete: function(){$('#mydiv').css('display', 'none');}
});
$('#mydiv').animate({
opacity: 0,
}, {
duration: 1000,
queue: false
});
the queue property tells it whether to queue the animation or just play it right away

Throwing one more refinement in there based on #CodeKoalas. It accounts for vertical margin and padding but not horizontal.
$('.selector').animate({
opacity: 0,
height: 0,
marginTop: 0,
marginBottom: 0,
paddingTop: 0,
paddingBottom: 0
}, 'slow', function() {
$(this).hide();
});