Tag Archives: css3

A Simple One Page Template Using ScrollMagic

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.

When you browse through some of the award winning websites, you might be wondering how did they build it?

Are they using GreenSock, Velocity or Pixi.js? Are they using CSS or JavaScript animations, jQuery or vanilla JavaScript?

What happens when you mix GreenSock, SVG and a match? Find out in the following demo:

How did I setup the SVG for the Google Logo animation? Why did I choose GreenSock and how did I animate the individual parts of the logo?

Do you prefer to watch videos instead of following written tutorials?

Check out my latest uploads on the Ihatetomatoes YouTube channel.

We’ve covered the fundamentals of GreenSock and moved a few boxes using TweenLite and TimelineLite in the previous GreenSock tutorials.

But lets be honest, how often do you need to move a box on your real life projects?

As you probably know, Google has revealed a new logo last week.

Some people like it, some are criticizing the hell out of it.

But what caught my attention wasn’t the logo itself, it was the creative use of motion design on the page introducing this new logotype.