Treehouse main page animatons

Hey Johan, I'd be happy to share some insight into how those were created. I'm not sure how much detail you want, but this is the gist of how I built them.

• Each illustration is made of part image and part css elements.

• I setup containers using position: relative to act as the parent for the animated elements that are position: absolute

• I then setup a class that held the final position for each element and set the default to something hidden or off canvas, using overflow: hidden for things like the sliding app screens.

• From there I just setup a coffeescript file that calculates the window height on load so that I could add classes to the animated elements.

• The animation magic happens by using CSS transforms on the animated elements.

• In the coffeescript file, I also stored the scroll positions of each section and used a conditional to look for those so I could add the classes and time things out accordingly.

There are definitely other ways to get the same outcome, but this approach seemed easy and consistent for what we needed on the homepage animations.

Let me know if you want anymore details!

Hmmmm, that might be doable. We'll see :)

That page doesn't seem to exist. Can you update the link?

It does but you must be logged out to see it http://teamtreehouse.com

I think Chris Michel is behind these, maybe he can shed some light on them :)

Is this covered anywhere in the treehouse library or something similar it certainly appears to be the trend at the moment looks very cool as you scroll down the page I was looking at the Litmus Email testing tool https://litmus.com/ they also have a very cool example of this not sure if it is the same technologies but it looks cool too.

That one is good too Anthony! I would like to ask the same! Thank you Chris Michel it looks great!

Thanks guys! I don't think we teach this technique currently, but could be something to think about!

Maybe a detailed blog post for now ??? Hint hint ;)

Maybe a detailed blog post for now ??? Hint hint ;)

Great I look forward to read it!