Backfield is another minimal, sleek and smooth scrolled portfolio template for Webflow. It features a range of custom elements, such as smooth sliders, text animations and parallax image effects.

It’s super easy to use and to display your work in a beautiful way.

- 1 Static pages (4 incl. admin pages)
- 1 Collection template page (Projects)
- 1 Collection (Projects)
- Developed using Webflow template guidelines

It contains some cool custom features:

- Smooth scrolling using Lenis
- Parallax image effects using Ukiyo.js
- CMS-generated sliders using Splide.js
- Word & Letter Animations using Waveshape WordPlay.js

Pay what you want for it at Waveshape: https://waveshape.co/templates/backfield/

...or directly on Gumroad:
https://waveshape.gumroad.com/l/backfield

Backfield - Portfolio Template

This is a mini Javascript package that lets you create super-quick text reveal animations (based on scroll position) for both words and letters in any text element.

It works without any external library such as GSAP etc.

Created by me / Waveshape.

More information, options etc: https://github.com/waveshape-co/word-play

WordPlay Text Reveal

This is a small Javascript hover interaction that pops images on hover. Kinda cool. Really easy to use. Created by Waveshape.co / me.

Image Pop - Image Hover Interaction

The emojis are falling. The most useless hover interaction out there. Very cool. Created by Waveshape / Me. Use for whatever.

More info & options: https://github.com/waveshape-co/emoji-drop

Emoji Drop

This is a fun little design inspiration gallery type of cloneable project that solely works with the CMS.

I made one of these for myself previously in Next.js, but why not make one in Webflow as well and share with the community.

One collection for each gallery item, and one collection for categories. Items that belongs to a category shows up on each categories' template page. Pretty straight forward and simple.

Lenis is used for the smooth scrolling effect.

Feel free to clone and use for whatever.

Design Inspiration Gallery

After a quite successful first template launch, here's another one.

Generative is a quite minimal, sleek and smooth scrolled portfolio template for Webflow. It's super easy to use and to display your work in a beautiful way. It features quite a few elegant interactions that gives the portfolio a premium feeling.

Pay-what-you-want ($10+) for it at https://waveshape.co/templates/generative

Generative Portfolio Template

Exhibit is a minimal smooth scrolled portfolio template. It makes it super easy to display your work in a straight forward but elegant way.

Testing the waters with Webflow templates. 

Get it under a pay-what-you-want pricing system ($10+) at https://waveshape.co/templates/exhibit

Exhibit - Webflow Portfolio Template

This template is called Reside.

Imagine a young, driven, modern and almost start up-y Scandinavian company that wants a fairly simple but super sweet site to represent their business.

The template features a total of 14 static pages (including style guide, instructions, licenses and other administrative pages) and two CMS collection layout template pages (blog posts & space types).

It also follows the official template submission guidelines as closely as possible with few minor exceptions. Happy cloning 🤙

Read more here: https://robingranqvist.medium.com/building-a-14-page-coworking-template-in-webflow-devlog-28c426c240e5

Reside - Webflow Coworking Template

Now what about this

This is a remake of this Codrop: https://tympanus.net/Development/RapidLayersAnimation but remade natively in Webflow.

The article above explains the logic behind the animation, but basically you have a parent (with overflow: hidden) for each image which animates up, while the images themselves animates down at the same speed.

Could need some tweaks regarding easing, more images etc.

I think it looks super cool 🤙

Multi-Image Page Transition Animation

Don't tell me this doesn't look cooool.

I saw a similar animation on some Awwwards site (can't remember the name) and though it looked amazing.

Smooth scroll by Locomotive.js, fixed section pinning type thingy by Gsap Scrolltrigger. 3D renders by Unsplash.

Smooth Scroll Grid Reveal Animation

Here's another weirdly trippy scrolling animation.

I finally figured out how to do layered section scrolling using Locomotive & Gsap. It also plays around with randomized scolling speed dynamically added to each letter in the words in each section.

I kinda like it.

Another Trippy Smooth Scroll Background and Letter Animation

Using Locomotive.js, Gsap ScrollTrigger & some custom Javascript. 3D renders from Unsplash.

Finally figured out how to do those "fixed" background image scroll thingys, so here's a smooth scrolled section thing with some randomized letter opacity animations.

Smooth Scroll Background & Gsap Letter Animation

This is a fun little Javascript hover animation. 

The color transition for the letters can be modified by temporarily creating a class called "letter" and change its font color transition.

The code can be found in the page settings 🤙

Random Letter Color on Hover

I recently saw a really cool interaction on https://www.usestir.com, so I decided to try to remake it.

Clone & have fun 🤙

Stir Card Interaction Remake

Just a simple one-page landing page for a made up project management SaaS. No cool interactions, no animations, simply just a page with some illustrations.

Made for some upcoming educational content, but feel free to clone, use, whatever.

Planera - SaaS One Pager

Just a half-finished horizontal kinda hover animation thingy with a few illustrations I created a few months ago.

Horizontal Illustration Reveal Thingy

hello.

I think I found a way to create the smooth scrolling effect natively in Webflow. The way it works is to wrap all content inside a sticky wrapper (content__wrapper), which itself is inside a wrapper (s__scroll) with a set height. The outermost wrapper has a "while scrolling in view" interaction that pushes all content upwards while scrolling down, together with a 90% smoothing.

Sounds confusing? Well it kinda is. I'm not 100% sure why this works.

Some notes:

The outermost wrapper (s__scroll) needs a set height. You have to manually set this height so that it fits the height of whatever content you're using on your site. It shouldn't be exactly the height of your content, but a bit shorter (This site is 1200vh in height, and s__scroll is 900vh).

- You want to make sure all your scroll interactions have the same smoothing as the smooth scroll interaction (in my case 90). I noticed some weird quirks with them otherwise.

Clone it, check it out and use it for whatever. 🤙

Native Smooth Scroll in Webflow

This is a fun scroll interaction thingy heavily inspired by some interactions found on colabgroup.com.

It's really hard to customize the content of the slides, but you could probably connect them to the CMS or just hide/show the default transform values for each slide. 🤙

Robin Granqvist

About

About

About