Animate Text with jQuery Easing (screencast)

Below you can find a 20 minute screencast will help you grasp jQuery easing while creating a simple animation. Using JavaScript eliminates having to do this using flash or an animated gif. No need to open up that flash program just to change the text, or need to make a whole new gif animation. JavaScript provides all the tools you need to create a superb text animation!

Text Version:

The following is all that is needed to perform a neat jquery easing text animation:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script type="text/javascript">
    $(function(){
        // make sure your h2's have a position relative
        $('h2').css({left:'600px'})

        jQuery.easing.def = 'easeOutBounce';
        setTimeout(animate, 3600);
    });

    function animate()
    {
        $('h2').animate({left:0}, 1000);
    }
</script>

This would of course ease your text in, but it would still be visible all on the far left. To fix this you need to wrap this in a div and assign the following properties to it:

div
{
    overflow: hidden;
    position: relative; /* ie 6 */
    height: 100%;  /* ie 6 */
}

If you want to find out more, check out a more detailed documentation of jquery easing plug-in.

Be Sociable, Share!

Written by Brenley Dueck

15 Responses to “Animate Text with jQuery Easing (screencast)”

Hassan Says:
February 1st, 2009 at 10:37 am

Could you please have a mirror for your screencasts? It seems that I don’t have access to blip.tv I really appreciate it.
Thanks.
Anthony Hastings Says:
February 2nd, 2009 at 7:15 am

Nice tutorial. It’s a great use of jQuery that adds an interactive touch to the site which could before only be seen in flash animations or flash sites.
Kevin Says:
February 2nd, 2009 at 11:25 pm

i am already using jQuery and its really amazing… I designed many plug-ins for my site…this is really awesome..
ExistentialDuck Says:
February 3rd, 2009 at 2:10 am

Great tutorial, thanks for sharing!
Sarfraz Says:
February 3rd, 2009 at 2:42 am

Nice tut.

Thx.
Sarfraz
http://www.greepit.com | Open Source Resources for Designers & Developers
Bush J. Says:
February 4th, 2009 at 3:07 am

I spent too much time and traffic to view your video. It is unacceptable
My Little List of jQuery Tips, Tricks and Resources | Moral Fibre Says:
February 5th, 2009 at 2:10 am

[...] Animate text with jQuery easing [...]
Geek Week - CSS, jQuery,Wordpress, PHP, XHTML, Web Design, web 2.0 | JasonCypret.com Says:
February 5th, 2009 at 1:44 pm

[...] Animate Text with jQuery Easing [...]
shane plasebo Says:
April 26th, 2009 at 11:03 am

Thanks a lot for this screencast. Throw away flash for making basic animation, Jquery rules…
webchester Says:
August 21st, 2009 at 8:21 am

good job
Monir Says:
September 29th, 2009 at 12:24 am

Great tutorial. Definitely its useful.
jrowling Says:
October 21st, 2009 at 9:08 am

Nice Tutorial. I used it but I also am using the following slider script and it makes the slider have the easing effect as well. How can I prevent this?

http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider
jrowling Says:
November 2nd, 2009 at 8:22 am

Ok, I think I’ve figured out the culprit.

It seems this line:
jQuery.easing.def = ‘easeOutBounce’;
is setting the default easing, so that all my animations move the same way.

How do I change this so that the easing is for this particular image only.

Please help, somebody…
George Carter Says:
November 19th, 2009 at 1:38 pm

I enjoyed this. Will consider using in the future.
Taimur Says:
January 20th, 2011 at 9:05 am

Something i am looking for.