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

Design

Eric Kim
Eric Kim
3,637 Points

What kind of tool do I need to use to make the animated design on treehouse's index page?(before login)

https://teamtreehouse.com/

When I come to Treehouse website, before log in I can see great animated design pictures next to -Learn at your pace -Practice makes perfect -Earn achievements, -show off skills

and our treehouse badge also a good example of it. How can I make those things? Do I need to use Flash? Do we have a lecture for that on treehouse?

4 Answers

They are likely using CSS3 animations, and maybe a bit of JavaScript.

There is a lesson on those in the CSS Animations Badge and CSS Transitions and Transform Badge.

Eric Kim
Eric Kim
3,637 Points

Riley, thank you!! Exactly what I was looking for!

Patrick Metcalfe
PLUS
Patrick Metcalfe
Courses Plus Student 7,563 Points

Hey Eric, So sorry I can't tell you exactly how those work because I'm on my iPad and can't easily view the source code, but the way it's working is either using JavaScript or using CSS. Flash is (how to say this nicely) archaic. As I said I'm on an iPad and I can see the animation and flash doesn't work on iPads. I'm going to assume you are new (Welcome its awesome to have you and meet you!! Please lmk if I'm wrong in assuming your new tho) but now a days browsers are sooo powerful that they can do crazy cool animations without heavy complex things like Flash and Actionscript. To see what cool things can be done with just a little css or js you should check out http://codepen.io and if you want to learn how to make cool animations like the home page one you can check out CSS Foundations which will cover transitions, transformations, and animations in CSS or JavaScript Foundations which will cover how to manipulate objects in js. Please let me know if you are confused or have any questions about how awesome CSS, HTML, and JS can be, and Good Luck!!!!

Patrick Metcalfe

Questions: patrick@patrickmetcalfe.com

Eric Kim
Eric Kim
3,637 Points

Patrick! Thank you for kind explanation!! I'll try codepen!

Patrick Cooney
Patrick Cooney
12,216 Points

HTML, CSS and Javascript will do the trick. If you don't want to learn all those things though take a look at Adobe Edge Animate which is part of creative cloud. It's a lot like Flash except it outputs HTML, CSS and Javascript based on what you build. If you're already familiar with the Flash environment however and want to animate in Flash take a look at the CreateJS plugin.

Eric Kim
Eric Kim
3,637 Points

Patrick! Thank you so much!!

Pedro Lucas Da Silva Cunha
Pedro Lucas Da Silva Cunha
5,276 Points

I agree with Riley, the lesson on CSS3 Transitions and transforms has some information you could use. The animation loads up on page start up, which kind of sounds like what you're talking about. Good luck!

Eric Kim
Eric Kim
3,637 Points

Pedro, thank you!