Animation Guy
Single page Webflow animation portfolio with paper-like feel.
Assets
Services: Design and development
Platform: Webflow
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.
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.
