what you're seeing on the screen right now was actually created by a design tool that's built
right into my web browser it's a long time friend of the channel and that is already Mac quite a few
people in the comments section have been asking about ready mag and also how to add animations
or Motion Graphics to websites and so me and the radio Mac team have come together to bring you a
cool video that shows some of the best features and how to use them on your projects and also
there's a really awesome referral perk later in today's video but let's start with adding
animations on our websites adding animations to your projects takes that user experience and
professionalism of your websites to the next level and actually it's pretty easy with ready Mac on my
project here I want my design motto design your future today to have an animation attached to it
so let's zoom in a little bit so we can actually have a better look at what's going on when you've
selected something in ready mag to actually apply an animation we come to this icon here we have
four choices of move opacity rotate and scale as well as some presets below which can help save
time and so on but let's apply a move animation the faint gray typography is the starting point
and then the secondary set will be the finishing point and we can move and change this accordingly
now if I click preview we can see the animation looks pretty standard and boring at the moment
so let's add some more to this thing I'm going to first add a delay so the user of the website will
see the animation two seconds after clicking onto this page and also I'm going to increase
the duration a tiny little bit notice the delay that's pretty cool but I still have a few more
ideas for this yet now if we add an ease effect to it the animation is going to accelerate and
then decelerates which just makes animation look more natural and more smooth now here's the kicker
however we can add effects to the existing animation so for example an opacity effect
from zero percent right up to a hundred percent and this means the text will appear and move up
to two seconds after the user clicks onto it and that will look something like this so if we click
the preview and take a look we have just made a pretty cool text animation in a matter of seconds
but quickly let's add a scroll animation to really make this project come to life now clicking the
2023 section and then coming over to the animation icon we just need to select scroll here I think
rotating typography as we scroll down would look pretty dope actually and I think 360 degrees will
look just fine which is a full rotation now this is what I really love about ready mag it's really
quick and really intuitive to use and like before let's ease the animation in and out
and there we have it in a matter of what two minutes a boring and static page now brought to
life with a click of a few buttons now let's take a look at some typography because we all know that
they can actually make or break a project it's really important ready mag has some really cool
stuff that we can use when it comes to typography now as someone who really loves typography one of
the first things I noticed with ready mag was just the amount of fonts on offer but also something
else that's really neat is the UI layout when actually using those fonts it's pretty easy to
use clicking the T icon brings us into the main typography options and you'll notice just a few
typefaces here at the moment well we can actually come down to the library and you'll notice that
things really do open up at the top right we can flick between Google fonts type today Adobe fonts
and web type literally thousands of typefaces and fonts available to us on our projects
also you can narrow down your search between serif Sans serif and all of that good stuff
so here for example I'm looking at a bold Sans serif typeface from Google fonts and I can look
through and then Bingo archivo is right here which is one of my favorites actually I then simply
click here to add to my library and then we're good to go for using it on our projects now we
can also upload custom fonts straight to ready mag and use them on our projects to make some really
outstanding and cool websites mixing typography with animations like we looked at previously
can lead to Unique Designs like this right here and I mean how many websites have you seen like
this probably not too many we can also make some contemporary and clean websites by sniping out
those clean Sans serif fonts from the ready mag library and laying things out in a sparse layout
but yeah to me as a designer the best thing about radio magic in terms of typography is just having
access to such a large amount of fonts across multiple different libraries but check this out
now this is a custom cursor it's another really cool touch that will make your Web projects stand
out and feel very unique to the end user and as you probably guessed yep it's pretty easy to do
and quick with ready mag the first thing we need to do is to have a Graphic ready for our custom
cursor and that's easily made in Photoshop or illustrator or something like that now
we want it to be below 128 pixels so I'm just going to go with a 120 by 120 artboard now of
course you can make anything you want for your custom cursor on your website projects but I'm
going to use this eight bit heart design and you're soon going to see why now once you have
the graphic ready save it as an alpha Channel transparent PNG and then hop back to ready Mac
so on this project I want the cursor to change to our hearts when the user hovers over the shop
now button just to make it more interesting and more unique which will actually result in
a higher click through ratio so highlight the object and then head over to the custom cursor
panel right here and as you can see it says Max size 128 pixels and so I think 120 is big
enough probably actually going to be too big I do like to reload my project because this sometimes
helps the effect load faster now heading into the preview mode it might actually require you
refresh the page here as well but as you can see we now have a little bit of love when the
user hovers over the shop now button and this was achieved again really quickly and really easily
the next feature we're going to look at is the ready mag shots feature and that's going
to help us create something that is a Hallmark of professional and up-to-date websites these
days and something that is being used for all kinds of different website projects and that
is of course animated video integrated onto our web pages again with ready mag it's really quick
and easy to do now I want to have a portrait clip that's going to help boost this webpage
simply come down to the add icon and then click on the shots feature
ready mag allows for a maximum of 30 megabytes per video file and mine here is only 3.8 megabytes
so yeah it's way below that threshold now it might take a few seconds to upload but
once it's there we can easily scale down to the size we want to work with on the project itself
there are various different options for shots but first let's run with the hover
feature now we can change the playback speed of our clip but once implemented we can see
that whenever I hover my cursor over the clip it plays out in real time like so
foreign how easy it is to work with stuff like this with ready mag but let's now try and add
something different let's add a scroll shots feature this means that when the user Scrolls
along the websites the clip will play now we can determine where on the page the starting point
for the animation footage will be you might want to use the easing option as well for a
smoother transition and then if we go ahead and view the results it looks pretty cool I'm
sure you're going to agree now I like to use this sort of feature on my portfolio website but also
on something like where I sell my e-guide now the final point in today's tutorial is really
quite important it's obvious these days that a large percentage of people who View and access
your website will be doing so on a smartphone so naturally we just want to make sure our websites
are optimized for smartphone layouts now ready mag has got us covered the first thing that's probably
going to blow your mind here with ready mag is that the mobile versions of websites you create
are automatically made with all widgets stacked in a vertical column when working in ready mag so
there's no needs to add everything once again by hand secondly the ready-mag templates already have
optimized versions for mobile viewing so it's much easier to get started with radiomag considering
they have templates for mobile versions ready to rock and roll you can also enable the tablet
layout which is handy as well now it should be noted that your composition options can be
multiple but it's actually completely up to you as a designer to build your own experience for
example mobile and desktop versions can totally be different if you want it that way one design might
look really good on desktop but then when you translate it to tablets it might not be functional
or even look good so it is pretty handy that with radio mag we had a choice to make changes
and have differences between different layouts I'm sure you can see how powerful ready mag is
and how easy it is to achieve awesome results on your web projects it is literally effortless and
it's a fast way to make the unique and awesome website design features shown in today's video
and ready mag has a lot more than what we've actually been looking at today and I've had
a lot of fun using and experimenting and playing with ready mag for today's video and as they are
a long time sponsor and also a long-term friend of the channel you can actually try ready mag for
free completely for free just by signing up to the free plan without any credit card but ready mag
have a great opportunity for the viewers of this video by clicking on the referral link you can
actually save six dollars off any ready mag plan now you can actually get six dollars added to your
ready mag account every single time you use the referral link to actually refer somebody else to
ready mag and that's pretty neat so yeah try out radio Mac today with the link in the description
box below and of course until next time guys design your future today peace [Music] foreign