Pretty & simple: how to use Webflow variables in client builds

Diego Toda de Oliveira, award winning Webflow developer, will join host Aron Korenblit to show how he's using Webflow variables in client builds.
Inspired by Diego's build of www.givingli.com/, he'll explain how variables reduces class bloat, how he uses variables to smoothly transitioning colors between sections and how to use them to easily animate SVGs.
Get the cloneable and more: wfl.io/livestream-variables
0:00 Starting soon
2:10 Introduction
4:34 Welcome Diego
6:21 What are Webflow Variables?
8:04 Variables in action in the Givingli website
11:03 Implementing variables in a build
17:27 Transitioning colors between sections with variables
31:05 Animating SVGs with variables and CSS
38:00 [Q&A] Can we use percentage variables to animate the SVG?
39:45 [Q&A] Can you set the transparency of color variables?
40:25 [Q&A] Can timed animations be used instead of scrolling animations?
41:00 [Q&A] What else could we animate with variables?
42:55 [Q&A] How to change color of an SVG using variables?
45:15 [Q&A] Are there ressources in Webflow University about variables?
45:56 [Q&A] Keeping in touch with Diego
47:20 Words of advice from Diego
48:25 Credits!
See you in 2024!

[@akbarbadsha25]

wow, great lesson, the scroll color change section how he simply teaches us, nice lesson.😍

[@Webflow]

Thank Akbar!

[@amcds2867]

Diego made a fantastic site!

[@Webflow]

Diego never disappoints!

[@MMFF88]

Amazing content. Thanks for a great lesson! Wow Webflow is turning my world upside down :D In a good way!

[@Webflow]

Woo! Hopefully we turn it back right way round in the next livestream ha! Thanks for the note, have a great day!

[@user-fe4vc8zd4e]

Nice! I have a question. In de designer the first section is blue, but if you go to the preview it is red. Looks like it takes the variables for the last trigger which is implemented (blue to red). How can you make it that the first section has the original colors like you see in the designer?

[@dec7952]

Thanks for this! It was great! Don't see the cloneable.

[@Webflow]

Hey Dec! I added it to the stream page here: wfl.io/livestream-variables

[@dec7952]

Ok thank you! Originally when I clicked on it in the description it took me back here.@@Webflow

[@Webflow]

@@dec7952 Thanks for letting me know, have a great day!

[@romzanali9930]

you are Zeke Jaeger, right?

[@DANIEL-er4iu]

Thanks for this. It's not clonable (link is just live site)

[@Webflow]

Oops! This is fixed, you can clone now, thanks for letting me know ^ AK

[@seancaillouette]

what's is your Patreon Chaneel?