Home/ Questions/Q 8284929
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T11:17:22+00:00

I have this flying text marquis that is rendering really choppy as it flies

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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+.

    • 0