Run function just before jQuery animation ends - javascript

I have a scroller that animates scrolling using prev/next buttons. The duration of the animation is calculated based on the distance moved, so the duration is variable.
$c.animate({ scrollLeft: scrollLeft },
duration, 'easeInOutExpo', function () {
if (showPrev === 0) $s.attr("data-prev", showPrev);
if (showNext === 0) $s.attr("data-next", showNext);
});
After the animation is done, I want to refresh the user interface (the buttons), which you can see is done by updating two data attributes.
To date, I've tried two different options:
1. Update the data attributes before the animation
I use a CSS transition delay to make updates happen later but cannot fully co-ordinate it with the variable duration of the animation - sometimes it can be way out.
2. Update the data attributes after the animation
I attach the update function directly after the animation, which works, but there is an obvious delay after the animation is finished before the updates kick in.
Neither is perfect.
Ideally what I would like to do is kick off the function just before the scroll animation is finished - so if the scroll duration is 1s I would like to update the attributes at duration - 0.2s (0.8s).
This seems entirely possible given that I have full control of the duration.
What I don't know is how to implement this using jQuery - possibly kick off two tasks in parallel?
I'm not a jQuery expert by any stretch of the imagination so any help would be appreciated.

Please try with this code
$c.animate({ scrollLeft: scrollLeft },
duration, 'easeInOutExpo', function () {
if (showPrev === 0) $s.attr("data-prev", showPrev);
if (showNext === 0) $s.attr("data-next", showNext);
time = setTimeout(function () {
//keep your code here
}, duration-0.2s);
});
duration-0.2s => make it correct, i just mentioned it as an example.

Related

How to set the animation duration to match the page load time on the fly?

For example, I have a preloader div which is hidden with addClass on $(window).load() - fairly routine stuff.
Now, in addition to this I want to include a loading bar or similar with a css transition within the preloader - also fairly easy assuming I have a fixed duration that would hopefully accommodate the majority of load times.
The issue now is that I want the animation to complete every time, regardless of page load time - how do I set the animation duration to match the page load time on the fly?
For anyone looking for this the solution, as described by sideroxylon would be something along these lines:
// Kick off animation with long duration on doc ready
$(document).ready(function() {
$('#progress-bar > div').animate({'width':'100%'}, 40000);
});
// When the page has loaded clearQueue and stop the animation,
// then resume with much shorter duration to complete
$(window).load(function() {
$('#progress-bar > div').clearQueue().stop();
$('#progress-bar > div').animate({'width':'100%'}, 500);
});
Hope this is of use!

Performance drop when fading element based on scrollTop

seen afew websites with this effect, however it seems to drop the framerate in my attempt. I basically want to change the opacity of an element the more the user scrolls.
$(window).scroll(function(event){
$("#responsive-slider-with-blocks-1").css("opacity", 1 - $(window).scrollTop() / 1500);
}
Is there a better way to do this? (would be ace just CSS, but not possible).
I'm really not a fan of binding to the scroll event.
Edit:
Due to changing the opacity on an element which covers the entire viewport could be why the framerate drops so much. Would fading in black div covering the element maybe not drop the framerate so much?
Scroll events fire so fast, you're right, every little optimization will help. The docs for the scroll event have advice along those lines:
Since scroll events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using requestAnimationFrame, setTimeout or customEvent...
You can adapt the example they have there to your purposes (and I'm trying to leave out jquery on purpose to remove the overhead):
var last_known_scroll_position = 0;
var ticking = false;
var responsiveSlider = document.getElementById('responsive-slider-with-blocks-1');
function doSomething(scroll_pos) {
responsiveSlider.style.opacity = 1 - scroll_pos / 1500;
}
window.addEventListener('scroll', function(e) {
last_known_scroll_position = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function() {
doSomething(last_known_scroll_position);
ticking = false;
});
}
ticking = true;
});
This is certainly longer, and there are some global scope messes to consider, but something like this may make the performance difference you are looking for.
Scroll event I believe will be triggered very often during scrolling. When scroll event triggered, jQuery needs to find DOM element based on the selector. This operation alone is quite expensive.
Changing the opacity make it worse as more pixels had to be processed.
Move code to select DOM using jQuery selector outside scroll event handler. That way you can avoid jQuery to lookup DOM element each time scroll event fires.
Limit size of element to reduce number of pixels need to be compute when opacity changed.
Change opacity at certain time interval helps reduce number of paint operations that browser need to do during scrolling operation. So instead of changing opacity everytime event fires, you wait until certain time has elapsed and then change opacity.

Phaser.io - Is it possible to move tileSprite.tilePosition to a particular target with a tween?

I am creating a simple slot machine and currently using TileSprite to achieve the effects that I want - for the spinning. So far, everything works. However, after the timer stops the initial spin, I want to smoothly scroll the texture to the correct 'result' position:
R1TimerTrigger: function()
{
R1Scroll = false;
game.add.tween(SpriteReel[0].tilePosition).to( { y: R1Result }, 1000, Phaser.Easing.Bounce.Out, false);
}
There are some immediate problems, in that apparently the native tween does not recognize properties of children. Is there a way to solve this, or an alternative approach that does not use tween to achieve the result?
You code looks fine to me and the tween should work on the tile sprite as expected.
Are you starting the tween? You can start the tween automatically using 'true' as the 'autoStart' parameter
to(properties, duration, ease, autoStart, delay, repeat, yoyo)
game.add.tween(SpriteReel[0].tilePosition).to( { y: R1Result }, 1000, Phaser.Easing.Bounce.Out, true);
Working example here https://phaser.io/sandbox/edit/iTLritEj
Look in the Play and Create tabs

Scroll snapping to a page section

So I have two sections of content near the top of my page and I’d like for users who have scrolled down to near the top of the second section to get “scroll snapped” to the top of the second one once they have stopped scrolling.
I think it should be possible using jQuery but I haven’t been able to figure it out. Here are my examples:
Without my attempt: http://codepen.io/jifarris/pen/gaVgBp
With my broken attempt: http://codepen.io/jifarris/pen/gaVgQp
Basically I can’t figure out how to make it try scrolling to the spot only once, after scrolling has stopped. It’s kind of just freaking out.
I love how the recently introduced scroll snap points CSS feature handles scroll snapping and I’d almost prefer to use it – for the browsers that support it, at least – but it seems like it only works for items that take up 100% of the viewport height or width, and it seems like it’s for scrolling within an element, not the page itself.
The top section has a fixed height, so this really can be handled with pixel numbers.
And for reference, here’s the heart of the code from my attempt:
$(function() {
$(document).on('scroll', function() {
var top = $(document).scrollTop();
if (top > 255 && top < 455) {
$('html, body').animate({scrollTop: '356'}, 500);
$('body').addClass('hotzone');
} else {
$('body').removeClass('hotzone');
}
});
});
KQI's answer contains most of the steps required to create a well functioning section-scroll for use in your application/webpage.
However, if you'd just want to experiment yourself, developing your script further, the first thing you'll have to do is add a timeout handler. Otherwise your logic, and therefor scrollAnimation, will trigger every single pixel scrolled and create a buggy bouncing effect.
I have provided a working example based on your script here:
http://codepen.io/anon/pen/QjepRZ?editors=001
$(function() {
var timeout;
$(document).on('scroll', function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
var top = $(document).scrollTop();
if (top > 255 && top < 455) {
$('body').animate({
scrollTop: '356'
}, 500);
$('body').addClass('hotzone');
} else {
$('body').removeClass('hotzone');
}
}, 50);
});
});
Good luck!
All right, there are couple of things you gonna have to deal with to get a good result: which are performance, call stack queue, easing.
Performance wise you should drop jQuery animate and use VelocityJs which gives a smoother transition, better frame per second (fps) to avoid screen glitches especially on mobiles.
Call stack: you should wrap whatever logic you have to animate the scrolltop with 'debounce' function, set the delay for let say 500mm and check the scrolling behavior. Just so you know, the 'scroll' listener your using is firing on each pixel change and your script will go crazy and erratic. (It is just gonna be a moment of so many calc at the same time. Debounce will fix that for you)
Easing: make the transition looks cool not just dry snappy movement.
Remember, 'easing' with Velocity starts with 'mina.' i.e.
'Mina.easingFnName'
Finally, your logic could be right, i am in my phone now cannot debug it but try to simplify it and work with a single problem at once, be like i.e.
If ( top > 380 ) // debounce(...)

JavaScript/jQuery: Animated Cursor/Light Effect

Recently, I found an SVG with an animated cursor element (like the kind of cursor you see when you're typing text on a screen, like I am now). The JavaScript behind this basically switches the visibility of the target element between on and off. The "cursor" element was the only part of the SVG file that the JavaScript affected. I've found that it can target HTML document objects, too.
Here's the original JavaScript, with id="cursor" (#cursor) marking the target element:
var visible = true;
setInterval(function () {
document.querySelector('#cursor').style.opacity = visible ? 0 : 1;
visible = !visible;
}, 550);
What I want to do is alter this code to make it fade in and out. The resulting effect would be like this:
Fade in quickly (250 ms)
Stay visible for less than half a second (500 ms)
Fade out (250 ms)
Repeat 1.~3.
In other words, steps 1 through 3 would all take place in one second, every second.
The question I have about this is: how do I do this in either JavaScript or jQuery?
(P.S.: is there a jQuery equivalent to the above code?)
Using jQuery, you could do the following
setInterval(function () {
$("#cursor").fadeIn(500, function(){
$(this).fadeOut(500);
});
}, 1000);
Using an interval like you mentioned to start the fade in (utilizing jQuery functions). Passing a callback to fade back out. You can mess with the timing to fit your feel

Categories

Resources