FLUIDBLOCKS Library | GSAP animations for Webflow sites

The ultimate GSAP animation function kit for Webflow sites and for others

Boost up your Webflow project with custom micro-interactions. Save thousands of research hours, and level up as a Webflow developer & designer. FluidBlocks are javascript code blocks that are "Plug-n-play", and easy to use.

Try the first Gsap function! 👉 FluidBlocks Trial

SneakPeak: https://youtu.be/hrbhKhumdo0

AwesomeGreensock JS functions with videos that provide you stunning interactions and animations for your website. Video is for WEBFLOW integration, but you can use the code in WordPress or other frontend frameworks too.

Currently in the library with tutorial videos for Webflow:

1. 🔗 GSAP mouse-enter SVG animation

2. 🔗 GSAP Mouse Track Badge interaction

3. 🔗 GSAP Parallax elements with attributes in Webflow

4. 🔗 GSAP ScrollTrigger Text Reveal animation - 2 types of animation included! v1: Line animation, v2: character animation.

5. 🔗 GSAP arrow points to the cursor effect

6. 🔗 GSAP Nav color change - triggered by section color

7. 🔗 Image reveal effect with GSAP scrollTrigger

8. 🔗 Staggered cards reveal with GSAP scrollTrigger

🚄 Speed up your Webflow site with GSAP animations!

Through my custom web design projects, I researched a lot... seriously... I spent days finding the best solutions for these interactions and I learned a lot. FluidBlocks save time, money, and reduce development projects' costs for you. Webflow is a powerful, intuitive tool for building responsive websites. But you can go further!

If you want to extend your site's user experience you can use GSAP for advanced interactions, transitions and animations. GSAP is a powerful JavaScript library to animate SVGs, web elements and other effects.

⏱ Why you should use FluidBlocks?

By using these code blocks, you can create stunning custom animations and micro-interactions that Webflow cannot make. It will save you tremendous time of research on CodePen and Stackoverflow. These are ready-to-use Javascript functions that you can implement into your code editor in Webflow.

👌 Easy implementation!

FluidBlocks are functions that you can easily set up. I make detailed PDFs and videos about the implementations and play with the parameters.

📃 How to use it? - Detailed ReadMe file in the pack!

1. Build and style your elements in Webflow

2. Link GSAP libraries from cdnjs

3. Copy and paste FluidBlocks code into the Webflow code editor

4. Set up the code with your own CLASS names or data-attributes.

5. Publish 🎉

⭐️ Basic License Agreement

By purchasing these FluidBlocks, you get the right to use one person. You can't RESELL, RENT OR LEND the code blocks.

Don't forget to rate! ❤️

Webflow / Code Skill level:

You don't have to write code, but it is easier to use if you understand the basics of javascript. For example, targeting elements in JS

🏡 Find me here:

🐦 twitter.com/szsoma
🔗 Fluiddesign.pro