WEBFLOW CLONEABLE: Goo Motion Library
HTML-код
- Опубликовано: 26 фев 2024
- Hey everyone! I always wanted to have an animation library in Webflow that would use the power of GSAP (GreenSock Animation Platform) and relying on custom attributes to animate elements when they enter the screen. Today, I'm happy to introduce Goo which is an open-source motion library for Webflow that animate elements when these get inside the viewport. Custom attributes only. No JS.
👇 Clone the Goo Motion Library here:
webflow.com/made-in-webflow/w...
📄 Full Documentation & Features:
thelumious.notion.site/Goo-We...
Gool stuff! I have been looking for a simple and light library for basic animations. I'll be definitely trying Goo.
Discovering you and the channel is the best thing happened this week, also wanted to ask if these attribute solution is going to be updated for more animations?
yep, I plan to build more anims like parallax and so on. I'm also planning a Webflow app so it's easier to manage this motion library. If you have any ideas, let me know.
@@lumiousmedia Will the advance animations be free?
@@angelicojohnrago2878 you mean the gsap club animations?
@@lumiousmedia the parallax you mentioned
@@angelicojohnrago2878 free. I don't plan to monetize the library.
These is some shakyness when scale animation is used this somehow tram.js manages very well :) when compared to anime.js,GSAP etc according to our research!
yeah, the shake might appear for multiple reasons:
1. people have low battery mode enabled on the phone and devices which kills the easing and reduce the frame rate.
2. there's no smoothing. People use mouse wheel which scroll the page in increments.
3. try a different easing
How would I delay an animation. As in I want a text block to be animated after the previous text block has completed its animation
I haven't built this feature yet. I'm sorry.
Right now, the only way to delay an animation (or play after another) is to use the stagger feature.
Implementing right now. This is fantastic, but one thing: Similar to other split text libraries, the spans that are created around letters or words create an increased line-height. Any way to mitigate this so the design can be retained?
Joseph, this happens bc of the font family. Some families do not align letters to the baseline. You have 2 options here:
1. Use another font which baseline letters. A good example is Manrope (all letters are aligned to the bottom of the text block.
2. Add a custom CSS that triggers the elements inside your stagger text and adapt the line height.
Let me know if these helps.
@@lumiousmedia That was extremely helpful, thank you! May I ask one more question? I've noticed that occasionally, animations won't trigger when they've entered the viewport, but when I refresh the page, they trigger as expected. I've tried reducing animations, applying them to text vs. the parent wrapper, triple-checked attributes, etc. Thoughts?
@@josephgraham6098 good question. Might happen for a few reasons but I'll debug this:
1. Cache. As simple as sound but some browsers might cache the anims.
2. Trigger: I built the anims to load after the page has been fully loaded. And that's bc I don't wanted it to create layout shifts or impact the site speed.
3. The anims might not trigger bc the DOM is not ready. You can try adding 'defer' to the script so it fires up after the DOM is ready.
4. GSAP sometimes does not work with Webflow animations or CSS animations. So check if your Div Blocks do not have any CSS transitions or webflow anims.
@@lumiousmedia Thank you, I just added defer and cleared cache-this didn't resolve the issue. I really don't want to swap out goo. It's awesome other than this, but I'm at a loss.
@@lumiousmedia Wait, I think you might be right; I changed all images on the page to eager load and all animations are working as expected. I'll do the same on other pages now...