The Idea

To create a scroll effect
with just one animation playing in the background and orchestrate the content along with the timed animation.

The Challenge

To Create a scroll effect without any fancy code or effects: Just a lottiefile, textblocks and spacers

HOW WE DID IT

We started with a definition:
# 1 sec = 1000pixels
# Height of viewport = 500px

As The animation progresses from 0 to 1 sec, the screen scrolls 1000px.
“this means that the frame of animation at the end of each sec has to correspond with the content that flows into view

Like this bird shape (sort of)

Or how this shape moves aside as you scroll up

OR HOW THIS SATTELITE WILL SHOOT FROM THE EARTH AS YOU SCROLL

OR HOW THIS TEXT SYNCS WITH THE BLUE BALL AS IT COVERS THE BACKGROUND

EVERYTHING UP TILL THIS POINT WAS DONE USING JUST ONE 10 SECOND ANIMATION INSIDE A SECTION, STICKY AND STATIC DIV BLOCKS !

A LITTLE ABOUT OURSELVES

Right Hemisphere is a creative studio
We spend our time converting our imagination into functional machines
Just like This Website!

HIRE US

Write to us about your cool website ideas. Email us at:
hello@righthemisphere.in

LOTTIEFILES + WEBFLOWORCHESTRA