Category Archives: Snippets

ScrollMagic Cheat Sheet

I don’t think this post needs too many words.

Simply download, print and share this ScrollMagic Cheat Sheet that will speed up your ScrollMagic project workflow.

Have you always wanted to learn GreenSock but didn’t know where to start?

Or you always feel like you don’t have enough time?

Are you wondering how was the hair effect on trumpdonald.org created? Was it SVG, WebGL or HTML5 Canvas?

Find out in this short video deconstruction.

Have you ever wanted to pin a section and be in full control of the animation inside?

Today we’ll create a template with two pinned sections and simple timeline for both of them.

When you are creating a site with fullscreen background images, you will need to consider adding a preloading screen at some point.

Even if you optimize the images the best you can, downloading them might take a time and your visitors might get frustrated.

In this third template we are introducing GreenSock and a parallax effect on the background images.

Last time we have created A Simple ScrollMagic Template with intro screen and 3 full screen slides.

Today we will add a few blocks of content that only take as much space as the content inside of them.

I call them break sections.

Have you tried to use ScrollMagic to trigger some CSS and JS animations, but was it over your head?

Don’t worry, you are not alone.