On this Webflow lesson we take a look at extra animation tips and tricks. How to change slides with a custom button using Webflow and how to navigate different slides using JavaScript correctly with 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 guys wow this has been
a wild ride of crazy animations
and interactions and hopefully the more
you practice
the more you start familiarizing
yourself with some of these concepts
you'll start to gain that experience
that you need to apply
to those challenging projects that might
come your way
very simple javascript can enable you to
go a little bit further so for example
i added was that when i click on each of
these cards it takes me to one of the
slides
in our slideshow component and right now
currently
webflow does not enable us to do that i
cannot just simply select one of these
and then
take you to the slide i have to use
javascript for that a very simple script
that enables you to slide from one page
to another
just calling for an id what trigger we
want and it's of course
on click we want a specific button to do
something right now what i've done is
i've created this little script that
says
if you find the card that has this id
in the dom of the html document when you
click on that
i want you to find the slideshow find
the slideshow pagination
which is in this case this little
paginator and then take me to the second
one
every element that i have in here for
example these card triggers have an
id called go to movies so remember this
is a singular id
just by simply using a little bit of
javascript i can tell
the document to do a specific action
all right another nice example that i
could not do modify was these little
squares i wanted to kind of turn them
around
and rotate them to make like a little
rumble
and you can do that by adding some
custom styling
into your document so if you go into
your documents home
you can start adding some of those
transformations
like the transform the dot in the slider
which is that's the class that webflow
is giving to that slider
and just rotate it 445 degrees that's it
it creates this really simple design in
our slider
in our pagination i've gone ahead and
i've created an alternative version of
that same site
and i've added a little bit of
javascript to make the
the trigger of your scroll so as you
scroll through
you have this video playing in the
background
by adding some script we can start
adding and making this
incredibly powerful alright hopefully
you guys enjoyed that
so let's go and jump into content
management system
utilizing webflow
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
UNLIMITED ACCCESS