I got a div with an image inside it using query
$('#super').animate({
left:'150px'
}, {
duration: 10000,});
What iam trying to figure out is how to stop and start animation. So for example it will start to move left 150px and then will stop for 2 seconds and then move left 300px.
Like this:
$('#super').animate({left : '-=150'}).delay(2000).animate({left : '-=300'});
Demo: http://jsfiddle.net/E7akr/
(You can add duration, easing and complete settings to the .animate() calls as desired - obviously the key thing here is the .delay() method.)
Related
I would like to have a clipping animation with the SVG clipping path that would hide the first section and show the second while animating using fullPage.js.
So this is similar to this question:
fullpage JS animation on section
yet I would like to have controlled animation with specific duration (so the transition is smooth).
What I know or have tried now:
FullPage.js onLeave and afterLoad callbacks will have to be used. If I prevent scrolling in onLeave event I can call silentMoveTo only in afterLoad event yet I need what's in the next two points.
Two sections cannot be active (CSS class) with fullPage.js (so for example I would change the section 2 opacity from 0 to 1 as the animation reveals it, while section 1 would be hidden vice versa and the background clipping path would move to top to hide the section 1 image (SVG).
I've tried to animate the clipping path (have similar working example) yet of course the content of the section 2 below is not displayed. Calling silentMoveTo to show section 2 after the animation is not usable so it will have to be synchronized with say 50% of animation duration passed.
What would be the best approach? I have to use fullPage.js (by request, built in WordPress theme used). Ideally I plan to use a timeline in GreenSock javascript library with a callback on animation end to properly signalize fullPage.js main object that active section should now be #2.
ADDED: you can see one approach of using transitions with GreenSock here:
https://youtu.be/gE-Yuu2eEio?t=1694
yet this is the animation AFTER the second section loads. I want to have an animation of the first section contents that at the same time reveals the second section (I am aware of Fading Effect fullPage.js extension, not the solution to this).
So I guess I have to answer this myself.
Short answer: it's not possible to show two sections at the same time using fullPage.js as (it is) designed.
Long answer: you can at least mimick some kind of interaction e.g. longer animation during first section and then quickly show the second one. Like this (you cannot run this code due to removing unnecessary parts for discussion):
var fullPageOBj = new $('#fullpage').fullpage({
...
onLeave: function (origin, destination, direction) {
dir = direction;
...
if(origin == 1 && destination == 2){
$.fn.fullpage.setAutoScrolling(false);
document.body.style.overflow = "hidden";
...
TweenMax.to(bSvg, 2.7, { }, "section1");
...
}
$.fn.fullpage && $.fn.fullpage.setLockAnchors && $.fn.fullpage.setLockAnchors('false');
},
afterLoad: function (origin, destination) {
console.log("aL - origin: " + origin + ", destination: " + destination + ", direction: " + dir);
if(destination == 1){
$("vc-section1").addClass("active");
...
}
if(destination == 2){
TweenMax.to(bSvg, 0, { display: "block", onComplete: Delay2, delay: 3.2});
function Delay2() {
$.fn.fullpage.setAutoScrolling(true);
$.fn.fullpage.silentMoveTo(2);
}
}
}
}
The idea above is that the afterLoad event in fullPage.js is spawned practically immediately after onLeave event so you have to make sure to wait for animation in onLeave event function completes before afterLoad functions take place. So the above code includes spawning the Delay2 function that runs after an animation completes. The timing in afterLoad function is set to respect the time for an animation duration in onLeave function.
You'll have to play with the timings. Default transition time before sections in fullPage.js appears to be 700 ms.
The last idea would probably be to move animation to Section 2 - but the page is already without objects in Section 1 (to animate in transition to Section 2).
You're welcome to add to discussion.
I have a bouncing arrow on my website that I created with Jquery and setInterval, like this:
bouncing = setInterval(function() {
$("div").animate({
top:"30px"
},100,"easeInCubic",function() {
$("div").animate({
top:"0px"
},100,"easeOutCubic");
});
console.log("bounced");
},200);
You can see this in place in a codepen here: http://codepen.io/mcheah/pen/wMmowr
I made it run faster than i needed because its easier to see the issues quicker. My issue is that after leaving the interval running for a few seconds, you'll notice that instead of bouncing back up or down immediately, the bouncing element will stop for half a second and then just hang there, before beginning again. If you leave it running even longer (20 seconds) and then clear the interval, you'll notice that it takes a few seconds to stop bouncing.
My questions are these:
Why does the bouncing go out of sync occasionally?
Why does the clear interval take a while to clear if it's been repeating for a while?
Is there a better way to have a bouncing arrow? Are CSS transitions more reliable?
Thanks for your help!
Your are trying to perfectly coordinate a setInterval() timer and two jQuery animations such that the two come out perfectly coordinated. This is asking for trouble and the two may drift apart over time so it is considered a poor design pattern.
If, instead, you just use the completion of the second animation to restart the first and make your repeat like that, then you have perfect coordination every time.
You can see that here in another version of your codepen: http://codepen.io/anon/pen/NxYeyd
function run() {
var self = $("div");
if (self.data("stop")) return;
self.animate({top:"30px"},100, "easeInCubic")
.animate({top:"0px"}, 100, "easeOutCubic", run);
}
run();
$("div").click(function() {
// toggle animation
var self = $(this);
// invert setting to start/stop
self.data("stop", !self.data("stop"));
run();
console.log("toggled bouncing");
});
It's not a good idea to mix animate() with timers this way. There's NO chance you can synchronize something like this. And there's no need to. You can simply append a function into the animation queue, look here: https://stackoverflow.com/a/11764283/3227403
What animate() does is put an animation request into a job queue which will be processed later, when the right time comes. When you break the interval the stuff that accumulated in the queue will still be processed. There's a method to clear the queue and stop all animation immediately.
The JQuery animation functions actually manipulate CSS, and there is nothing beyond it in HTML. Another option would be using a canvas, but it is a completely different approach and I wouldn't recommend it. With JQuery's animation your already at the best choice.
This is a simple solution to your problem:
function bounce()
{
$("div")
.animate({
top: "30px"
}, 100, "easeInCubic")
.animate({
top: "0px"
}, 100, "easeOutCubic", bounce); // this loops the animation
}
Start bouncing on page load with:
$(bounce);
Stop bouncing on click with:
$("div").click(function() {
$("div").stop().clearQueue().css({ top: "0px" });
// you want to reset the style because it can stop midway
});
EDIT: there were some inaccuracies I corrected now. The running example is on codepen now.
If you want to use javascript for animation you can use something better like the greensock tween library
http://greensock.com/docs/#/HTML5/GSAP/TweenMax/to/
something like this:
var tween = TweenMax.to($("div"), 100, {y: "100px", yoyo: true, repeat: -1});
You could wrap your interval code with:
if(!$("div").is(":animated"))
This will initiate your animation only if your previous one is finished.
The reason why it was bouncing weird is that your animations are queued.
You can check how it works now:
http://codepen.io/luminaxster/pen/XKzLBg
I would recommend using the complete callback when the second animation ends instead and have variable to control a bounce recursive call in this version:
http://codepen.io/luminaxster/pen/qNVzLY
I am running this animation on $(window).scroll() and it works fine for the most part.
$('#el').animate({ left: toMove }, 500);
The problem is if the user scrolls too fast, two animations will fire and the second animation will fire before the first one has moved far enough. How can I make sure there is only one animation at any given time and then the other animations will follow? I need the element to animate left FULLY any other animations run but I need them all to run. I tried using .queue() but couldn't find the right solution with it.
You could use the stop function like this to smooth things up:
$('#el').stop(true, false).animate({ left: toMove }, 500);
The stop function, when calling like that will clear the animation queue for any waiting animation, as well as stop the current animation if any.
Edit
If you want the animation to end before animating again you just need to call .stop(true, true) instead
When I use jQuery .animate() with a bootstrap progress bar to set progress percentages, it only works normal the first time I use it.
I've made a JSFiddle here: http://jsfiddle.net/43bqP/
When it just had to go to 50, it somehow first goes above 500 and then animates back to 50.
How can I fix this?
What about to calculate it into pixels? Snippet of code:
...
var stepBy = $("div.progress").width() / steps.length;
...
$("div#update div.progress div.progress-bar").animate({
width : (stepBy + (stepBy * step))
}
...
JSFiddle with full code.
The problem is due to
duration : pauseBetweenSteps / 2
and the alert() method called when all the steps have been executed, but the animation is still in act.
I'm not sure to understand why you're setting duration like this. Try leaving the default (400) by unsetting it, and add a setTimeout by 500ms around the alert("done"), to be sure the animation has ended.
Working eg. http://jsfiddle.net/eEE87/
So here is the scenario. I'm trying to make a infinite image carousel, and everytime it will show an image that has a class of special .special I want to slow down the animation duration or the scrolling of the animation. So users can see the special image longer. Here is my code.
$photoGalleryList.animate({
left : '-' + (computedWidth) + 'px'
},
{
duration : 10000,
easing : 'linear',
step : function(now, fx) {
if(visibleSpecialImage()) {
// SLOW ANIMATION DURATION
// Tried setting fx.options.duration still no effect
}
}
});
I'm not sure if my approach is right (doing it with step), jquery animate() documentation says
step
Type: Function( Number now, Tween tween )
A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.
I'm not sure if I understood the documentation clearly, But base on what I read it's possible using step, I tried googling my problem and never found any concrete answer So now I'm stackoverflowing and hopefully solve this problem. Thanks