On this Webflow lesson we take a look at basic css animations. How to add animations to hover states in Webflow and how to setup css transitions using Webflow.
All our project files for you to practice and play with along with some bonus materials.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
all right let's jump into the first type
of interaction one really cool thing
about css is the ability to add
animation into some of our elements
without requiring
javascript some of the basic animations
can be seen
in minor things like the buttons and the
different states of each button
so for example when i hover over a
button what is that button
going to look like let's jump over to
our playground
so we know that we have some combo
classes created for each
color so primary secondary and third i'm
going to copy this button and i'm going
to duplicate it
i'm going to remove the combo class and
this particular button right here
i'm going to start adding some hover
states
so on the hover state what exactly do we
want to see
on hover i want this button to have a
nice outline
around and go back to the hover one
thing i like to do
is simply by adding an outline or a
border around
a button to show that i'm highlighting
it
helps a lot to distinguish that hover
state so if we go down to borders
we can select the border solid and make
that
a white color and we can make the width
of that border
5 pixels so it's obvious if we
toggle off our overstate back to none
simply by hovering over but the button
we see right away what we've applied
but the problem with using borders is
that it's starting to affect the box
model so it's pushing
everything aside both top and bottom and
this could create some
issues when we start having a lot of
different
boxes around our design so a
simple solution to using this idea of
hover
is instead of using the border we're
going to do the following
okay i'm going to remove the border so
remove that border which adds spacing to
that
and instead i'm going to add a box
shadow
like this so i add the box shadow color
white
i remove the blur and the distance i
only have
the size so on the size i go ahead and
select
four and check this out it added a
simple border
without affecting all of the other
elements around it
that's exactly what we want to do but
only on the hover state
so let's let's try that again see the
difference
this is a much better way a less
intrusive way to
avoid breaking down your designs by
adding some
interaction to your components and to
your buttons
another thing i like to add here is the
idea of
transforming it so maybe scaling the
button up higher
how can we do that so let's simply
select the button again
and i'm going to click on the hover and
i go down to 2d and 3d transforms
i click on plus and then from the scale
tab
because this is both locked in all i
have to do is move this around
and slowly you can see the button
starting to scale
its size but without affecting all the
other components around it
so this is pretty useful because now we
can transform any
components that's within the box model
all right so i'm going to do that 1.1
and right now notice that i'm always
doing this on hover but i'll need to go
back to none
to try it out
but there's it feels a little bit
jarring now that i think about it
and notice that all the other buttons as
well are applying that because we're pl
we're playing with the global class
button which all of these
share so if we go back our on our
homepage all of that has been applied
across
which is really cool what can we do to
make this
feel a bit smoother that's where the
transitions come in so these are css
transitions
again on our effects panel if we click
on the button
what we want to do is have activated
some
transitions based on the specific values
or changes that we made to this design
so we change some of the values so one
of the common ones that we can do
is transform
when you hover over the button now the
animation is applied
over over a period of 200 milliseconds
if you click on the easing tab
you're gonna toggle open these different
curves
these curves are all about the
interpolation of how the animation
starts and how it ends and you can play
around with some of these
so you can see how the animation gets
done just by playing it
you can see how fast the interpolation
is displayed
i typically like just using this one
which is the
basic ease curve depending on what
you're
you're doing if it's a longer duration
you might want to start experimenting
with these other ones which have a nice
a nice wide curve okay but because this
is just the css animation we want to
keep it simple so we're doing that but
notice how that
border is not animating that's because
we only have the transition
specifically to transform one quick
shortcut to make this
work for both the border and the
transformation
is selecting the type to go all
properties
so all properties that you have modified
will now be
applied so notice how smooth it is now
with
both the border and the scaling of the
buttons
let's take a look at our home page nice
this is great
oh wow yeah this is so nice i love how
the buttons feels
and we just have to go and modify one
single class
and it's applying it across all of our
buttons
so i'll see you on the next lesson so we
can learn about
triggered interactions
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
UNLIMITED ACCCESS