Discover the best gsap websites created by professional designers. Get inspired and start planning your perfect gsap web design today!

Watch my GSAP Scrolltrigger tutorial for this project at https://www.youtube.com/watch?v=x-BVEhyYW50

Conceptual design for https://www.minimalgoods.co/

MinimalGoods

GSAP Scrolltrigger Tutorial

Design Direction 002. 

Learn how to create a this custom homepage design with multiple interactions and animations including TweenMax text animations. 

Watch Video Tutorial here: https://youtu.be/bejjNVTs2ZA


Hope you enjoy.

Design-Direction-002

Design-direction-002

Click anywhere on the page for sound when scrolling

Portfolio Lists

Here's a special template I wanted to share for those who love animation and Kaws.

🚀 This is the 16th cloneable template and the first one of many with Eurecah!

We used custom-code throughout as well as GSAP. Tweet me on twitter to get the code if you want to recreate it: https://twitter.com/Tycreated

This template is made with:
✔️ Client First
✔️ GSAP
✔️ Custom-code

---------

👀 Find previous templates on my profile.
❤️ Follow along on Twitter and know when free templates get released early: twitter.com/tycreated

Unofficial Kaws

UNOFFICIAL KAWS CLONEABLE Template

Vertical CMS Marquee

This cloneable uses a paid GSAP plugin called SplitText that can be purchased at https://greensock.com/club/

Text Animations

Text Reveal Animations on Scroll

Design by https://mubien.com/

This cloneable is for learning purposes only. I do not own the rights to this design and content.

CMS Portfolio Scroll

Watch tutorial: https://www.youtube.com/watch?v=sOe9ePPllXM

T.RICKS Scroll Toggle

Comparing 6 different approaches to achieving momentum / inertia scrolling. 

Version 1: SmoothScrolling.JS
Version 2: Luxy.JS
Version 3: Rolly.JS
Version 4: Tweenmax.JS (Greensock)
Version 5: Vanilla JS (A)
Version 6: Vanilla JS (B)

*Make sure you preserve the native scrollbar (ie don't use virtual scroll option) when project contains IX2 scroll-based interactions.

*These are proof of concepts that may need further tweaking/optimizing (especially for mobile browsers). In addition, they override native scrolling behavior which can result in unintended consequences - especially on older browsers.

Inertia / Momentum Scroll Implementations

Inertia / Momentum Scrolling

GSAP FLIP Column Hovers

Watch tutorial at https://www.youtube.com/watch?v=-QO-YUDzvyI

GSAP Text Animations

Color Change on Scroll

Change Page Color on Scroll

1. Text Fill (100% Webflow)
2. Character Tween (Greensock's Tweenmax)
3. Smooth Landing (100% Webflow)
4. GIF Background (Custom CSS)
5. Mosemove Warp (Blotter.JS)

Hover Animations

Text Hover Animations

I finally decided to get my hands dirty and learn ThreeJS + React Three Fiber to give life to my ideas using interactive 3D. This project is the end result of my tests and study.

Highly inspired by the Work Louder(c) Creator Micro pad (https://worklouder.cc/creator-micro/), I created a fictional collab between your favorite website builder and this amazing product for a limited edition with custom shortcuts to improve your workflow.

My process:
- 3D model, materials, lights and animation done in Blender
- Used CodeSandbox Cloud to put everything together in R3F (plus some custom scripts used on the Webflow page via data attritbutes)
- Loaded the generated JS bundle in Webflow using custom code

- YOUTUBE TUTORIAL: https://youtu.be/XOIU3mdR9Sc
- Link to the CodeSandbox template: https://codesandbox.io/p/sandbox/flowboard-r3f-b95nx9

Flowboard

Flowboard - Webflow + ThreeJS template

Based on https://monopo.vn/

Watch the tutorial at https://www.youtube.com/watch?v=yvqSioowCRc

Highlight Text

Highlight Text Tricks

Bar Chart

Range Slider Bar Chart

Watch the tutorial at https://www.patreon.com/posts/68438340

Velocity

Velocity-Based Interactions

Change navbar color when scroll into section

Discover gsap websites built by the Webflow community

Discover gsap websites built by the Webflow community