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

JavaScript

Gabriel Rosario
Gabriel Rosario
23,602 Points
Posted by Gabriel Rosario
Gabriel Rosario
23,602 Points

Best in, out and loading animations practices.

I want to make an introductory DOM animation when the page loads, and if I click a link the page make an out animation and a loading state, and when the page is loaded make the in animation. What the best way to achieve this? Any suggestions, links tutorial, videos are more than welcome. Thanks a lot guys!!!

3 Answers

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

I wasn't familiar with GSAP but I just saw the demos and it looks very cool!

So it should be simple enough just to perform an intro animation in your script code that would run when the page first loads. Then you can set up a click event handler that would intercept any clicks on links and perform your exit animation before actually diverting the browser to the new location. I'm guessing that the GSAP library includes options to make the animations synchronous which would allow you to display it entirely while your page is still in control.

I'm not sure what you mean by a "loading state" but if you're talking about another animation, you may not be able to do that if the link is sending the user to a foreign web site since that other site would be responsible for what the user sees at that point. But if it's to one of your own pages, you can just perform that animation before the intro animation.

So it doesn't sound like you'd need much more than the standard information on handling events in JavaScript that you can find in the courses here if you're not already familiar with doing that.

Gabriel Rosario
Gabriel Rosario
23,602 Points
Gabriel Rosario
Gabriel Rosario
23,602 Points

Thanks. Did you know what events I have to look up? .load(), .ready(), etc.

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

No event needed for the initial animation, other than what you might already be using. It looks like you're using jQuery, so you probably already use ready to start your script.

For the "leaving" animation I was thinking you would just intercept the click event on all links.

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

What kind of animation do you plan on creating? Will it be CSS or JavaScript, or are you not sure yet? Please describe the kind of effect(s) you want to create.

In the meantime, a great course for CSS effects is CSS Transitions and Transforms.

Gabriel Rosario
Gabriel Rosario
23,602 Points
Gabriel Rosario
Gabriel Rosario
23,602 Points

I want to use javascript with GSAP. I want a loading state fallow by an intro animation and if I click a link make an out animation and return to the loading state again.