Framer Update: New Conditionals & Transforms

hey y' it's hunter in this video I'm excited to show you the latest conditionals and transforms that we've added to framer they allow you to dynamically change your layouts based on different properties and content you

have on your website I'll show you how it works in this demo file here we have a website for a local bird conference and a schedule with a list of events that come

from content in our CMS and what we will do in this video is make the layout of these items in the schedule respond based on CMS content let's open up the CMS to take a look at the structure of

our content if you click on one of the events we'll see they have a title a slug the type of event they are which can be either a talk a workshop or just

a casual event and then we have three location options big tent Rolling Meadows and cheerful cave then we have a time and an about section now that we know the structure

of our content let's head back to the canvas to make our layout resp on to it the first thing I noticed on our page is that it could use a bit more color and

it's hard to differentiate between talks workshops and just casual events let's fix this by showing a different color for each event type if we zoom in and we

select this little element on the left we can see its current fill is set to the primary color if we click the fill Title Here we can go to set

variable go to our Field named type and use a new convert option what convert option does is it allows us to say when the value from the

CMS equals talk in this example set the value to this color so for instance when it's set to talk let's make it Pink if

we go back we can add another condition so that when it equals Workshop we'll set it to purple then what the fallback means is

anytime it doesn't equal one of these use this color so for the Casual events and maybe any other events that we haven't set up yet let's use

black let's zoom out to see how it looks nice you'll see we have pink for our two talk items then purple for

workshops and that blurred black for casual now we can set the time and location using prefix transforms if we

go to time we can assign it to the content and we can go time and we want to add a prefix so we

can go time space and because location is an option we can go to set variable location display option and then on top of that because

we can change transforms we can add a prefix and we can say location space now one more thing I want to do here is

show the capacity of each location we don't want to update all our CMS items with the capacity let's just put it right into our design and make it respond based on the location we can

make this a stack then create a new text layer then we'll access the transform UI Again by clicking content set variable location convert

option this will set different content for our text layer based on what the location field of this current CMS item is equal to when this collection item

has a location of big tent I want capacity to say 200 when it's set to Rolling Meadows I want 500 and we'll add one more condition for

cheerful cave and then we'll say this holds 50 people and then on top of this we can add a

transform and we can say capacity space and let's add an M Dash so it fits in now with this transform we have everything responding to our

content and we didn't have to update any of our CMS items it just responds exactly how we'd like it now I'll show you one more new way to make your layout respond to your content if we preview

our site we can see that our content is starting look pretty good but if we click on the lunch for instance we'll notice it doesn't have any content because it's just lunch whereas the

other events have descriptions what we can do to fix this is use a conditional check to see if there is a description for each event and then conditionally show the

information button let's do that now so if we close our preview we can go to the info button and this is where our information overlay lives and all we have to do is go down

to visibility set variable about is set and that's it this condition will

set the visibility of the info button to yes only if about content exists in the CMS item if we preview our site we scroll down you'll see lunch no longer

has an information button and only the events that have information show that and that's been an overview of the new conditionals and transforms in framer we can't wait to see how you use

them on your own sites thanks for watching and I'll see you next time