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

CSS How to Make a Website CSS: Cascading Style Sheets Take a Mobile-First Approach

Posted by Sandy Gordon
Sandy Gordon
357 Points

"Take a Mobile-First Approach" Animation

What programs are used for the animation shown during "Take a Mobile-First Approach?" (appearance of the mobile device, finger scrolling down the screen, monitor falling, etc.)

And does one know where I can find resources to learn about how to utilize this kind of animation in videos?

Thank you in advance for your response!

Dylan Macnab
Dylan Macnab
24,861 Points
Dylan Macnab
Dylan Macnab
24,861 Points

I'd guess that it's done using after effects. Try Lynda.com for tutorials, youtube, or even just google: "after effects motion graphics tutorial"

Good luck

Sandy Gordon
Sandy Gordon
357 Points

Thank you so much for your help Dylan! May you have a wonderful New Year!

1 Answer

John Grillo
John Grillo
30,241 Points
John Grillo
John Grillo
30,241 Points

My answer is that this can be done with a lot of programs. Adobe After Effects and Adobe Premiere are the first ones that come to mind.
Adobe Edge Animate can definitely do the job; it does what Adobe Flash used to do but uses CSS and JavaScript instead. I like the program, it's a good one. Takes a while to get used to it though. It's a visual authoring tool.

Let us all know of any free software that also does the trick. And give me an up-vote if you found any of what I said useful.