Fluid Design Studio

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: 🔗 GSAP mouse-enter SVG animation🔗 GSAP Mouse Track Badge interaction🔗 GSAP Parallax elements with attributes in Webflow🔗 GSAP ScrollTrigger Text Reveal animation - 2 types of animation included! v1: Line animation, v2: character animation.🔗 GSAP arrow points to the cursor effect🔗 GSAP Nav color change - triggered by section color🔗 Image reveal effect with GSAP scrollTrigger🔗 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! Build and style your elements in WebflowLink GSAP libraries from cdnjsCopy and paste FluidBlocks code into the Webflow code editorSet up the code with your own CLASS names or data-attributes.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

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 https://youtu.be/9mlgFtvQ4QA 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 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! Build and style your elements in WebflowLink GSAP libraries from cdnjsCopy and paste FluidBlocks code into the Webflow code editorSet up the code with your own CLASS names and data-attributes.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

We'll recreate an animation in Webflow with GSAP. You can check the detailed Webflow tutorial video on Youtube for free: https://www.youtube.com/watch?v=lpFDerbiByw I found this cool page-load line animation on Awwwards. It is a SOTD website called Odin's Crow. The website is made by Obys agency. I use GSAP to recreate the movements, you'll also find some custom CSS for a data attribute trick.About the GSAP code I use from animations so in the video, you will find the end "scene". Basically, we can create these types of animations with basic knowledge, I had to use here a javascript cycle, but it isn't a big deal, I describe it in the Readme file.So.. happy coding!

We'll recreate an animation in Webflow with GSAP. You can check the detailed Webflow tutorial video on Youtube for free: 🎥 Check the Video We'll recreate this animation in Webflow with GSAP. In this hero, there is a video background that is animated with scrollTrigger and the words are also animated by my GSAP code. Happy coding!

LEARN HOW TO CODE A CLEAN, ELEGANT AND UNIQUE MOTION WITH GSAP THAT WOULD TURN HEADS AND MELT FACES. Course in Progress! Release date later in Q3. Subscribe for the course updates! 🔗 https://wim.fluiddesign.pro WHO THIS COURSE IS FOR[~] This course is aimed at both no-code developers seeking to incorporate sophisticated interactions into their Webflow project and designers striving to present their motion design concepts. FAQ[~] How much will it cost?I want to set the price affordable for everybody. It is ~$40 - 80 right now, but it depends on the modules, content and example projects that I make.Is it possible to get a discount if I subscribe now?Definitely! 🙂 I'll update you with an early bird price later in Q2!Do we have a community?Yes, I want to build a dedicated community around GSAP & Webflow!I'll send you a Discord invitation after the free subscription!