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.
Related
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.
var globaltest = 400;
$('.Quick-Sidebar-Toggle').click(function() {
var QSWSW = $(".Quick-Sidebar-Wrapper").width() == globaltest ? "0" : globaltest;
alert(globaltest + ", " + QSWSW);
$('.Quick-Sidebar-Wrapper').animate({
width: QSWSW + "px"
}, {
duration: 1000,
easing: 'easeOutBounce'
});
});
$('.Quick-Sidebar').bind('resize', function(e) {
globaltest = $(this).width();
});
The variable is changing upon DIV resize via a test I implemented;
$('.PannelLogo').click(function(e) {
alert(globaltest);
});
However upon checking upon clicking to toggle the quick access side panel once again via;
alert(globaltest + ', ' + QSWSW);
If I haven't resized it will say '400, 0' however if I do resize it will say the pixel value of the width twice ie '520, 520'
Attempted a JSFiddle here but didn't work... You can see the live version here where you can click the red square in the top-right corner to open, see the alert, resize, click the logo to see what the variable is however upon clicking to hide again, the variable which is shown in the alert is wrong...
Update I
Basically upon resize my script sets globaltest so for var QSWSW = $(".Quick-Sidebar-Wrapper").width() == globaltest ? "0" : globaltest; it basically means if width is not 0 then it should be and visa versa for opening it back up.
This works if you don't resize however doesn't if you do resize...
Update II
I'm still not near solving this problem and have tried several dozen attempts including the following;
$('.Quick-Sidebar-Toggle').click(function() {
if (QSWSCW == globaltest) {
QSWSW = 0;
} else {
QSWSW = globaltest;
}
$('.Quick-Sidebar-Wrapper').animate({
width: 'toggle'
}, {
duration: 1000,
easing: 'easeOutBounce'
});
});
You don't need to predefine the width:
$('.Quick-Sidebar-Toggle').click(function() {
$('.Quick-Sidebar-Wrapper').animate({
width: 'toggle'
}, {
duration: 1000,
easing: 'easeOutBounce'
});
});
...Just toggle it!
I am looking to gain a effect on my page similar to host-gators live chat thing, I've looked here and this is similar to what I'm trying to achieve but there is one problem the div like starts at height:1px and slides the div down to its original height, what I want is for the divs height to always be the same and it slide down from the top of the page and not the top of the div, I hope this explains it well.
What you mean is a blind-effect. Take a look here: http://fiddle.jshell.net/cZQTR/
I've written a small plugin for that fx:
jQuery.fn.blindToggle = function (duration, easing, complete) {
return this.animate({
marginTop: parseFloat(this.css('marginTop')) < 0 ? 0 : -this.outerHeight(true)
}, jQuery.speed(duration, easing, complete));
};
Update
jQuery.fn.blindUp = function (duration, easing, complete) {
return this.animate({
marginTop: -this.outerHeight(true)
}, jQuery.speed(duration, easing, complete));
};
jQuery.fn.blindDown = function (duration, easing, complete) {
return this.animate({
marginTop: 0
}, jQuery.speed(duration, easing, complete));
};
demo
I'm trying to figure out why this script is not working.
What I have is a div hiding behind another div and need it to animate up after a user scrolls on the page.
This is my script:
$(document).scroll(function(){
var top = $(document).scrollTop();
if (top > 50) {
$('#merch').animate({ bottom: 200 },
{duration: 1000, easing: 'easeOutBounce'});
}
else {
$('#merch').slideDown();
}
});
$(document).scroll(function(){
var top = $(document).scrollTop();
if (top > 50) {
$('#merch').animate({ top: '500px' },
{duration: 1000});
}
else {
$('#merch').slideDown();
} });
I'm getting an error that on the easing value you are passing, might want to look into that.
animate values need to be in quotes with a px value
make sure merch has 'position: relative;' in the CSS. without it, the jQuery can't move the element
There is no onscrollcomplete function, but you can monkey wrench one together:
var int;
$(window).scroll(function(){
clearTimeout(int);
int = setTimeout(function(){
//animation here
}, 300);
});
Wait 300ms then fire the animation function to pull the div to the top of the page.
http://jsfiddle.net/E6cUF/
The idea is that after the page finished loading the grey box slides left from behind the green box, if possible bounce a little.
Edit: made a new version based on changes people made to the jsfiddle and the comment from Nicola
http://jsfiddle.net/RBD3K/
However the grey one should be behind the green one and slide from right to left so it appears
To have it bounce you are missing two things i think:
1) you need to load jquery UI.
2) put the bounce effect after the animate effect:
$('#test').click(function() {
var $marginLefty = $('.left');
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() :
0
}).effect("bounce", { times:5 }, 300);
});
updated fiddle: http://jsfiddle.net/nicolapeluchetti/E6cUF/4/
Try this . Not sure if this is what you want.
$('#test').click(function() {
var $marginLefty = $('.left');
var $marginRight = $('.right');
$marginLefty.animate({
marginLeft: 0
},{ duration: 200, queue: false });
$marginRight.animate({
marginLeft: 100
},{ duration: 200, queue: false });
});
Update: from your updated fiddle,add for .right position :absolute;z-index:1000 as css
http://jsfiddle.net/E6cUF/11/