Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Baard Kolstad
Baard Kolstad
976 Points

Page loading without going blank

Hi, for a project i would like to achieve the effect of icons animating while a page loads, instead of it going blank for a second. example here, if you click on one of the sections: snowbird.com

Could anyone lead me to a tutorial for this, or is this just too heavy to embark upon as a newbie?

Just to be clear, its only an animation in the navigation i want, not all that other fancy stuff.

Thanks in advance!

3 Answers

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

Hi Baard:

There's about three different instances of animation going on there:

The top level navigation for the site. The part that is tracking the number of lifts and trails open. (Done with the HTML5 canvas element). The pictures in the slider "unfolding".

Not sure which specific icon animation you are referring to.

Baard Kolstad
Baard Kolstad
976 Points
Baard Kolstad
Baard Kolstad
976 Points

Like i said, just the animation of the logo in the top level navigation. Thanks for response!

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

It appears that they are using Javascript to make the animation effect.

 SNBRD.scrollHandler = new ScrollHandler();

        SNBRD.loadHandlers.push(function(){
            var pageCategory = "Home";
            SNBRD.nav = new TopNav(document.getElementById("nav-content"));
            SNBRD.nav.setSelected(pageCategory);
            SNBRD.padContent();
        });

        SNBRD.findSnowbirdLinks();
        SNBRD.padContent();
        SNBRD.onDomReady();

        GlobalEvents.dispatch(new GlobalEvent(PageTransition.TRANSITION_COMPLETE));

But you could probably do something similar with CSS3 Animations, covered in CSS Foundations.

Of course, I could be completely wrong, because I'm not absolutely sure how they achieved that effect.