Mastering the Animator Component in Framer: A Guide to Solving the Latest Framer Community Challenge

hey guys so today as you can see here I'm messing around with framer and especially with their new animator component why did I get this video idea out of nowhere is because of them having these challenges or wait I didn't show it to you so we have these challenges and that I will make a video series on each of these challenges but we have these challenges that come out after some time and the most recent one is the animator component and I've already been messing around with it a bit and um it's basically being used to just take yours scalable vector graphics or svgs and drawing some drawing the paths of it as you can see here there's also been from the community another person forgot their name let me see there's also been another person yeah Christian Christian and they've made this project right here and we're trying to recreate something similar so you can see here the font is basically being loaded with a square around it as well and I plan to add this to my portfolio website which is right here and here's the current state of it it is just a logo that can be dragged across the screen as you can see so let's do this right here so I'm going to show you how to do it because I've seen in the community there's all been a lot of confusion going around around on how to do this so you take your SVG and you drag it into your project then let's remove the old one and here's my Dragged In graphic and basically it's kind of like compressed Jeep when you import it you need to double click it in order for it to work then we copy the animator component from the website we can go back and paste it in here let's set the Z index to higher value let's add Z index here it's at number three and then it says right here connect to graphic animate single or join paths on web pages only let's move that right here and this is what happens to most people so they hit play and nothing happens in order to fix this we can go right here and take this or double click your component or your graphic and you can see right here that it's all inside a single join perhaps this is that's typically the the way of how single or single word logos or scalable vector graphics are handled then you mark every single path that it's in in there then you click on stroke you add a stroke and we need to make it white and there you have it should work now it appears for the first time and we can adjust its size and basically the let's adjust the width of The Strokes that are being drawn let's make it to maybe 10. see well that was too much I didn't see let's make it to three and let's see how that looks like whoops see how that looks like yeah much better let's increase the size of it first in the animation so the animation time can be increased right here let's put it to something a lot longer let's do just do six seconds and the graphic itself can be increased here since it's just placed in absolute we can put it the width to fill and the height to 100 BH let's see if that worked yeah that worked oh there's some the width yeah you can see right here there's some basically the paths are not connecting together let's try to make these paths a bit round so you go back to your SVG Mark all of your all of your paths and set these two caps and Joints to round it let's see if that fixes it yeah it looks much better and in order to get the old or effect that I have going on where you could drag the the image it's just a simple click here and it snaps back yeah so that's it let's see it again in action people can drag it around so that's basically it that was the entire gist of it and I hope you enjoyed this video and yeah I'm going to obviously share this in the challenge as well thanks for watching and please subscribe so I'm going to keep on doing these challenges as they come in so that we can learn frame it together

Channel: ALsJourney

Views: 1,871

Keywords:

Id: H89Q33nwWT4

Length: 5min 53sec (353 seconds)

Published: Fri Jul 21 2023