Animation Guy

Single page Webflow animation portfolio with paper-like feel.

Webflow
Relume
GSAP
Animation Guy

Assets

Services: Design and development

Platform: Webflow

Fonts: Neucha. Caveat.

Framework: Relume's Client-First.

JavaScript library: GSAP (ScrollTrigger, SplitText).

The Design Process

Design-wise, for this project I wanted everything to look and feel like sheets of paper.

I stumbled upon PaperCSS, which is an entire framework for… paper. This is also where I found out the “magical” value for this unique paper-like border radius for all buttons and elements:

.paper-like {
	border-radius: 255px 15px 225px 15px/15px 225px 15px 255px
}

I also asked Guy to create “old school” animated GIFs, and he delivered.

Animated GIF of an old film camera

SEO & Performance

Site was built originally on a WordPress theme, with no care for SEO.

SEO measures taken: keyword research for the title meta tag, the heading tags and the above the fold content.

As for performance, all images are heavily compressed with the WebP file format, lazy-loaded and properly resized when possible. The YouTube showreel is loaded only after clicking. The site does take a hit because of Google's reCAPTCHA script, and this is the solution we had to use.

All in all, SEO was boosted and within days his site was on the first page of Google using "Animation Guy" which even that specific, his site didn't show up.

A screenshot of Animation Guy on Google search.
All keywords used in an organic manner for search engines such as Google
No items found.