CODEWITHSUNDEEP
jqueryhtmlcssanimationjquery-animate
Keith
Keith

Reputation: 1394

Why is this flying text rendering choppy?

I have this flying text marquis that is rendering really choppy as it flies in (especially in FireFox) It seems to jump at certain intervals and i was wondering if i could make it run more smoothly by using easeIn or something similar. Any ideas on this?

I set up a jsfiddle for convenience.

HTML:

<div id="taglines">
    <h4>Your expert. Your partner.</h4>
</div>
<div class="container">
    <h3 id="fly1" class="flying-text active-text">Creative Solutions</h3>
    <h3 id="fly2" class="flying-text">Graphics</h3>
    <h3 id="fly3" class="flying-text">Sourcing</h3>
    <h3 id="fly4" class="flying-text">Distribution</h3>
    <h3 id="fly5" class="flying-text">Online Tools</h3>
    <h3 id="fly6" class="flying-text">Custom Branding</h3>
    <h3 id="fly7" class="flying-text">Personalized Support</h3>
</div>​

CSS:

.container{
    width:1000px;
    margin:0 0 0 -10px;
    color:#c3cd25;
}

#taglines{
    color:#000;
}

#taglines h4{
    font-size:20px;
}

.flying-text{
    margin-left:-100px;
    font-size:40px;
}

JavaScript:

$(document).ready(function(){
    $('.container .flying-text').css({opacity:0});
    $('.container .active-text').animate({opacity:1, marginLeft: "350px"}, 4000);

    var int = setInterval(changeText, 5000);    

    function changeText(){
        var $activeText = $(".container .active-text"); 
    var $nextText = $activeText.next(); 

        if($activeText.next().length == 0) $nextText = $('.container .flying-text:first');

    $activeText.animate({opacity:0}, 1000);
        $activeText.animate({marginLeft: "-100px"});    
        $nextText.css({opacity: 0}).addClass('active-text').animate({opacity:1, marginLeft: "350px"}, 4000, function(){ 
        $activeText.removeClass('active-text');                                           
        });
     }
 });

Upvotes: 0

Views: 896

Answers (2)

alt
alt

Reputation: 13927

It's choppy because you're using DOM-redraw-style animation. This is basically "every 16 milliseconds lets redraw as little of the page as we can figure out (this usually ends up begin a lot of it)"

The alternative is a native, built-in, CSS3 method! This will be infinitely smoother and the code is much nicer than jQuery's .animate() method. The downside is we have to worry about old browsers. That's where Ben Barnett's jQuery plugin comes in handy.

http://playground.benbarnett.net/jquery-animate-enhanced/

Here's the snippet to put just above your other JS stuff:

<script src="https://raw.github.com/benbarnett/jQuery-Animate-Enhanced/master/jquery.animate-enhanced.min.js" type="text/javascript"></script>

This fantastic tool will take your existing code, analyze the browser, and use automatically convert it to a smoother, CSS3 animation when possible. This is exactly what you need. Simply include it in your page above the animation code.

Other things to think about...

If you're willing to play about with REALLY scary experimental stuff (which isn't as bad as it seems), I'd try adding this code to the CSS of the animating element:

-webkit-transform-style: preserve-3d;

That tells the browser, "Go grab the GPU, I'm doing some heavy lifting over here!" and then you've got the user's GPU to animate it instead of the CPU. Always helpful if your page is in need of a little boost. Keep in mind, it can sometimes cause graphic tearing of the page, as it's still really experimental webkit stuff. It should work in Safari 5+ and Chrome 10+.

Upvotes: 2

chrisfrancis27
chrisfrancis27

Reputation: 4536

AFAIK you're pretty much limited by how quickly the browser can execute the Javascript to update the DOM element's CSS properties on each animation cycle. You could check for CSS Transitions support using Modernizr and use those if available, falling back to jQuery animations if not supported. I use this technique on a number of projects and it works nicely - native CSS transitions are much more performant (even when not hardware-accelerated) than Javascript animations.

if (Modernizr.csstransitions) {
    // update CSS
}
else {
    // animate CSS
}

Upvotes: 3

Related Questions