CODEWITHSUNDEEP
jquerycsseasing
PollenBrands
PollenBrands

Reputation: 144

Easing rotation animation on scroll

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;
    }
});

Upvotes: 0

Views: 3148

Answers (4)

Jacksnap13
Jacksnap13

Reputation: 127

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/

Upvotes: 0

RestingRobot
RestingRobot

Reputation: 2978

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.

Upvotes: 0

Robin Maben
Robin Maben

Reputation: 23064

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);
});

Upvotes: 0

neuDev33
neuDev33

Reputation: 1623

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

Upvotes: 1

Related Questions