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.

Chaining transition in javascript animation

I have a list that looks like this :
Now I am having a requirement to animate the box which is clicked to the center of the screen, wait for .5 second and then move to the top as heading.
I have been trying out different option in velocity.js but unable to figure out how to do this.
function animateobject(objName, obj) {
debugger;
obj = $(obj);
var p = obj.offset();
var element = $('#' + objName);
element.html(obj.closest('.connectPan2List').find('p').html());
element.css('top', p.top);
element.css('left', p.left);
element.velocity({ top:'50%', left:'50%' }, { duration: 500, easing: "linear" })
.velocity({ top: '10px' }, {
duration: 500, easing: "linear", complete: function () {
alert('');
}});
}
Here I have been trying to transfer the element to the center of the screen and then move up to the top, but it seems I am unable to get it properly. Can anyone help me on this please.

How to stop Spin.js from other js file

i need help
Actually in my work i need to implement spin.js and block UI in a jqgrid. This is ok when i put the code in the same file and function, but i want to call a method from other JS file, and hear is where my problem. The spin.js and block UI start, then block UI stop with unblock but the spin.js still running.
Here is my code:
In BeforeRequest() in jqgrid i call one method
$.pui.common.loaderAnimationON("pane-content");
this method have this code
loaderAnimationON: function (div) {
var opts = {
lines: 13, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent in px
left: '50%' // Left position relative to parent in px
};
var target = document.getElementById(div);
var spinner = new Spinner(opts).spin(target);
$.blockUI({
blockMsgClass: "gridProjectsLoader",
message: null
});
return spinner;
},
in gridComplete() i call other method
$.pui.common.loaderAnimationOFF("pane-content");
this method have this code
loaderAnimationOFF: function (div) {
var target = document.getElementById(div);
var spinner = $.pui.common.loaderAnimationON();
spinner.stop(target);
$.unblockUI();
}
Anyone can help me?
Thanks guys

You should use the same object to start and stop it. You can use global variables anywhere (just another .js)
Check this jsFiddle. It's stop spinner after 3 secs.
http://jsfiddle.net/YX7dy/8/
spinner=loaderAnimationON('Spin');
setInterval(function(){spinner.stop();},3000);

How do I modify the jQuery aToolTip plugin to "flip" to left when approaching the right margin?

I am using aToolTip and need to have the tooltips flip from a normal lower left placement, to a right placement to keep them from going off the page.
I did a little research, and with a little help, I was able to modify the code to a little to allow for a working "flip" on a single image. The image is referred to as hat_icon, and that code is below:
$(function() {
//$("#wrap a[title]").tooltips();
//$("#page-wrap a[title]").tooltips();
// $('a').aToolTip({
// $('a').aToolTip({
$("a:not(.tooltipquestion, .accountnav, #hat_icon)").aToolTip({
// no need to change/override
closeTipBtn: 'aToolTipCloseBtn',
toolTipId: 'aToolTip',
// ok to override
// fixed: false, // Set true to activate fixed position
fixed: false, // Set true to activate fixed position -- chris/peter 12/9
clickIt: false, // set to true for click activated tooltip
// inSpeed: 200, // Speed tooltip fades in
inSpeed: 400, // Speed tooltip fades in --chris/peter 12/9
outSpeed: 400, // Speed tooltip fades out
tipContent: '', // Pass in content or it will use objects 'title' attribute
toolTipClass: 'defaultTheme', // Set class name for custom theme/styles
xOffset: 15, // x position
yOffset: -50, // y position
onShow: null, // callback function that fires after atooltip has shown
onHide: null // callback function that fires after atooltip has faded out
});
jQuery('a.accountnav,#hat_icon').hover(function(){
setTimeout(function(){
jQuery('#aToolTip').css({'border-radius':'12px 0 12px 12px'});
}, 1000);
}, function(){
setTimeout(function(){
jQuery('#aToolTip').css({'border-radius':'12px 12px 12px 0'});
},500);
});
jQuery('a.accountnav,#hat_icon').aToolTip({
fixed: false,
xOffset: -250,
yOffset: -50,
});
jQuery('#hat_icon').aToolTip({
fixed: false,
xOffset: -250,
yOffset: -80,
});
});
I know there is a way to detect collision using something like position: (collision: "flipfit flip"), but I do not know how to implement it properly. Can you help me?

To flip
Find this:
$('#'+settings.toolTipId).css({
top: (el.pageY - $('#'+settings.toolTipId).outerHeight() - settings.yOffset),
left: (el.pageX + settings.xOffset)
});
And replace by this:
A_TOP = (el.pageY - $('#'+settings.toolTipId).outerHeight() - settings.yOffset);
if(A_TOP<0){
A_TOP = 40;
}
A_LEFT = (el.pageX + settings.xOffset);
WindowWidth = ($(window).width()-$('#'+settings.toolTipId).outerWidth());
if(A_LEFT>WindowWidth){
A_LEFT -= $('#'+settings.toolTipId).outerWidth();
}
$('#'+settings.toolTipId).css({
top: A_TOP,
left: A_LEFT,
whiteSpace:"nowrap"
});

carouFredSel: Show partial items?

I'm using carouFredSel to create a vertical carousel. Everything works great, except I would prefer if partial items would be shown at the bottom, cropped, rather than being hidden. This way it would indicate to users that there are additional items that can be scrolled.
I have been reading the documentation, but so far can't tell if what I am after is possible.
Check out the JSFiddle to see what I mean. Watch the bottom most item on the page.
Javascript
$("ul").carouFredSel({
direction: "up",
align: "top",
width: 100,
height: "100%",
items: {
visible: "variable",
width: 100,
height: "variable"
},
scroll: {
items: 1,
mousewheel: true,
easing: "swing",
duration: 500
},
auto: false,
prev: {
button: ".prev",
key: "up"
},
next: {
button: ".next",
key: "down"
}
});​

This is a bit of a hack, but it works. Set the height of the scroller (in this case, ul) to 150% and the parent element (in this case, body) to overflow: hidden. Now the bottom most element is off screen.
Javascript
$("ul").carouFredSel({
height: "150%"
});
CSS
body {
overflow: hidden;
}

Ha, caroufredsel supports it, no hacks required :))! You can achieve it with the following option:
items: {
visible: '+1'
}
EDIT: This suffers from a problem though. If number of whole visible items + 1 == number of all items, then carousel cannot be scrolled even though one image is visible just partially. You can overcome this issue by setting e.g. minimum: 1 but it is not always a way to go (e.g. if number of images is dynamic and you don't want scroll handlers to appear when there is just one or two images.).

The next not visible element in the vertical carousel is pushed down by the margin.
I'm currently overriding it by the following function:
function cropCarousel () {
var visibleElements = this.triggerHandler("currentVisible"), // show all visible
$lastElement = $(visibleElements[visibleElements.length - 1]); // get the last one
$lastElement.css('margin-bottom', '30px'); // amend the margin
};
cropCarousel.call($('#your_carousel_id'));
The downside of it that you will have to call this function on carousel init and on up and down events. But it works ;)