Thanks for this - so helpful! Thoughts on how to make it work for a grid with uneven column widths? I'm working on something where the text side needs to be more like 1.5fr. When I set the columns to different widths, the edges of text within the grids don't line up with edges of text in non-grid (full-width) containers.

excellent Tutorial, I am having trouble defining an animation to start for an element wich top is already aligned with the top of the viewport, it plays well the first time but I cant really make it replaywhen I scroll back to top, any ideas on how I could tackle this problem?

UI designer and front-end developer with over 20 years of experience here! 😊I always enjoy watching your videos and truly appreciate the effort you put into them-great work! This particular approach reminds me of how I've built front-ends for most of my career. Interestingly, I've recently started going in the opposite direction, using more flexbox to handle these kinds of situations. That's what I love about front-end development-there’s rarely a "wrong" approach. It’s all about finding the method that works best for achieving the desired results. Keep up the fantastic work!

You're an absolute legend Tim! I changed it from "on-scroll" to "on-click" and used it to reveal my mega nav and the result is jaw-droppingly good! Thank you!

thanks!

Since the last Webflow update, the script no longer works for me either. Has something changed here?

Not sure if it is an issue with a recent Webflow update, but this no longer seems to be working. Double-checked by cloning and publishing the tutorial site, and on initial load, the loading screen does not animate out. Seeing the same issue on my own site.

When I added the code it made my entire section disappear on the live site? Anyone else have this issue?

New issue for me: On the nav bar, the effect: difference is no only working when the menu is open and not across the rest of the site.

Timothy something broken with this solution? When you are in stop scroll mode and scrolling with mouse after scroll start page is scrolled to bottom :( any thoughts how to fix this issue?

Knowing CSS well, and then using Webflow feels like cheating!

Thanks mate, helped alot:)

How did you rename the combo utility class at 03:55 to small-text when it already existed and how did the styles change to the small-text global utility class? When I tried to do that, I get the error already exists

Timothy, you are a true Webflow wizard. I use this in all my webflow projects, and even when I normal code without Webflow, this system works flawlessly! Thank you so much for your hard work!

This video was so helpful and humbling.

i was literally just thinking about reorganizing a clients website using a tagging system but didn't know how to approach it or if it was possible. it seems the answer is no, but timothy created a solution, so yes.

im not sure why mine is super glitchy when i put it on my website, how can i fix this?

does anybody have problems with the safari browser?

If I’m already using another styleguide system like Relume or Untitled, what’s the best way to use something one off like this?

Tim, you make the best videos and have introduced me to so many valuable resources. Thank you

This is a brilliant tutorial, Tim! It's easy to follow, you zoomed on the code to make it easier to read, and other well-done and well thought stuff! Thank you!

Hi Mr. Ricks. I love all your videos, they are top-tier and in my opinion you’re one of the best mentors out there. Thanks for your work.💪

Your tutorials are like wellness for my information seeking brain

Challenge! Use embed code icons with Component Variants. Now, I just can let clients choose between SVG icons, surely must be a way better way

I really like to use 5VW padding on both sides... what could possible go wrong? 🙂

bro why webflow crashes everyyyy 10 minutes

Hey, Timothy! Thank you for another great guide! I really appreciate what you are doing! Once i've started building through Lumos, i cant build using Client-First xD I have one project which im supporting, and it was on CF. Idk what to do, cause now CF seems to be super inconvinient, especialy when im working with unusual layout

At 6.16 you are switching the max-width from full to contained? Wouldn't that be a global change for every page that is using that same class? Just trying to understand the reason to switch the sizing.

Hi Timothy, This is fantastic. I am starting a new project and would like to use Lumos framework, but I don´t quite understand how to set it up. Is there a tutorial about setting it up, maybe buying/signing up?

I love this. Can you please make a full video, where you set up a whole website. Preferably with some very simple animations. at the same pace as this one. From A-Z. ❤

When it comes to the u-container util class, what if I want to have a smaller width container? At the moment I have the variables: site margin: 1.5rem width: 80rem container main: 68.75rem medium: 48rem I use the u-container for the most sections, but also want to have a smaller version as well. Would I need to create a combo class? e.g u-container is-medium Or create a separate class e.g u-container-medium

Perfect timing Tim! This is incredible ❤

Awesome! Great work Timothy. This is sleek! I'm definitely going to use this in one of my projects. Thanks a million man.

I love this video, and it's really helping me understand CSS and Lumos, so thank you! I have a sticking point at @4:40. For some reason, I get the notification 'non-list item can not be placed in a list.' Can you help me with this? *Issue Solved: had to delete all 3 list items and add a new one.

Confirmed in development this this week. This navbar system is sensational and is so so good as a Component system. Can’t wait to start playing with gsap’ing it next!😊

We cant thank you enough!

Yes! been needing this for a long time. Thank you sir.

Great tutorial, thank you Tim! Don't you think Webflow should add a way to open that little text field into a modal (which they already have) to write the custom code more easily...

Thank you so much Timothy, your video is amazing, as all your videos! This video is the best for the base understanding for swiper and to make perfect looking swipers. But i just had one issue (i use slater instead of codesandbox since it does not work anymore) the pagination dots are perfectly round and in shape when loading the page but directly after loading they change to "egg"-shaped (oval) and no matter what i do, i change settings in Webflow OR in the console while writing javascript, its just not changing. Thank you so much maybe you can help me with this one.

how do you test the scroll in play mode?

Can we use this method for Ycode?

Gooooood

Gracias! Realmente eres un mago haha

Timothy knows when I need some shit so he makes it happen😂 This is like the 10th time and I'm starting to be like "ahh, just leave it be for a day or two, my boy T will make a tutorial😂

Variable is getting more powerful already. Imagine when GSAP is integrated.

Honestly! You are the best gsap/Webflow tutor on KZbin and this gsap gpt is genius! Thanks so much!!!

Thank you!! Just one question, does this work with sections as well, or other elements? Or just for single images?

Just in time, thank you, Tim!

Hey Tim, Amazing tutorial, once again! Considering the latest Webflow update, will there be any major updates in Lumos or with the Lumos components anytime soon? Also, is there a new way to import Lumos into an existing project, or is using the shared library function still the best approach?

Great video! I’m also curious what you think about component variants :) would love to see a vid on that