Web Bae

WB

Web Bae

Chat and get help with Webflow and Javascript.

Join

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...

Horizontal Scroll with different length/(height)

Hey people I am using the horizontal scroll cloneable for a webcomic project (the one from this tutorial: https://www.youtube.com/watch?v=nyNLWHPooxM&t=20s) . For storytelling-reasons, I am using several instances of the "main" selector, by always duplicating it, which results in several rows of comic-panels. That works pretty great so far. The one issue I have is that some rows contain more panels than others, which makes the panels smaller to still fit the template. Now my question: ...

How to make a popup appear on page scroll, just one time?

Hey guys, how are you doing? I'd like to know how to make a popup appear on page scroll, just one time. The main objective is to make the user who scrolls 50% of the page pre-register for a consultancy. Is there a way to do this only with Webflow interactions?...

SDK with cloudflare Workers to Webflow?

Hey https://github.com/eRecht24/rechtstexte-sdk/tree/main i have the following SDK and want to try to automate the legal texts from the api. But i only handles. PHP. Is it possible with CLoudflare Workers? How can i do this with Javascript?...

Local vs Prod Dev (with a twist)

I'm trying to setup separate dev scripts but a little differently, because i don't want the dev script to be limited to the webflow.io domain, rather just whenever the localhost is available. So if the localhost is running, then it loads the relevant script from localhost. If the localhost is not running, then it loads the public script instead...

CRM Form Linking

Hi, I'm following along with this Webflow Forms tutorial: https://www.youtube.com/watch?v=L8vHArqjH2c&t=181s I'm trying to do exactly this - link my Webflow form to Mailerlite...

Filtering Categories (With Buttons)

hello everyone, i'm very new to webflow and would like to make a simple portfolio website, i dont have any issues right now because i havent even started building it i really want to know the right way to go about this before i start building, any insight would be really appreciated as i would love to learn and efficiently work within webflow...
No description

Slider

Hello! I need your help with the slider. I’m trying to achieve this result: https://webflow.com/made-in-webflow/website/collection-carousel?ref=made-in-webflow-search&searchValue=loop%20carousel I face a problem when I click on the arrow, the previous and selected slide look fine, but the next one doesn’t shrink. I checked the interaction setting on the example provided but can’t find where I’m wrong. Also, I would like to make the loop look infinite. Here is my preview, a slider is in the Analysis Overview section: https://preview.webflow.com/preview/anastasiias-top-notch-site-00e22c?utm_medium=preview_link&utm_source=designer&utm_content=anastasiias-top-notch-site-00e22c&preview=ea5ee8fa1e01c73c5c2d4f60a98e6a25&workflow=preview...