Easing rotation animation on scroll

Question

I have an element that I am using jquery/css3 to rotate on scroll. The trouble is that it is kinda jumpy when you scroll, and it stops immediately when you stop. I would love for it to be more of a smooth playing rotation that starts when you start scrolling and then eases to a stop after you stop scrolling, rather then just rotating a set # of degrees each time the scroll wheel moves. My code and link is below:

http://pollenbrands.com/rjj/ (scroll down to 100% fruit)

var angle = 1;
jQuery(window).scroll(function() {
    jQuery(".rotate").css('-moz-transform', 'rotate('+angle+'deg)').css('-webkit-transform', 'rotate('+angle+'deg)').css('-o-transform', 'rotate('+angle+'deg)').css('-ms-transform', 'rotate('+angle+'deg)');
    angle+=6;
    if(angle==360) {
        angle=0;
    }
});

score 1 · Answer 1 · answered Apr 16 '12 at 17:18

1

Have you tried using .animate? That might help you control this behavior.

answered Apr 16 '12 at 17:18

neuDev33

1,573
7
41
54

using the css transform is actually faster than the animate function, as css is generally hardware accelerated. – RestingRobot Apr 16 '12 at 17:22
@Jlange, wouldn't that totally depend on the browser type and operating system? – Sparky Apr 16 '12 at 17:26
Most modern browsers, (Firefox, chrome, IE) use hardware acceleration for css. This is independent of operating system as the browsers themselves are written for the specific OS. (Also from his question he is targeting mozilla browsers, which are definitely hardware accelerated). – RestingRobot Apr 16 '12 at 17:28
@neuDev33, I think I may need to give this a shot as CSS doesn't seem to be cutting it. I am not targeting mozilla, not sure what I said that may have indicated that. – PollenBrands Apr 16 '12 at 23:35
@PollenBrands sorry just saw the -moz-transform. – RestingRobot Apr 16 '12 at 23:39

RestingRobot · Answer 2 · 2012-04-16T17:29:06.393

0

It seems that the problem may be attaching the animation to the scroll function. It is called every time the user scrolls, so it is starting a new transform before the previous has a chance to finish. You might want to try to fire one longer event, (like rotate by a larger degree), when the user scrolls the first time, and then postpone any future events until the first one has time to finish. Depending on your easing function, you might use a setTimeout() method with a flag.

edited Apr 16 '12 at 17:29

answered Apr 16 '12 at 17:21

RestingRobot

2,938
1
23
36

thanks, the problem with this is that using easing, the animation would slow to a stop and then start again, so the rotation speed would be inconsistent. i'd really like it to start rotating and hold the same speed until the user stops scrolling, then slow to a stop. – PollenBrands Apr 16 '12 at 23:33
then you may want to try this plugin, http://james.padolsey.com/javascript/special-scroll-events-for-jquery/ It will allow you to determine when the user is scrolling, (as this functionality is not native to the browser) – RestingRobot Apr 16 '12 at 23:35

score 0 · Answer 3 · answered Apr 16 '12 at 17:28

0

A crude and quick way to achieve this would be to delay the execution of the scroll handler..

$(window).scroll(function() {
    setTimeout(function(){
        //Call scroll functionality here..
    }, 300);
});

answered Apr 16 '12 at 17:28

Robin Maben

22,194
16
64
99

thanks, i tried this and along with the issue i stated on the comment above, it just causes some general jumpiness on the page. – PollenBrands Apr 16 '12 at 23:33

score 0 · Answer 4 · answered Jun 25 '13 at 14:41

0

I would agree with neuDev33. Use animate and an easing for the scroll function. Something like easeOutCirc might work nicely. There is a great cheat sheet here.

http://easings.net/

answered Jun 25 '13 at 14:41

Jacksnap13

127
9

Easing rotation animation on scroll

4 Answers4

Linked