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 trialEric Kim
3,637 PointsWhat kind of tool do I need to use to make the animated design on treehouse's index page?(before login)
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
Riley Hilliard
Courses Plus Student 17,771 PointsThey 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.
Patrick Metcalfe
Courses Plus Student 7,563 PointsHey 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
3,637 PointsPatrick! Thank you for kind explanation!! I'll try codepen!
Patrick Cooney
12,216 PointsHTML, 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
3,637 PointsPatrick! Thank you so much!!
Pedro Lucas Da Silva Cunha
5,276 PointsI 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
3,637 PointsPedro, thank you!
Eric Kim
3,637 PointsEric Kim
3,637 PointsRiley, thank you!! Exactly what I was looking for!