Event, Framer Interviews

Framer Community Show & Tell August 3, 2023—Jia Yu Hong from LottieFiles and Paul Lapkin

54:06

2K views

Aug 14, 2023

About this lesson

In our next Show and Tell, I'll be chatting with Jia Yu Hong about how LottieFiles use Framer to build and run their business site, and Paul Lapkin on how he designed and built the beautiful Blaze Type Guide 🔥

Make sure to register for next week's Show and Tell, and add the event to your calendar – you won't want to miss this one!

• 0:00: Introduction

• 0:06: Paul Lapkin showcases the Learn Type site for Blaze Foundry

• 1:24: Conclusion of Paul's presentation

• 5:01: Introduction of Jia Yu Hong

• 6:07: Jia Yu Hong begins the showcase of LottieFiles and their use of Framer

• 23:54: Introduction of Paul Atkin's showcasing of the Learn Type website

• 24:25: Background information on Blaze Foundry and Learn Type book

• 27:28: Overview of the Learn Type website design and its collaboration with Blaze Foundry and motion designer Alan

• 34:00: Demonstration of the horizontal scroll effect

• 38:34: Use of custom fonts and their impact on the website's design

• 48:20: Demonstration of the Lemon Squeezy overlay for e-commerce integration

• 49:45: Conclusion of Paul's presentation

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00cool let's get into it today we're 0:03joined by gu who is going to be 0:04showcasing how lighting files have used 0:06framer to build their business site and 0:09Paul latkin who is going to be showing 0:10the amazing Learn Type site for Blaze 0:12Foundry I'll pass it over to them now 0:14through some quick introductions do you 0:17do you want to go first 0:22yeah sure hi everyone my name is Joe Yu 0:26I'm a product designer on the web team 0:28at Lottie files and I've been here for 0:31about two and a half years 0:34amazing that's cool thanks to you Paul 0:37do you want to do a quick intro 0:41yeah sounds good 0:43so uh yeah my name is Paul Atkin I'm a 0:46freelance digital designer based here in 0:49Toronto Canada 0:51um I've been designing for around 10 0:53years now and I've been using framer 0:56mostly for the last year and a half 0:58creating websites for like startups uh 1:03creatives to kind of give them a 1:04competitive Advantage online 1:08people 1:09all right let's jump right into it we're 1:11going to start with the GU Showcase of 1:13Lottie files as I mentioned please be 1:16sure to ask any questions that you've 1:17got in the chat and I will I'll pass 1:19them over once the presentation is 1:21finished uh take it away to you 1:24okay thanks Kate let me just share my 1:28screen 1:34okay so yeah like I said 1:38um I'm on the web team at light file so 1:39I work on the website with a couple 1:41other designers and a bunch of 1:43developers and we started using framer 1:46about sometime last year I don't 1:48remember exactly one and it's been super 1:51super useful so before I get into that 1:54and how we use body here at Lifestyles 1:56I'll just give you a brief overview on 1:58plotty for those of you who don't know 2:00it so 2:02just to summarize a Lottie is a Json 2:05based animation file format that lets 2:08you ship vector-based animations on 2:10multiple platforms like web IOS and 2:13Android and because it's Vector based 2:16you can scale it up or down and it never 2:18loses quality and it has a small file 2:21size compared to other video or 2:24animation formats like GIF or MP4 2:27and you can program it to be interactive 2:30for example 2:32um play on Hover play on click syncing a 2:36lot of Animation to your scrolling or 2:38with your personal cursor position and 2:41so on 2:43so that's what a Lottie is and a lot of 2:46files is a platform for discovering 2:49testing collaborating and using body 2:51animation so we have an extensive 2:53library of animations that are 2:55completely free to use and a collection 2:57of tools and Integrations that support 2:59using Lottie and all of your favorite 3:02tools so an example here so we have a 3:06plug-in for figma for After Effects and 3:09for some popular animation tools and 3:14online platforms you won't need any 3:16plugins because they already support 3:18Lottie natively for example webflow 3:20canva medium and of course framer 3:25so during the time that I've been here 3:28the website has changed quite a bit we 3:30went through like a rebranding a revamp 3:32of the website a creation of a design 3:34system and a revamp of the design system 3:37and one of the most impactful changes 3:40that we did was when we started using 3:43framer 3:45so why did we start using framer 3:48so before let me just 3:50change over to this yeah so before this 3:54was what the process of getting a web 3:57page from design to implementation was 4:00like so the designers were designed on 4:03figma we'd hand it off to the developers 4:06developers build it they push it to 4:09staging and then the designers review 4:12and do QA on staging and this is where 4:15this is what tends to take a lot of time 4:19um there could be multiple rounds of 4:21reviews or qas sometimes the design 4:24doesn't 4:25turn out how we think how we expected it 4:29to or there's some like un unexpected 4:32issues uh during QA or when the design 4:36is implemented so this is where it takes 4:38a lot of time and it's like a huge 4:40headache and after all that's done 4:43everything's fixed and everything's good 4:44to go with them we give the developers 4:46the okay and they push it to production 4:50so any edits to after pushing to 4:54production whether it was major or minor 4:56required a developer so the turnaround 4:58time was kind of could be kind of long 5:01as there are more dependencies 5:05and one day our co-founder not too came 5:08to the design team and said hey there's 5:09this cool tool called framer and it lets 5:12designers build and publish Pages 5:14without code so why don't you guys try 5:16it out so our goal was to try to 5:19streamline this whole process that I 5:21just went over 5:22and not to mention make it quicker to 5:24make any design edits or copy edits and 5:28framer has been super helpful on that so 5:30now 5:32are processed after using framer and 5:36implementing it into our workflow is 5:37like this we design on figma 5:41and sometimes we can skip this step if 5:44the page that we need is based on a 5:46template that we already have on framer 5:49so we we could even skip designing a 5:52figma we build on framer we can push it 5:55to staging and review it ourselves 5:58there's not this like back and forth 6:00between the designer developer 6:03and then we can push it to production 6:07so the reason this is possible is 6:10because our developers have laid the 6:11foundation and set things up so that we 6:13can push pages to production ourselves 6:16via strappy which is the CMS that we use 6:19so we can essentially design and publish 6:22and do any edits with minimal 6:25involvement from the devs so the quick 6:27the turnaround time is way quicker than 6:30before 6:32so here at Lottie files we usually use 6:35framer for landing pages and the 6:38designers use framework for landing 6:40pages and the developers focus on pages 6:42that require functionality so not every 6:45page on our website is built on framer 6:50yeah and in the past several months 6:52we've been focusing on localization a 6:54lot and framer has also been really 6:57useful in our localization efforts so 7:01we've translated most of our highest 7:03priority landing pages in two different 7:06languages like Spanish 7:09Portuguese 7:12Japanese and Korean 7:15and of course this is it's also in 7:17English 7:20and 7:22uh 7:23yeah so how let me show you how we do 7:27this so first we have the page 7:32we have it designed on framer so we use 7:35the CMS 7:37for this and for all our localization 7:40so this is the English version 7:43and we have versions for Spanish and 7:47Portuguese here 7:49so 7:51let me just show you what the CMS is 7:53like 7:56so um what is good about the CMS is we 8:00can just build a landing page one time 8:01and any copy that we need to be 8:05different so basically all the text on 8:07here because they all have to be in 8:08different languages we put them into 8:11this CMS so that uh like the the English 8:16version would pull from like the English 8:18CMS collection and Portuguese would pull 8:21from Portuguese but everything else 8:23would everything would be the same 8:24basically 8:25so you don't have to like duplicate any 8:28work 8:29and yeah so the point of doing this is 8:33we want to translate our most popular 8:36landing page like mainly informational 8:38pages so that we like people from other 8:42um 8:43other countries 8:45and who are used to different languages 8:47can learn more about Lottie and we can 8:50serve the right version of a page to the 8:53appropriate audience 8:56and because there are so many fields let 9:00me just show you our CMS actually 9:02so there's a ton of fields because 9:05there's so much content on this page 9:08so how we actually manage it 9:11is we use a Google sheet 9:15like this 9:18so when we get a new translation we add 9:22it to this Google sheet and we use this 9:25Google sheet as the source of Truth 9:28and we just have to make sure that all 9:30the titles are the same like all the 9:34fields are the same 9:36and the content is in the right place 9:38and then you copy this we copy this 9:41whole section here 9:44and maybe I'll just show you you see 9:46copy I'll make a new sheet 9:50and then you paste it 9:53paste transposed 9:55and then you'll do let's say um 9:58like I just got this new French 10:01translation 10:05so I'd do it like this 10:07yeah so you make sure that the fields 10:09are all correct and then you can 10:10download this as a CSV file 10:14so then on framer on the CMS 10:22instead of creating a new item and 10:24having to fill out these fields one by 10:27one which would take so long 10:30you can just import it and upload 10:34yeah upload your CSV file 10:40yeah so that's how we use framer CMS for 10:44our localization and this isn't the only 10:47page we have like a ton of pages that 10:48we've translated so we use the CMS a lot 10:53and another thing that framer has 10:56requested me to share about is how we 10:59integrate framework pages with our own 11:01site navigation and Footers 11:04so let me use this page as an example 11:09yeah so when you go on the lobby file 11:11site you'll see that we have the 11:13navigation and the footer 11:16the same on every single page even 11:19though not every page is from framers 11:21some pages actually many pages 11:23especially more functional Pages or tool 11:26Pages 11:27um they're built on our own code base 11:32um but yeah we need the navigation and 11:34the footer on every single page so 11:36apparently this framework team has 11:37received questions from other people or 11:39even other companies who are really 11:40curious how we do this so let me just 11:43show you 11:44so what our developers do is that they 11:47scrape the code from a framer page so 11:49let's say 11:51uh it's this page 11:54so this is the framework page see it 11:55doesn't have the navigation or anything 11:57because we didn't build it in framer we 11:59didn't build the navigation into framer 12:01so they would scrape the 12:05let me just change that yeah they would 12:08scrape the code from here 12:11and then they'd put that code into a 12:15container 12:16and insert it into the body section of 12:19the HTML so 12:21let me show you 12:26so if you look over 12:28if I go and hover over here so this is 12:32from our own code base but all the 12:34content between the navigation and 12:36footer is from a frame or page so it's 12:39like a sandwich so once I go here you 12:41can see you can see on if you look on 12:43the right side you'll see the class 12:45framer right 12:49so this is where this is what I mean by 12:52um when I say that they scrape the code 12:54and they put it into a container 12:56so 12:59um yeah and they put it in the body 13:01section of the HTML 13:04so it's actually pretty simple to do 13:07and for some pages like this the entire 13:11body is all framework content 13:14but on other Pages we kind of mix the 13:17content for example on our home page 13:21so on this page this isn't from framer 13:25this from our code base 13:27and the content here is from framer 13:31so to do that you'd basically do the 13:33same thing except 13:36you'd have your own code above and below 13:38the frame or content so see this isn't 13:41framer content 13:43this isn't framer content 13:45but everything starting from here you 13:47see that same 13:49and Turner container for the framer page 13:53yeah so 13:55integrating frame reviews with your own 13:57sites navigation and Footers and even 13:59page content is actually quite simple 14:04so 14:05yeah and 14:08um with framer we can also make multiple 14:10variations of the same landing page for 14:13a b testing so a lot of files we use 14:16growth Book for a b testing and just to 14:19be clear you don't need growth book I 14:22mean you don't need a framer to do a b 14:24testing on growth book but how it's 14:26helpful for for us is that it makes it 14:29easy for the designers to create or edit 14:32those different variations that we want 14:34to test so for example if you look at 14:36this home page 14:38um how we might do a b testing here is 14:41we might want to test different 14:42variations of the copy on this button so 14:45I'm logged in right now so it says go to 14:48my dashboard but if I was logged out it 14:49would say something different so we 14:51might want to test different variations 14:52of you know if it's getting started if 14:55it's sign up now register now and see 14:58which leads to more conversions 15:00so to make those variations we would 15:03duplicate the original page on framer 15:05and then put those two variants of 15:09the same framework page on growth book 15:12and monitor the performance so I'll just 15:14show you a little example of what that 15:19is like 15:22so this is just an example it's not like 15:25a 15:26it's just placeholder information 15:30um so this isn't real data so what's 15:32happening here is traffic is being split 15:3550 50. for a pricing page 15:39for users who have Korean KR as their 15:43preferred language 15:45and what you see here pricing page one 15:47KR and pricing page 2K are these would 15:50be the two variations of the frame or 15:53page 15:54that we would want to test and if one 15:57performs better 15:59then we roll it out to 100 of the 16:01audience and we keep that version of the 16:04framer page 16:08so the last thing that I'll share about 16:10is 16:12uh how we use code overrides on framer 16:16on our website so even though framer is 16:18a no-go tool sometimes we make use of 16:21its code override section and one main 16:24way that we use it is to keep some 16:26information that we display across our 16:29website consistent so for example 16:33it's here 16:35yeah so if you see this bit 16:38um trusted by 5.5 million developers 16:40designers and developers from over 250 16:43000 companies worldwide this section 16:46um we repeat across multiple pages on 16:49our website 16:51and because we need to update these 16:53numbers every so often it's pretty hard 16:55to keep track of every single instance 16:57where 16:58we use these numbers and have to update 17:01them one by one 17:02so what we do is 17:07so this is a this is a screenshot of 17:10what this page looks like on framer 17:12so we've added a code override on framer 17:16a files called strappy numbers 17:18and 17:20what it does is it's it replaces a 17:26it replaces the numbers for the you know 17:30how many however many million designers 17:32and however many companies 17:35um and calls it from where we store 17:37those numbers on strappy so 17:40you'll see here on the actual design we 17:43didn't I didn't put like the number but 17:46instead we put like a bracket users and 17:48bracket companies so when you go into 17:51the code 17:54this is 17:56this is what it looks like 17:58and let me 18:01yeah 18:02so here you can see 18:04um this code override is calling the 18:06data from strappy 18:09and 18:11here uh you'll see what on the code it 18:14says replace bracket users with the user 18:18count which is from strappy and replace 18:20bracket companies with the company 18:22account and that's from strappy so how 18:25this is really helpful is that when we 18:28need to update these numbers there's 18:30only one place we have to update them 18:31which is on strappy which again is the 18:34CMS that we use so we update the number 18:37for the companies and for the designers 18:39and developers once on strappy and if we 18:42have this code override added to a 18:45framer page or framework project 18:49um the new number should reflect 18:51immediately so we don't have to go to 18:52every single page and update manually 18:56update the numbers 19:01so yeah that's how helpful framer has 19:04been at Lottie files it's really changed 19:07the way that we work and helped us to be 19:10more efficient and also given designers 19:13a little bit more 19:15power I guess not power but 19:19um yeah just like power like autonomy I 19:21guess because we can design we can build 19:25the page according to our design 19:28um without having to uh depend too much 19:30on a developer and any updates that we 19:33get to the content or from marketing 19:36it's really easy for us to update it 19:39ourselves on framer 19:42amazing super cool to see how you're 19:45using framework a lot of files we have a 19:47couple questions in the chat do you free 19:51um first one is why this why did you 19:53pick the CMS for localization not 19:55something like weak lot 20:00um I think it's because we were already 20:01we already used to using framer 20:06so 20:07uh using the CMS just seemed kind of 20:10easier we haven't really explored much 20:11using we got we get our translations 20:14from 20:16um Gango and also there's an agency that 20:20we work with to get translations but 20:21cool yeah since we're already using 20:23framework trying out their CMS for 20:25localization theme 20:27like a a good Next Step yeah totally 20:32that makes a ton of sense thank you for 20:33answering and I think you actually 20:35answered a bit of the next question 20:37which is how do you actually do the 20:40translations do you do it manually I 20:41think you mentioned that you use an 20:43agency is that right 20:44yeah so we use this thing called Gango 20:49um 20:51so how that works is I think we it works 20:54better for short translations so if you 20:57have like a whole page it might not be 21:00the best 21:01so we get translations from Gango and 21:04then we run it by the agency or get 21:06someone to proofread them so for some 21:08languages we have people in our company 21:11who are fluent in them and they'll help 21:12do the proofreading and for others we 21:14don't really have anyone in the company 21:16Who 21:17Um can see that language so we go with 21:20the agency and they proofread and make 21:23sure everything sounds cohesive for and 21:25online page yeah and then we put that to 21:27the Google sheet and then into Kramer 21:29amazing cool thank you 21:32um one more question we had from Habib 21:34who is a huge fan of vlogging files 21:37um and this is uh not specific to Lottie 21:40Falls but I'm curious of your take on it 21:42um he said I see often that teams prefer 21:45to design in figma and then build in 21:47framer what do you think is still 21:49missing in framers so that you could 21:51feel comfortable to design directly in 21:53framer itself 21:55[Music]21:55um 21:58that's a good question 22:01um 22:02I think framer is great for building but 22:06somehow 22:07doing those quick iterations when you're 22:09first starting with a design still feels 22:12easier on figma because you know on 22:16figma you don't have to worry about the 22:19you know responsiveness anything like 22:21that 22:22um it's just it just feels easier to 22:26like do those like quick sketches and 22:28then once you have a final design then 22:31you put into framer and then you can 22:32start getting more into like the little 22:34details of like how like what's the 22:36responsive behavior for this section 22:37yeah so maybe part of it is like just 22:40habit and also all of our figma files 22:43are on 22:45um well yeah they're on figma so 22:47everything that we've had uh designed in 22:49the past few years they're all on figma 22:52and not every single page that we have 22:54is on framer so that's why we still 22:57prefer to use figma I think they they're 22:59both really good tools but they serve 23:01different purposes for sure yeah 23:03absolutely cool thank you I'm always 23:06interested to hear other people's take 23:07on that question thanks for it thanks 23:09for asking it Habib 23:11um does anyone else have any questions 23:13for for a giu just while we have her 23:17um speak now or forever hold your peace 23:20question 23:22sweet okay amazing thank you so much 23:25again you that was that was really 23:27really cool to hear uh I think it's 23:29great to hear from the bigger businesses 23:30who are building their sites on 23:32framework around how they're how they're 23:33approaching different solutions uh so 23:35yeah thank you so much for your time I 23:37really really appreciate it 23:39yeah thanks for having me thanks 23:40everyone you're welcome anytime uh we 23:43will move over to poll next Paul is 23:47gonna speak about the Learn Type site 23:48that he built for Blaze Foundry so Paul 23:51will hand it over to you 23:54thank you Kate hey everybody uh thanks 23:57for tuning in and thanks again to gou 24:00for that amazing presentation that was 24:01really cool seeing how everything was 24:03built on naughty files uh yeah so today 24:06I will be walking you through how I 24:08designed and built the Learn Type 24:11website for Blaze type I have the book 24:14here if anybody has seen it 24:18um really cool a lot of great 24:20information in here how to create your 24:22own typeface but before we jump into 24:25that 24:26um I just wanted to give you a little 24:27background on Blaze type so bear with me 24:30here I'm just going to share my screen 24:32we're going to go into Inception mode 24:37already so Blaze type is a independent 24:42uh type boundary based in France uh 24:45really cool they create like a lot of 24:47like bespoke and like contemporary 24:49typefaces 24:51um they're all very unique so for 24:53example 24:54um this serif typeface here is called 24:57apoc and each kind of like 25:00each end has like a little spur it's 25:02very unique kind of like a little darker 25:04Edge to it 25:05um and a lot of these typefaces are made 25:08with an emphasis on variable typefaces 25:11which is not available in framer right 25:13now but we'll be at some time in the 25:15future and variable typeface is really 25:17cool because 25:19um if you've used figma you can see that 25:21they kind of like you don't have like 25:23one static like thought width like 25:25regular medium or bold you can kind of 25:28like make it very precise and you can 25:30scale from any size from like zero to a 25:32hundred so you can do a lot of really 25:34cool stuff with that we could probably 25:36do a whole presentation on variable 25:39typefaces themselves 25:41but for this presentation I'm going to 25:44be talking about the Learn Type website 25:47so Matthew the founder of lace type came 25:52to me because 25:53um he was designing a book on how to 25:56create your own typeface so he really 25:58wanted to make kind of like a cool cool 26:01like experimental landing page to kind 26:03of like showcase the book and generate 26:06sales and create a lot of Buzz for like 26:09his new product 26:11um so I'll just kind of like run through 26:14this website here and walk you through 26:16it and then we'll kind of like go into 26:18the framework file and I'll show you how 26:21I built a lot of these cool features 26:23so this website 26:26um I'll refresh so you can see the 26:27loading animations 26:30this website is built on custom 26:33typefaces so we're not using any of the 26:35kind of like regular Google fonts or 26:38font share fonts so no enter on this 26:40website we're mainly using rules which 26:44is like um kind of like the Bold serif 26:46typeface here and nuances so these are 26:49two custom typefaces by Blaze type and 26:52these are also the fonts that Matthew is 26:55using in the book so we wanted to keep 26:58everything kind of like really simple 26:59and minimalistic and also create kind of 27:02like a cohesive experience across like 27:04digital website and the printed book 27:07itself 27:09scrolling down here these Motion 27:12Graphics are created by awesome motion 27:14designer Allen I can share his Twitter 27:17link later this website was kind of like 27:20a cool collaboration between me Blaze 27:22type and Alan so to kind of like bring 27:26everything together 27:28um 27:28coming down 27:30um we'll just kind of like scroll 27:31through the website quickly there's a 27:33lot of like immersive kind of like 27:34scrolling animations 27:36um we really wanted to create like a 27:37cool minimal experience to just kind of 27:39like 27:40um you know demonstrate what was 27:41possible in framer so we're using a lot 27:43of like scroll Transformations 27:46um tickers uh different uh scrolling 27:49effects that you see as we go through 27:50the page 27:55one really cool thing coming up here is 27:58we have like a horizontal scroll effect 28:01a lot of people ask me 28:03how this is done so this effect is not 28:06necessarily native in framer but with a 28:09quick little hack it is very possible so 28:12I'll run you through that when we go 28:13through the framer file 28:15um going down is just kind of like 28:18more about the book learn how to design 28:20professional fonts you know this guide 28:23is created for anyone interested in type 28:25design or font production there's a lot 28:27of really cool stuff inside this book so 28:29basically the book is designed to teach 28:32you how to think sketch design and 28:35create your own typeface there's a lot 28:37of really cool information inside of 28:39there 28:40here's just kind of like some 28:41promotional images from the actual book 28:43itself so these Graphics were created by 28:45Matthew the founder of police type 28:49and this is just kind of like a little 28:50sample of what you might find in the 28:51book you know how to create your own 28:53Sans serif typeface you know how to work 28:56on the letter s 28:57you know drawing good paths how to 29:00sketch different letters in the glyphs 29:02app 29:03uh you know kind of like an overview of 29:06different capital letters 29:07and creating your own variable typeface 29:10so again all this information is 29:11available inside the book 29:14um and down here is just kind of like a 29:16little like eCommerce section where you 29:19can actually purchase the book 29:20so when we created this website one of 29:23the big challenges was that e-commerce 29:26was not directly supported out of the 29:28box you know framer and we wanted to 29:31make it easy for customers to be able to 29:33buy the digital PDF which is only 17 29:36Euros so in order to do that I kind of 29:40like 29:41hacked together a little lemon squeezy 29:44checkout page so we use lemon squeezy 29:47because 29:48um it has kind of like low fees there's 29:51like a direct checkout page and if 29:53anyone should use gumroad lemon squeezy 29:56is kind of like their competitor 29:58um and a lot of designers are using it 30:00now on Twitter 30:02um and I'll walk you through how I 30:04created this later but essentially this 30:07is a 30:08kind of like 30:10overlay nested inside the website style 30:13to look the same as the website so it 30:16feels like one whole experience and you 30:18don't leave the website so it kind of 30:20like keeps you on the website and makes 30:21it very easy to purchase the book and 30:23check out 30:25and again we also have the book slash 30:28PDF combo and this one is available on 30:32Lulu which is a separate website you can 30:34kind of like buy like a printed 30:36published version of the book that I 30:38showed you at the beginning of the 30:39presentation 30:40and 30:42um down here we just have like a little 30:43table contest just kind of like 30:45you know displays everything that is 30:48inside the book 30:49this is one um kind of like big 30:53accordion component 30:55um 30:56each one of these kind of like nestic 30:59sections 31:00um is linked so you click one and then 31:02it switches to a different component and 31:05it shows you the content inside the 31:07other box 31:08down here is like a little simple footer 31:11it just kind of like shows the payment 31:13methods how to contact list type 31:16um a little cold phone saying that you 31:18know the website was made in framer it's 31:19designed by me and that's pretty much it 31:22uh so from here 31:24I will dive into the actual 31:28fragment file so 31:32all right so oh one of the cool things I 31:35forgot to show you uh as we're going 31:37through the website is that 31:39um this is actually 31:41uh built on themes so there's oh shoot 31:44my sharing screen button is getting in 31:46the way here 31:50there we go 31:52yeah so this website is actually themed 31:55to 31:56um have native light mode and dark mode 31:59so depending on your um kind of like OS 32:02settings the website will automatically 32:04switch from light to dark 32:06um so in the light version we have like 32:08a white background with red text and the 32:11dark version we have a black background 32:13with white text I did try The Red 32:15version it uh it did look a little bit 32:17devilish so we opted to just use white 32:20text instead 32:21but that is another topic 32:25um it'll just be kind of like jumping 32:26into how this 32:28files actually make so this whole 32:31website is built on a 12 column grid 32:34system 32:35um so everything's kind of like 32:36influenced by like the Swiss typographic 32:39style the Swiss design style if you're 32:41familiar with that so big emphasis on 32:43like kind of like white space uh 32:45typography uh you know alignment grid 32:49systems so they're kind of like 12 32:52column grid system is a foundation of 32:54this website 32:56um and if you're using a Mac computer 32:58you can access the grid Lines by 33:01pressing Ctrl G 33:04kind of like make it up here in gopher 33:06and I'll show you this as we go through 33:09the page more 33:10so one of the big sections that I wanted 33:12to show everybody was how we created 33:15this kind of like 33:17horizontal scroll effect 33:20that you see halfway through the page so 33:22again I'll just show you it here 33:27and once we get to this part here 33:28learning type design has never been so 33:30easy 33:31so this is a really cool effect that you 33:32can add to your website to create like a 33:34cool horizontal scrolling experience and 33:37think so it'll kind of like start 33:39scrolling sideways and then once you 33:40reach the end it'll start scrolling 33:42vertically 33:45um so in order to do this I kind of 33:48created a 33:50nested 33:52frame here called gallery and there's a 33:56lot of images in here I have four images 33:58and as you can see they kind of like 34:00extend it's about 200 percent 34:04with 34:05of the canvas and how this works is that 34:09I applied a scroll transform to these 34:11images 34:12and there's a scroll trigger in place so 34:15once you reach a certain section on the 34:16page you know the transform will take 34:19place and what's actually happening here 34:21is that when you reach the section of 34:24this page I am doing a offset so I 34:28measured the size of all these images 34:30and the width altogether was 2400 pixels 34:34so when we get to this section we do an 34:36offset of minus 2400 so I'll just adjust 34:39this number here 34:41so you can see 34:42you know minus 1200 you know we don't 34:44not particularly at the end of this 34:46section yet 34:48and as I kind of increase that number 34:49you'll see it kind of like moves further 34:51to the side 34:53once we get to 2400 the content is 34:55completely out of view 34:57and that's kind of like the end of the 34:59animation you see when it's going to the 35:01page in order for this effect to fully 35:03work 35:04I created another section directly below 35:07it so this invisible white box 35:09and what this has is a scroll section 35:13and I call it scroll trigger 35:16it's again right here let's go and 35:18create it again scroll section 35:21and it's called scroll trigger so what 35:23happens is um 35:26this element here the actual image 35:29gallery 35:30is set to position sticky so what 35:33happens is when you get to this kind of 35:35like section of the page 35:37the gallery block kind of like sticks to 35:39the top of the page and it stays in 35:41place and I set the viewport height to 35:44100. and what that does is make sure it 35:47just kind of like takes up the whole 35:48vertical space of the screen 35:50and then what you can't see is that the 35:53other section is still behind it so the 35:55scroll trigger this section also has a 35:58100 viewport height 36:00and these are both nested inside a stack 36:04so in order to have like sticky sections 36:06you need to kind of put create a stack 36:10and framer and you need to set the 36:12Overflow to visible 36:15so this allows you to kind of like do 36:17that sticky effect and I isolated them 36:20inside this one section called 36:21horizontal scroll to ensure that the 36:24gallery does not stick on top of all the 36:26other content on the website because if 36:28it wasn't if it wasn't inside the 36:29horizontal scroll stack 36:32um everything would kind of like 36:34um scroll underneath it which would make 36:35the effect not work 36:37so I can dive into this more later on if 36:39people want to ask me more questions 36:42it's kind of a little complicated but 36:44once you get the hang of it it's pretty 36:45straightforward 36:48um 36:48one of the other things people ask me 36:50about this website is the actual 36:52typefaces themselves 36:54so these are all kind of like custom web 36:58fonts that I uploaded to framer so if 37:00you're not familiar with that 37:02um you just click on any type layer so 37:05I'll detach this for now 37:07um yeah so this is kind of like the 37:09native font picker that people are used 37:11to seeing in framer pack all the web 37:13fonts from Google or font share and I'm 37:16using custom typefaces so the fonts I'm 37:19using are nuances condensed and rules 37:22rules is kind of like more like a 37:25helvetica looking typeface kind of like 37:27a Swiss grow test plot and nuances is 37:30more of kind of like a display serif 37:32typeface so lots of like kind of like 37:33individual quirks in this font for 37:36example like the O is kind of like facts 37:38that I did and they have like these 37:39really big Spurs on top of the letters 37:41and it's kind of like all these unique 37:43little qualities so in order to do that 37:46you just collect your fonts and you go 37:48to the custom Tab and you click on the 37:51upload button here to add a new typeface 37:53so I will go to release type here 37:58go into 38:02just kind of like show you how this is 38:04done 38:05yeah you just kind of like grab your 38:06font 38:08framer uses walk 2 files for the web 38:10because they're like um 38:12the file size is really small they load 38:14really quick and they're compressed for 38:16the web so these are the typefaces I'm 38:18using so you just pick the one you want 38:19and then you upload it and then it 38:22automatically appears in your custom 38:24font Library so that's really cool 38:28um one of the other things I'm doing on 38:30this website is we kind of like a lot of 38:32like 38:34pure animations for the kind of like 38:37headings when you scroll through each 38:39section 38:40I'll demonstrate again here so as you 38:42kind of scroll through each section the 38:44titles will like slide up from the 38:45bottom as well as some of these images 38:48here in order to do that you can either 38:50use the 38:52I believe there's a kind of like a magic 38:54text plugin that Benjamin created on the 38:57kind of like framework component website 38:59but these are actually all done with 39:01appear animations because I wanted to 39:03kind of like stagger and offset them 39:06so what I did was I kind of have like a 39:09stack here that I created for the title 39:12section and because I'm using kind of 39:15like a mix match of like serif type 39:17faces 39:18and 39:20um sensor typefaces I kind of had to 39:23like offset them a little bit to make 39:24sure the Baseline was lined up so if 39:26you're not familiar with the Baseline 39:27it's just kind of like the kind of like 39:29invisible line at the bottom that just 39:31make sure it's these two fonts line up 39:33so I will adjust the pattern here so you 39:35see they're kind of like they're not 39:36lined up so on the serif fonts I set the 39:40bottom adding to eight just to make sure 39:41that 39:43they lined up perfectly at the bottom 39:45here 39:46um and inside 39:48each one of these kind of like 39:51stacks for line one line two and line 39:54three I created a appear animation so in 39:58a paradigm animation is basically the 40:00animation that takes paste when the page 40:02loads 40:03and what I did was I went in here 40:06and I set a offset 40:09of 160 so that's kind of like the 40:12vertical height of the font 40:14and that ensures that 40:16when the page loads the typeface is out 40:19of view 40:20again set it back to 160 and I applied a 40:23spring animation to kind of make it keep 40:27it like that smooth reveal effect and 40:29each one of these words has a different 40:31delayed property 40:33so it starts with The Blaze type guide 40:35zero seconds learn is 0.15 seconds and 40:40there's kind of like a 0.15 second delay 40:43between each one so once you add all 40:46those up we get to about 40:490.75 seconds and when I load the page 40:52you'll see there's kind of like a little 40:54stagger between 40:56each of the words loading in 41:02um and this is a really cool effect I 41:03use this on a lot of my websites 41:06um for example the Sebastian Camargo 41:07website or my own personal website that 41:10I'm working on right now and the 41:12blazetype website I think it's just kind 41:13of like a really cool minimal effect 41:15that adds kind of like the extra layer 41:17of Polish to the website and makes it 41:19feel a little bit more immersive as 41:20you're going through the page and in 41:22order to make this possible you just 41:24need to make sure that the uh the stack 41:27or the frame that the the letters are 41:31contained inside as the Overflow is set 41:34to hit it that way 41:36um one kind of like the words are out of 41:38a few they're hidden and they're kind of 41:41cropped off and then it kind of creates 41:42that cool effect as they come into the 41:44canvas 41:46um 41:47and I applied this again on the other 41:49headlines throughout the page except 41:51with these ones because I wanted the 41:53effect to appear each time you scroll 41:57past the letters so not just on load but 41:59every time you scroll past the headlines 42:02so let's kind of go back and forth here 42:04I applied a scroll transform to these 42:07instead so a Scrolls transform is kind 42:10of like the appear animations except 42:12with these effects they kind of like 42:15appear on Loop so every time you kind of 42:18like go past the section on the page the 42:21scroll transform will repeat again 42:25uh 42:27and I'm not sure how much time I have 42:28left 42:30um 42:31take that time to share one more thing 42:33yeah go for it why not okay cool let's 42:37do it all right so the other thing is 42:41the lemon squeezy overlay so 42:46um we went with an overlay 42:50um just to kind of like create like a 42:52whole kind of like cohesive experience 42:54on the website so that when you go to 42:56buy the digital PDF of the book 42:59um you know you don't go to like another 43:01checkout page you don't leave the 43:02website you know stats show when you 43:04stay on the website the customer is more 43:06likely to purchase the product and this 43:08is essentially a component uh nested 43:12inside a button so in framework you can 43:15add overlays to 43:18um any 43:19um layer so in this case when you tap 43:23the buy now button it triggers a overlay 43:26and inside this overlay is a component 43:30so scroll back to the top here 43:34for the lemon squeezy checkout page and 43:38this component has two variants so there 43:42is a loading variant that has like the 43:44dot dot dot animation and then after a 43:47certain number of seconds it switches to 43:50the 43:51checkup page which you can see let's 43:54click play button here 43:59um it's not moving 44:04try that again on the home page 44:08click this button you know let's go to 44:10the book 44:15you must be an error right now 44:18essentially 44:20um what you can do is 44:24you can tie an overlay to any object 44:28um 44:28so I can kind of create a new one from 44:30scratch here just to show everybody how 44:32it's done 44:40all right so I am going to add 44:44a new button here and do it from scratch 44:47so I created a whole kind of like 44:49passage panel here 44:51um for each item on the website it's 44:53very organized I have it organized by 44:55accordion buttons images overlays 44:58sections 44:59and here I want the large overlay button 45:03so here I'm going to change this to 45:06buy the book 45:10and then I'm going to add a trigger 45:12effect so when I tap button it opens 45:14like overlay and you can see that in the 45:18layer menu here 45:20and what I'm going to do is I'm going to 45:22drag the overlay 45:25component that I created to buy the PDF 45:29onto the canvas 45:32and I've got to cut and paste this 45:34inside 45:36the button layer 45:39let's click on this here 45:41desktop 45:44so if you have some issues here I'll 45:47just click that 45:51install main get the book 45:58perfect yeah so click the overlay layer 46:01and I'm going to paste the component 46:02inside of this 46:05and I'm going to set the position top 46:07left right bottom zero 46:11position absolute just to make sure this 46:13takes up the whole viewport 46:16and I'm going to set the 46:19preset to instant that way it appears 46:21instantly and I'm going to set the Z 46:24index to 10 that way the overlay appears 46:27above everything else so now we can see 46:29the loading dot animation here close 46:32button in the corner and then now when I 46:36click on 46:38this button let's load this up 46:43we'll really single bit perfect I'm not 46:47sure why the checkout content isn't 46:48loading 46:50let's go back and investigate 46:58oh the other one's working 47:01here let's go look at that one 47:03we also have another overlay that I 47:05created to buy the book on Lulu so 47:07that's the actual physical copy of the 47:08book 47:09and the same kind of like tutorial 47:11applies you create a button with a 47:15component that you kind of like uh copy 47:18and paste inside the overlay 47:20and then when you click it 47:22oh this one goes to the actual website 47:27change this one to the 47:33I'm sorry guys I'm having some issues 47:35with this today 47:38my layer screen is not 47:41working the way I wanted to 47:43there we go 47:44so when you create an overlay it um even 47:46if your page is really long it always 47:48appears at the top of the page so you 47:50just kind of remember that you always 47:51have to scroll back to the top 47:54um just for the sake of time here 47:55because my other one's not working I am 47:58going to swap this component with the 48:00component for the uh 48:04for the physical book so I'm going to 48:06replace with 48:08project 48:10overlay 48:12by book 48:15there we go and then I also have a tap 48:19trigger inside the component itself just 48:21to ensure when you click the close 48:23button it closes the overlay so I'm just 48:25going to add that right here 48:27and I'm going to hit time 48:31here 48:33this should work at 48:35perfect 48:37yeah so this is this is the actual Lulu 48:39website where users can buy like the 48:41paperback version of the book and then 48:42when you purchase this you also get a 48:43copy of the digital PDF that's kind of 48:46like how we created the um overlay 48:49experience to buy the book and I think 48:52that's all for today that's that's all 48:54the time I have 48:56um if anyone has any other questions 48:57feel free to drop them in the comments 49:01um and it was a lot of fun sharing this 49:03project with you this was a really cool 49:05project 49:06um we won the framer site of the month 49:08and we also want the CSS design award 49:11for a website of the day so um yeah it 49:14was a really enjoyable experience 49:15working on this project and it was also 49:17featured on the brand identity so it 49:19just goes to show you can if you create 49:21really cool things with framer and you 49:23share it on the internet like Twitter or 49:27um 49:28anywhere else you're kind of like 49:29posting things like Instagram you know 49:31you can get lots of really cool press 49:32work 49:34um and people who say you can't win 49:35awards for favorite websites is wrong uh 49:38because you know I've just clearly 49:40showed that it is possible and I 49:42encourage you to make 49:43um really cool things and share it 49:45online and you know just share your work 49:49with the world and create really cool 49:50stuff 49:51amazing thank you so much Paul I love 49:54seeing that it's like that's honestly 49:55one of my favorite sites that I've seen 49:57built in framer when I joined a couple 49:59months ago that's the first one that I 50:00looked at that was like whoa look what 50:02this is actually like capable it's so 50:04thick 50:05um we are a bit short on time but I 50:07there are a couple questions that I just 50:09want to run by you 50:11um one is from Raz and it is when 50:15breaking up the hero title like learning 50:18how to into separate frames does that 50:20affect SEO do you know or even 50:22accessibility or how web crawlers read 50:24it 50:25uh yeah it can affect your Lighthouse 50:28score 50:29um not by much 50:30um I optimized the website pretty to get 50:33as close to 100 as possible but Google 50:36will penalize you 50:38um like if the font like the title isn't 50:40instantly 50:42um legible like when the page page loads 50:46um so yeah it does it does ding your SEO 50:48score but not by very much it's only 50:51like a few points uh very marginal in my 50:53opinion and for like that extra layer of 50:55Polish you know like kind of like that 50:57first impression you leave on the user 50:59when they first join or visit your page 51:01I think it's worth it 51:03um because like first impressions are 51:04everything these days and a lot of 51:06people just kind of like judge you based 51:07on the first thing you see uh so we felt 51:10it was important to kind of like add 51:11that extra layer of Polish to leave like 51:13a really good lasting impression 100 51:16cool thanks for answering Paul um and we 51:19had just one more from Diggy I'm not 51:20sure if you have um insight into this on 51:23on your end or not but he's wondering 51:24what effect like the the individuality 51:28that the custom fonts bring to the site 51:30have on website conversion if any so 51:33like what is your opinion or what's your 51:36knowledge on kind of having those more 51:38Interactive 51:40um experiences versus going for 51:42something a little bit more 51:43straightforward what's the effect on on 51:44the conversion rates of the site 51:47uh that's a good question I'm not sure 51:49how much like the custom fonts 51:51themselves impact the conversion rate of 51:53the website but I do know for example 51:55like um like if you look at a lot of the 51:57like the websites shared online these 52:00days a lot of them are using like inter 52:01or 52:03um you know kind of like any of the 52:04other popular Google typefaces 52:07um and what I don't like about that is 52:08you start to notice that like the web 52:10all starts to look very similar you know 52:12it looks the same and it's kind of like 52:13you lose that kind of like unique 52:15personality 52:17um so if you're trying to create 52:18something bold or unique or different or 52:21distinctive or kind of like create like 52:23a memorable experience I would encourage 52:25you to try using a um you know custom 52:28web typeface there's lots of good type 52:31foundries I could recommend uh pangram 52:33from Montreal Blaze type from France 52:36um there's also girly type ABC Dynamo 52:40um there's so many if you want any 52:41recommendations you can just DM me on 52:43Twitter at designed by Paul and I'll 52:45shoot some um 52:47some examples for you but um yeah I'm 52:50not sure how much the the web Bots 52:52themselves affect the conversion rate 52:53but in our experience 52:56um like we sold over a thousand copies 52:58of the book in the first month 53:01um and I think that's because we kind of 53:02like created like a unique memorable 53:03website and we also made it really easy 53:06for customers to like buy the book 53:07without leaving the website with the 53:09kind of like limit squeezy overlay 53:12um and we had to do that because of the 53:13time like e-commerce wasn't directly 53:15supported in framer and we just kind of 53:17like had to hack that together to make 53:18it easier for people to buy the book 53:21totally sweet thank you so much for 53:23answering Paul 53:24um and I think that wraps us up today 53:27for our show and child 53:29um this was a really really fun one 53:31thank you so much to both of our 53:32co-hosts Gau and Paul for for joining 53:34and showing us the amazing work that 53:36you're doing in framer 53:38um as I mentioned at the start of the 53:39call this recording will be posted uh to 53:42the community right after it's it's 53:43finished processing it usually only 53:45takes a couple minutes 53:47um but yeah I hope you all had a great 53:49time here at Show and Tell I know I did 53:51I hope you enjoy the rest of your day 53:53whether it be your morning your 53:55afternoon or your evening or even your 53:58night time for a few folks on here I 54:00really appreciate everyone joining um 54:02and I will see you all online thank you 54:04so much

‹ Inside Framer: Build your Documentation Website in Framer

Navigations: Scroll Direction ›