00:06 - Variables & Classes Setup 01:54 - Custom Code 03:13 - Example 1: Animate Section on Scroll 04:49 - Example 2: Animate Body on Scroll 05:44 - Example 3: Animate Navbar on Scroll 07:05 - How the ThemeCollector Code Works 🔥 Thank you Mr. Ricks! 🙌
Hi Tim, will there be any tutorial for all the other updates regarding spacing in Lumos? I'm a bit confused because the old spacing system with u-block-gap, text-margin-off, margin-trim-off, child-contain has been removed. How do we now create spacing between two buttons and add a max width to a heading while being able to control them via the parent text alignment? What's the deal with flow-root and the new utility classes for alignment? By the way, thanks for everything you do; you're an absolute legend!
Hi, yes I’m working on more tutorials and updated documentation! The new alignment classes and variables allow us to control the child flex styles from the parent’s alignment mode. This replaces u-child-contain, u-block-gap, and all of the workarounds we had to use before. The display: flow-root helps ensure the line height trim on text elements doesn’t overflow and affect the spacing outside of the text box.
Hey Tim…do you have another tutorial for theme modes using this with local storage so the settings persist from page to page and also can be changed by the users OS settings?
Awesome! I was actually toying with the idea of making a dynamic homepage were the site randomly chooses one of 4 color themes on load using custom code. These new variable modes seems ideal to make this happen, but I am not a coder however. Do you know of a good approach for how to achieve this? Could be random or some kind of cycle, either works🙂
awesome video and exactly what I need, will this work if a call the default variable collection "Theme"? I have laid out my variable collections slightly different and the default is holding all of my theme colours and dark mode
Thank you! The theme collection can't be the default collection sadly. Webflow doesn't include the collection name of the default collection in the variable names.
@@timothyricks this is what I thought, I'll just have to refactor the design system then. All good! Thanks again Timothy, you are a Webflow inspiration!
I have this working on everything but the nav for some reason? I have checked and everything seems to be in order - do I need to do something to the nav?
@@timothyricks Yeh no theme or variable set on any nav elements and the variables are linked back to the theme as they should be. Feels like a webflow bug or some really really tiny mistake that I cant see. WIll investigate
Hello Mr. Ricks! I have a question, on how you built the Component Variants to allow for both Theme and Brand props. I know the Brand CSS vars need to be set on the same element that the Theme vars are set on (*or one of its parents*), since the Theme Modes use the last value of the Brand vars, and if the Brand varss aren't already set those values would be missing. So I'm deducing that you've created the Color Variants on the root element, and the Theme Variants on it's immediate child, that covers its parent completely (so any background color would still work). Or, did you add an extra wrapper to the component structure, specifically for the Brand Variants? Sadly you don't show the structure inside of the section components in the video. Thanks for the amazing work! ❤
Hi, thank you! I applied the theme mode to the section component and then wrapped the section component in an extra parent component that has the brand mode. There’s a cloneable in the video description that shows the setup. 🙂
@@timothyricks Oops 😊 I didn't think to look in the Components panel - that's why I missed the example components that weren't used on the page. Thanks for taking the time to respond!
Hi, the Global / Visual component isn’t meant to be used with transparent images. It has a background color behind the image so the section doesn’t look empty when the image or video is loading in.
00:06 - Variables & Classes Setup
01:54 - Custom Code
03:13 - Example 1: Animate Section on Scroll
04:49 - Example 2: Animate Body on Scroll
05:44 - Example 3: Animate Navbar on Scroll
07:05 - How the ThemeCollector Code Works 🔥
Thank you Mr. Ricks! 🙌
Great! Didn‘t expect that you were that fast with the updated solution for this! Many thanks!
I’m so glad this helps!
Thanks a lot for the quick update !
Hi Tim, will there be any tutorial for all the other updates regarding spacing in Lumos? I'm a bit confused because the old spacing system with u-block-gap, text-margin-off, margin-trim-off, child-contain has been removed. How do we now create spacing between two buttons and add a max width to a heading while being able to control them via the parent text alignment? What's the deal with flow-root and the new utility classes for alignment?
By the way, thanks for everything you do; you're an absolute legend!
Hi, yes I’m working on more tutorials and updated documentation! The new alignment classes and variables allow us to control the child flex styles from the parent’s alignment mode. This replaces u-child-contain, u-block-gap, and all of the workarounds we had to use before. The display: flow-root helps ensure the line height trim on text elements doesn’t overflow and affect the spacing outside of the text box.
Hey Tim…do you have another tutorial for theme modes using this with local storage so the settings persist from page to page and also can be changed by the users OS settings?
Amazing. Thanks!
Love this Tim. Thank you :)
So glad this helps, Mike!
Awesome! I was actually toying with the idea of making a dynamic homepage were the site randomly chooses one of 4 color themes on load using custom code. These new variable modes seems ideal to make this happen, but I am not a coder however. Do you know of a good approach for how to achieve this? Could be random or some kind of cycle, either works🙂
That's great. Thanks for your content
oh tai
Ty for the great vid!
But can i make a Dark/light mode with this for my whole page ? or is there a better solution ?
Well done sir! Thank you!🤩
Thank you, Kyle!
awesome video and exactly what I need, will this work if a call the default variable collection "Theme"? I have laid out my variable collections slightly different and the default is holding all of my theme colours and dark mode
Thank you! The theme collection can't be the default collection sadly. Webflow doesn't include the collection name of the default collection in the variable names.
@@timothyricks this is what I thought, I'll just have to refactor the design system then. All good! Thanks again Timothy, you are a Webflow inspiration!
I have this working on everything but the nav for some reason? I have checked and everything seems to be in order - do I need to do something to the nav?
@ We’d need to make sure the nav doesn’t have a theme applied that would be overriding the body’s theme.
@@timothyricks Yeh no theme or variable set on any nav elements and the variables are linked back to the theme as they should be. Feels like a webflow bug or some really really tiny mistake that I cant see. WIll investigate
Hello Mr. Ricks! I have a question, on how you built the Component Variants to allow for both Theme and Brand props. I know the Brand CSS vars need to be set on the same element that the Theme vars are set on (*or one of its parents*), since the Theme Modes use the last value of the Brand vars, and if the Brand varss aren't already set those values would be missing. So I'm deducing that you've created the Color Variants on the root element, and the Theme Variants on it's immediate child, that covers its parent completely (so any background color would still work). Or, did you add an extra wrapper to the component structure, specifically for the Brand Variants? Sadly you don't show the structure inside of the section components in the video. Thanks for the amazing work! ❤
Hi, thank you! I applied the theme mode to the section component and then wrapped the section component in an extra parent component that has the brand mode. There’s a cloneable in the video description that shows the setup. 🙂
@@timothyricks Oops 😊 I didn't think to look in the Components panel - that's why I missed the example components that weren't used on the page. Thanks for taking the time to respond!
Hi Timothy, why does an image with a transparent background used with g-visual appear to have a faded background color in dark mode?
Hi, the Global / Visual component isn’t meant to be used with transparent images. It has a background color behind the image so the section doesn’t look empty when the image or video is loading in.
Great! 😊
Sweeeet!