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

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

Scroll and drag triggered slider jam packed with some pretty cool tweens / animations. I modified the original version, by Jesper Landberg, for use in Webflow. 

The native scrollbar is left intact so you should be able to integrate additional native Webflow scroll-based interactions. 

This prototype does not work on mobile devices - Consider Webflow's native slider as a replacement on mobile.

Bouncing Scroll

Pretty cool transform effect without having to use canvas! Just click, drag and snap.

Built using Webflow and Greensock's Tweenmax + Draggable and Throw Props plugins. I cant make it cloneable because two of the plugins require a Greensock membership but feel free to ask any questions regarding implementation.

Transform Origin Slider (Public)

Transform Origin Slider

This demo showcases a clip-path swiper.js slider. The clip-path is animated using the Greensock animation script.

Inspired by: https://tympanus.net/codrops/2021/03/10/shape-slideshow-with-clip-path/

Swiper.js Slider: https://swiperjs.com/

Greensock animation script: https://greensock.com/

WebDev For You - Interaction #153

Clip-Path Swiper.js Slider - Interaction #153 - WebDev For You

A collection of components for Webflow projects. From design patterns and no-code components to custom solutions built with JavaScript and CSS. Each one with its own video tutorial.

What you can find inside:
1) Three responsive flexbox patterns
2) Quick and easy responsive grid borders
3) No code immersive grid gallery
4) Infinite marquee with stop on hover, an attributes-only solution
5) GSAP Trail Image effect, an attributes-only solution
6) Automatically open a dropdown on page load, an attributes-only solution
7) Canvas cursor tracking effect, an attributes-only solution
8) Webflow's website navbar and mega menu, built by using new Webflow components
9) Distortion draggable slider, an attributes-only solution
10) Growing link underline interaction on hover
11) GSAP button on-hover interaction, an attributes-only solution

Wanna take a deeper look at what's inside?

Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo

Webflow Friendly Components

Scramble Text Effect with GSAP

I created this tool to easily and quickly visualize different transform settings in GSAP with perspective combinations.

GSAP Animation Perspective Visualizer

The idea of this site has come to me when I want to do the website for my portfolio in Webflow.

Some task that I give for myself:
- Clean HTML, CSS and JavaScript
- Website must be with interesting design
- Must be for person who knows everyone
- With Webflow animation 
- With mixes of scripts that no possible do in Webflow
- The website must tell some story about this person
- Responsive Layout

So my choice was Abraham Lincoln because this 16th president of the United States knows every people in the world and he is my favorite president of the USA.

If you like my work write fill the form on this site and send to me.

I with love help with your project!

Please contact me for discussion:
skype: weblab404
email: weblab404@gmail.com

linkoln

Role: design & development
Date: mar 2021

Info:

Fitfreedom was founded in March 2010 by Livia to provide focused health results for women at every stage of their lives. Over the years  the business has diversified to include mid-life hormonal changes during the peri-menopause, menopause & beyond.

Fitfreedom

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

Flip Menu

GSAP FLIP Menu

Hiii Everyone , I am very exited to showcase my recent project i did with Tayler Odea. Thanks Tayler for giving me the Opportunity to build such an amazing website.

First it was designed by Tayler in Figma, After its converted into a fully responsive website by me in Webflow.

This website is built from scratch and its fully Responsive.
Let me know what you guys think about the build ?
Thanks

If you want me to build your Website , feel free to contact me 
Email : kingfactory1234@gmail.com

Follow me for more amazing content :)

Special-Forces

Special Forces Foundation | Made in Webflow

I built this website for my portfolio. It's included some GSAP animations and interactions