FREE GSAP animations for Webflow sites - FluidBlocks javascript function kit

Try the ultimate GSAP animation function kit for Webflow sites and for others

FluidBlocks is a constantly evolving function kit. Boost up your project, save thousands of hours, and level up as a designer. With these GSAP code blocks, you can boost your website with micro-interactions. "Plug-n-play", and easy to use.

Check the full library 👉 FluidBlocks FULL Library

This is my first Greensock JS function that provides you an awesome hover interaction. The video is for WEBFLOW integration, but you can use the code in WordPress or other frontend frameworks too. We use attributes to set different transition values, but you can use class too to target multiple elements in the DOM.

🚄 Speed up your Webflow site with GSAP animations!

Through my custom web design projects, I researched a lot... seriously... I spent days for 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 well-built 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 and 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/szs0ma
🔗 Fluiddesign.pro - Webflow Agency
🔗 FluidGO Design&Webflow Subscription