Web Bae

WB

Web Bae

Join the community to ask questions about Web Bae and get answers from other members.

Join

clip path

Hi @Web Bae ! I'm having an issue with your clip path app. I need photos to be clipped with a D shape. It does the job but the images are being cut off at the top, and there's something unexpected going on at the bottom of the image. I'm attaching the SVG and an image here. Can you help?

Flexbox / Vertical Stretch / Client-First Question

Hi All, This is probably a silly question, but I've noticed when building using Client First framework, that Flexbox with Stretch alignment doesn't work when padding-global / padding-section is used in the page structure. Is there a known issue with padding and is there a work-around?...

Janky Animation on Desktop Safari and all iOS browsers (safari, chrome and Arc)

Hi there, I'm working on a website for a client and they requested a slider on the website, i used splidejs to achieve this but when testing the website after building it i noticed janky animation where the slide just skip to the next one without animating on safari on mac and mobile broswers. Things to note : When i added a hardware acceleration code to website root css it fixes this but breaks any element that has position fixed. ...

Finsweet CMS Nest Not working

Hi everyone, I'm about to loose my mind. I'm trying to overcome to the limit on webflow cms. I tried using the finsweet CMS Nest Attribute but its seems not to be working. i have set everything as i was told on finsweet website and even cloned a couple of Webflow site including the one done by WEB BAE, this odd thing is it seems to work on the clone site but doesn't work on my site. i've tried everything even copied the exact working divs from the clone website but it still doesn't work. Also i noticed if i don't link the page it shows the items i want to nest but it just show all the items and not the ones i selected from the parent collection. When I run the ASS, i get this error message: “The attribute fs-cmsnest-collection=“speaker” is found, but the url link in the CMS Collection Item is not working. Check if the Link Block or Text Link have the correct link to the Item’s Template page.”...

Number field formatting in CMS Collection

Hi there. I have Number field in my CMS Collection, and the numbers after adding Collection items look like this – 100000, 249000, etc. These are property prices (I am creating real estate website) and should be displayed like this – 100,000€ or 249,000€. I am also using CMS Filter from Finsweet to filter properties by price range (from - to). How can I format these prices so the filtering/sorting will still work?

Webflow site based on Web Bae’s Horizontal Scroll, loads zoomed out in Chrome on iPhone

Greetings! I've used @Web Bae 's inital "Flawless Horizontal Scrolling in Webflow" structure set up in Webflow to flesh out my site, but I'm running into some weirdness when it's viewed specificly in Google Chrome on the iPhone (perhaps other divices?). The link to the Webflow site is: https://910zen-v3.webflow.io/ Webflow Read Only Link: https://preview.webflow.com/preview/910zen-v3?utm_medium=preview_link&utm_source=designer&utm_content=910zen-v3&preview=2a0bb0fda70d3a64b98d5d665d9ae006&workflow=preview ...
No description

Smooth scroll in Webflow

Hello everyone. Does anyone know what is the best way to implement smooth scroll in Webflow? I watched Timothy's tutorial for Lenis.js, but I see that people are having issues with Safari, anchor links sometimes returning to the top of the page, etc. It's also a bit irritating when scrolling and then while the scrollbar is moving, if we grab it with the mouse, the whole page starts glitching and bugs out for a few seconds. Is there any alternative or solution for these problems?

Applying a flex-grow on swiper active slide

Hey everyone, happy to be here! :webbae: I'm trying to implement this functionality where the info box appears on the right side on the active slide. I was thinking of making it appear by growing the container. I've searched everywhere, even codePen but I'm struggling a bit to find it. I'm currently using fixed values on my read-only instead of flex-grow, but I think I might be complicating it? The issue here is that, since I'm changing the width of each slider everytime it goes active, the swiper is needs to be re-calculating the width over and over again. Any suggestions are very welcome! ...
No description

Need help with this animation

I am trying to get one animation similar to (https://martingarrix.com/) when the "+" icon scales and the other section enters but I have to move the below section up in the animation but by doing so, every section below will have to move up. Need help on how can I achieve it. Also, the image when scales up is distorted and not clear how to fix that too? Read only: https://preview.webflow.com/preview/prac-layout?utm_medium=preview_link&utm_source=designer&utm_content=prac-layout&preview=51bfe57fab782f94c19e73f0533bd43e&pageId=664318bf7e06c0c8877b20a4&locale=en&workflow=preview...

imagesLoaded not recognizing images in <canvas> element

@Web Bae Continuing from the question I posed on your YouTube video for creating a real progress indicator, I've added a Codepen link with the code in the JS section. It is from one of Timothy Ricks' tutorials for creating a PNG sequence that is tied to a GSAP ScrollTrigger animation. So I'm not sure exactly why the browser wouldn't recognize the images for the imagesLoaded library. https://codepen.io/mikelee22/pen/GRamWzM...

https://circula.webflow.io/product/benefits

I have a hover animation made with gsap. The problem is, that the animation="benefit-grow" element is staying, when i hover out very fast, before the animation is finished. Do anybody know how i can make it wait to finish the animation or make it cancel the animation and make it the hover out animation?
No description

Image size is different on different devices

hello everyone, i have a transparent image (the white circle) that goes over the moving gradient in that section. i was working on my pc (full hd monitor) until now, and when i opened webflow on my thinkpad the whole thing was cut off and i have no clue how to fix it so this image is always in the middle of this section? i dont want it to be cut off like it is on the thinkpad view and im confused why it even happened considering it doesnt cut off on any breakpoints on my pc any help is appreciated. if you also have tips on how to make the section not get infinitely long as breakpoints go on and keep it anchored to the end of this image that would be nice to know too. thanks in advance!...
No description

How to write dynamic inside a custom Component?

onclick="openCity(event, 'London') I want to use this kind of approach, to build a tab component in webflow myself. The problem is, that i can't make it work to fill in the attribute with dynamic content inside. Does it work like this?...

Custom Navbar problem

Hello good people. I have a problem with the navbar in Webflow and I would be very grateful if anyone knows how to solve it. Namely, I do not use the Webflow navbar because I like to have more control. I prefer that when the hamburger icon is clicked, the menu becomes fullscreen and then, with a bit of JS, I disable scrolling when the menu is open. I also use a Lottie animation for the hamburger. My navbar always looked good and I managed to create various nice animations, but now I have a problem with the links inside that menu. These links always led to other pages and everything worked great, but now I have a situation where the links lead to a specific section on the page and I have a problem because when a link is clicked, it bugs out, scrolling is still disabled, and the menu does not disappear. I have tried different solutions with ChatGPT, but there is always something buggy, either the scrolling or the Lottie animation. Sorry for the long text. Thank you in advance for the response. Here is the JS code I use to disable/enable scrolling when the menu is open: <style> .no-scroll {...

Stuck on the vercel pipes

Hello everyone, I am having an issue creating a second instance of the vercel pipes form this video : https://www.youtube.com/watch?v=UgUQSm2JG6Y&t=212s I can get the animation on the first instance of the pipes on the left to work but I cannot get the animation tow ork on the straight pipes on the right. Here is my read only link : https://preview.webflow.com/preview/bounce-insights-5e8ffb?utm_medium=preview_link&utm_source=designer&utm_content=bounce-insights-5e8ffb&preview=0f8e336db9c7e73cd423f6f0335cd7f1&pageId=661ee7e37d14c8bf6a15bdac&locale=en&workflow=preview...

Infinite Marquee Problem

Hello everyone. I hope you are all well. Is it possible to implement infinite scroll without having to load the images with the page? I've noticed that when we have multiple instances like this on a page with many SVG images, it can significantly reduce the Lighthouse score. Is there a way to set it to load on scroll without breaking the animation? https://webflow.com/made-in-webflow/website/wb-infinite-marquee...

Help Needed with Error Handling Replicate API Response in Webflow Using Make.com

I am currently working on a project where I need to generate images based on user inputs on a Webflow form and display the results dynamically on the same page. I am using the Replicate API to generate the images and Make.com to handle the workflow. However, I am encountering an error related to handling the API response, and I need some assistance to resolve it. Project: 1. Webflow Form:...
No description

Auto switch and hover card

Hello, below is the section that I made in Webflow and added Custom JS and CSS to make the cards auto scroll, now what I want to do is, make the cards active on hover as well. How can I achieve this? Read only: https://preview.webflow.com/preview/cloudeagle-test?utm_medium=preview_link&utm_source=designer&utm_content=cloudeagle-test&preview=b5b93a5d28635bd6e382ef53c380da5f&pageId=66447276fbd05a4bde060363&workflow=preview...

table of content using cms

Hello everyone has anyone had success in creating table of content in webflow just like these examples https://finsweet.com/client-first/docs/classes-strategy-1, or maybe https://help.figma.com/hc/en-us/articles/360040315773-Create-interactions#01H8EWXKDQ5WPZVWZM8NYC5RDC. We wanted to create a support page for our website using this method. Got any insights on this anyone or @Web Bae have you created something like this. I almost spent my whole day searching for this and did not get any concre...
Next