Introducing Motion Effects in Elementor. Bring your website to life!
Hadas & Ziv introduce and show you how to use the new Mouse Track Effect and Motion Effects which include:
– Vertical Scroll (Classic Parallax Effect)
– Horizontal Scroll
– Transparency
– Blur
– Rotate
– Scale
– 3D Tilt
hi everybody I’m Hadas I’m an educator
and a web designer here at Elementor and
here with me it’s live io I’m also a web
designer an educator at elemental and
today we’re going to talk about our new
release their motion effects I want to
say a few words about it yeah well sure
a lot of you have already heard motion
effects often the better Lisa’s been
playing around with it and you know we
know that web designers they’ve been
requesting to add an extra layer of
animation motion design on their website
and so you know that’s what we’ve done
we’ve added new motion design settings
that really empowers you as a designer
to to add that extra you know the extra
animation on your websites there it’s
very easy to use you know you really
don’t need any animation coding
experience and it integrates very nicely
and it gives you a boost as a web
designer yeah I mean able to create
websites and you know give them the
extra edge yeah I can say as a web
designer that uh I’m always looking for
the next step
doing like a static design today it’s
old news today in 2019 nothing can stay
still if it’s stories if it’s gifts
everything Nick needs motion so this is
why this release is so important and
it’s it’s amazing amazing cuz you don’t
need a third party right now everything
is in the editor so let’s dive in to see
how everything is going on absolutely so
I’ve prepared a special design for this
this webinar you can see it here it’s a
surfer shop landing page so we have the
surfer here at the beginning then we
have the second section with the two
images next is going to be the surfer
girl with the About section and last one
the last section will be the contact us
section with the shock yeah that’s cool
yeah okay so let’s see how we do it in
the editor okay so let’s move on to the
editor and here we have the first
section as you can see I did split in
the background so we have the waves in
and the surfer is gonna be the overlay
background okay so actually what you see
is you know like when you’re scrolling
you see the there’s like the sea the
ocean is moving so what’s the left
mm-hmm very slightly out how is that
then okay so what we’re gonna do here so
you’re going to the background in style
and then we’re gonna switch on the
scrolling effects which as the scrolling
effects basically an effects that occur
when the user starts scrolling we’re
scrolling through the page mm-hmm
exactly
so here we’re gonna do a vertical scroll
so we’re gonna click on it sorry a
horizontal squirrel okay cool
horizontal meaning it’s gonna move from
the left to right or right to left yeah
so you’re gonna give the the first
section that ocean effect so so we’re
gonna feel like we’re inside the shop
and see this surfer and so these motion
effects we can use them in honest on the
the section level right when there’s a
background image yeah and we can also
use them on individual widgets in the
Advanced tab yeah let’s show it here if
we’re going to advanced we can see it in
motion effects okay and we can switch on
the switcher here so then all the of the
section will move when the users scroll
down okay cool
so yeah we’ll go through all of those
one of those things and but basically
for the first strip it’s in the first
sections on the background yeah image
okay so when you add a background image
it will open to open the options for the
scrolling effects right exactly okay
okay so I’m gonna use their horizontal
scroll we’re gonna click on the edit
button you want to do their horizontal
scroll to the left because we can see
here the ocean ends here mm-hmm
so I want to go with the flow mm-hmm
let’s do the speed a little bit slower
let’s say the speed you can really like
when we when we scroll you can really
certainly see the the ocean moving to
the left so there’s not a heavy enemy
mm-hm but it’s adding this really nice
you know subtle effects to the yeah I
think when you use motion effects you
need to use it wisely because if you do
everything that it’s moving all the time
and jumping or whatever it’s it’s giving
you a headache
yes so use it wisely don’t put it
everywhere like a specific places
because a small thing do a big thing so
we need to think about it so this is why
we want to do the motion here slow so
you get just the feeling you don’t need
to see everything moves really really
fast so that’s why if you put it on too
so it’s yeah so I’m gonna change it to
two so you can see here it’s slower
already mm-hmm okay and let’s talk about
the viewport here we have a viewport the
viewport means the the image of the
screen you want to say a few words about
you you can yeah it’s the actual the
viewport setting it’s it’s a very
powerful setting because we basically
can determine when the motion starts and
end like we we can basically decide when
the user Scrolls at what part of of the
page the percentage of scrolling and the
motion takes effect and I will see it
just now exactly how we can really
customize that but basically as you can
see over here we’ve got a range and the
range is between zero and a hundred
percent and this range basically is the
viewport height okay so a hundred
percent and it’s the the total height of
the viewport and let’s say you know you
start scrolling okay so not for the
first strip but let’s say for the second
strip the moment we start seeing the
second strip that’s zero percent okay
and then you start scrolling up and you
reach halfway that’s 50 percent now 50
percent is the center okay and then we
start scrolling up more and you can see
when we reach the top that reaches a
hundred percent
so essentially what happened is from 0%
the top of the this section all the way
to the top of the viewport to 100% this
is our area where we can control when we
see the motion okay
so let’s see what we’re gonna do here so
here we want to start the motion just a
little bit after so we can see something
moving like not at the beginning so
let’s change the bottom here to let’s
say 50% okay okay so we can see here
it’s starting
and then it’s tops about here cool so
that’s that range is 15 percent 100
percent yeah okay okay so that’s the
first thing I’m gonna do here let’s move
on to our next thing the logo cool okay
so this is the sticky lug around that we
see in the corner yeah okay okay so the
logger here we’re gonna do it under
advanced and you can see here the motion
effects and we want to switch on the
scrolling effects mm-hmm and here I want
to do the rotate so let’s click on the
rotate edit button you can see here it’s
already moved you can change the speed
and see how it rotates around itself
okay let’s make it a bit slower let’s
say about two because we don’t want it
to rotate like crazy and we want to make
it at the direction to the right and we
want to control other to turn to the
right or to the left yeah okay you can
see here it’s already trying if I’m
changing it again it’s gonna be a to the
other side I can see here it’s already
start rotating hmm and because I left
the viewport from 0 to 100 you’re gonna
it’s gonna start as they user start
scrolling down okay so it’s good for us
okay now I see that when you pressed
rotate over here opened up to two other
options really yes and why anchor point
right so let’s see what’s going what’s
going to happen if I’m going to change
the X and anchor point two to the right
you can see here it starts reading the
rotating around itself but the point
here you can see in this square here
it’s gonna be on the right side so if we
look at the widget itself okay so the
blue line on the right which
the right side of the of the widget
mm-hmm the the anchor point itself the
moment wet starts to turn is set to the
right side of this widget and in the
center okay so the center is um that’s
the Y okay and the X that is the the
right side that’s what you said right
yeah exactly
okay cool so let’s let’s just see some
other options so okay let me see let’s
change the Y right now okay I’m gonna
change it to bottom mm-hmm so right now
we have the X on the right and the Y on
the bottom okay let’s see what’s going
on here so you can see it turns like
clock but on the right side and on the
bottom okay it’s like on the corner of
the square here so you can change the
anchor point as you wish
but here we’re gonna do it Center center
because we want it to rotate around
itself and it’s also it’s important to
know that no we busy playing around with
the motion effects that and you know we
can we can apply these effects on
desktop tablet and mobile as well
exactly yeah
you we can see here if you’re going to
responsive mod and change it to mobile
so we need to fix a few thing here but
you can see here it’s not retaining
start moving in the back everything is
working just minor adjustments okay so
let’s move on to our next section
absolutely the next section we’re gonna
see the mouse effects so let’s click on
the first image under advanced motion
effects and let’s switch on the
scrolling effects and I’m sorry the
mouse effects and here we’re gonna see
the mouse track and a 3d tilt if you’re
gonna click on the mouse track we’re
gonna see that the image moves direct as
my mom as my mouse it looks like it’s
following your mouse right yeah it’s
following my mouse if I’m going to the
right to the left whatever I can change
it also to the opposite side the
opposite okay and said me to the
opposite direction exactly cool and here
we actually want to do the three details
so let’s put it back to default if you
if you make a setting you switch the
pencil you know then it’s
switches on and if you want to reset it
you can just you can press the reset
button yeah that’s all okay the reset
button is on when we start doing
something cool so let’s go on to the 3d
tilt if I’m going to press it we’re
going to see here the image got like a
direct side of my like this depth effect
exactly we can do it also in the
opposite side and if we’re gonna do it
to the next image as well to the second
image we can see that we can do like
something that it’s really cool see here
yes like a wavy kind of view that’s cool
you can mix like the dancing yeah you
can also change the speed here as we did
before
mm-hmm so let’s say that the back will
be slower and the front will be faster
so you can see here we got also
something cool your customize that
experience yeah it’s something gentle
and it’s fun it’s fun for the user to
discover it when he Scrolls down and
something suddenly moved but it’s like
it’s getting his attention okay so let’s
move on to our next section cool here
you can see that I already have a
vertical scroll for the numbers and I’m
gonna show you how we’re gonna do that
okay so let’s start doing it on the wave
here I did a cutout image of the wave
with a surfer girl here and I’m gonna do
a motion effect here so the wave will go
up so let’s go to the advanced so
basically you’re gonna apply a vertical
motion effect on the waves that we see
here yeah just like we see in the in the
title with the yeah yeah just like we
could see it here okay
so I’m going to advanced motion effects
I’m gonna switch on this the squatting
effects and vertical scroll you can see
that I already have a default here I’ll
go but I want to make it a bit slower
softer so it will imitate the the motion
yeah and and just so that we understand
what what’s going on if you set a
background image on the section that’s
static it doesn’t yeah I have a
background image here of the ocean and
the clouds here the the sky mm-hmm I
have a heading widget here with the
numbers and the title and some text and
this is just an image widget that’s it
so so the motion is you set that on the
on the image in the image widget and
that’s that actually subtly is moving up
yeah okay
okay so let’s go back to the vertical
scroll so I’m going to change the speed
here to something softer let’s say like
keep it up because we wanna use it when
the way the sorrows the the image moves
exactly yeah if you’re gonna change it
to down that’s what’s gonna happen we
don’t want that the opposite okay yeah
so let’s change it back to up and the
viewport let’s change it to like 20 from
the bottom and 80 from the top okay cuz
we wanted to start and be like really
smooth so it’s gonna start like 20% from
the bar it’s gonna finish 20% for the
butter and 80% from the top okay
something like that so you can see here
it’s a smooth ocean kind of movement
very subtle yeah everything’s supposed
to be really so really gentle not
something that it’s grotesque or
whatever we’re not doing nothing extreme
it’s not like you know some crazy
animation of yeah I think if you do it
really soft and gentle I think it makes
the site better because it’s subtle it’s
not it’s not like in-your-face see we
did like motion effects no we don’t want
that it’s not like highly animated and
whatever nuts like you take your design
and you add this extra layer of
animation just to give it this the you
know it’s nice to stand out if you’re
gonna design like a
brutalist page or whatever so yeah use a
lot of motion effects and use it to a
trickle or whatever
do it all the way but if you’re doing a
regular website or a clean website or
something that it’s not
brutalist and something that’s supposed
to be gentle use it wisely don’t use it
everywhere it’s really really important
to remember that mm-hmm
so I mean so we’ve got a lot of settings
over here and you know as a web designer
suits you know cool to play around with
and along the way you know you’ll learn
exactly how to create the right motion
effects and animations to really take
your designs to the next level to add
that layer of motion yeah it’s very 10%
that’s 80 okay it can be 100 percent it
can be 110 very cool like you know when
you creating these websites you know
that the added motion on your designs
itself you know they really make your
website stand out for your clients as
well you know and you really don’t as
you can see you don’t need any motion
coding experience nothing you don’t need
nothing it just needs an eye of a
designer to know what you want to do
here and then in front of your clients
will be better designers that’s it you
just need to know what you’re gonna do
and do it in the right way use it wisely
that’s that’s the main goal here cool
okay so we did the wave here another
thing that I’m gonna do here is in the
numbers I have the two heading widget
here it’s in inline you can see it here
in the custom position is set to inline
and that’s why they appear next to each
other yeah I used the custom position
from our last feature release hmm
so I have two numbers in inline and I’m
gonna I’m gonna do the it see here
that’s cool so you’re isolated there
yesterday there’s a numbers and I wanna
fade in the numbers okay so to be like
from the sky and the one comes in from
the bottom and the other one comes in
from the top yeah
so let’s start with the 19 go to motion
effects and use the transparency you can
see here it already got like a kind of a
opacity color mm-hmm so I’m going to
change the viewport here from 20% to 50%
as
we said before 50% is the zero point of
the widget so this is why I want it in
and stop the fade in the zero point and
let’s do it also to the other side I’m
just gonna click on it in the advanced
transparency and I’m gonna change I’m
gonna keep it the same so you can see
here it’s fading in together as we
scroll down cool and there are other
options for the direction uh yeah we can
do also let’s say we want to fade out
okay so it’s gonna be clear and vanish
as we reaches the 50% okay so this is
the 87 right so let’s let’s fail it
fades out okay yeah cool yeah see it
here and let’s say we’re gonna do fade
out in when you do fade out in you need
to understand that it starts from zero
goes to 100 mm-hmm and stayed because
actually what’s going on its fading out
mmm in and out okay
I’m sorry it’s it’s starting from its
phasing in yes okay cool
if we do the opposite it’s starting from
in and finish with out okay okay so you
can see here we can see the color here
going to the center stops and fading out
cool so it’s very if you can you can get
very detailed over here and you know
what when you see a widget you can play
around with the opacity you can you know
make it disappear or make a Bank amazing
thing with it cool you can make stuff
like coming–going vanishing whatever
just think of what you’re doing so I
mean this is it might seem a little bit
intricate you know the viewports and you
know all of the the settings to really
get this special customized
motion effect and we’re going to be
releasing you know tutorial videos as
well on explaining exactly how it works
and the concepts and how you can apply
it as
as a web designer you can actually see
that page and understand how I did it oh
another thing that we didn’t talk about
is the level here you can set the level
of opacity you can see it here so if I’m
gonna do one or ten ten it’s like zero
and one is the 100 so you need to
remember that it’s going to the opposite
okay okay so we’re finished with this
one mm-hmm
let’s move on to our last section cool
this is the section with the shock yeah
and I know we wait you’re waiting for it
does the shock but I love it oh that’s
only bad kids okay so what we’re going
to do with this with the shark here I’m
gonna make it larger as it’s going
forward toward you okay so when you
scroll down you want the shock to
enlarge enlarge and to be a blur in the
back and sharp in the front so as you
scroll down it’s gonna be blurry okay
and then it’s gonna be sharp okay and
it’s a set it’s also meeting from the
left to the right like the wall yes this
is a very cool way to use the motion
effect to get the attention exactly it’s
gonna be like it’s gonna aim before cool
okay so let’s see how we’re gonna do it
in the advanced motion effects and
scrolling effects and let’s start with
the scale okay you can see it’s already
got a little pop out so I’m gonna scale
it up let’s say 10 and I want it to stay
it from 20 to 80 cuz when we scroll down
and let’s say stop here so it’s that’s
the nuts at its biggest the biggest size
yeah okay
we can also do scale down just to show
you what’s going on here so it starts
large and going smaller mm-hmm we can do
scale down up so it’s starting from big
going to small and the opposite from big
to small from small to me okay cool
so we’re gonna stay with the scale up
and let’s let’s see the anchor points
here we have it also here so I’m gonna
use it to to point out the the contact
form so I’m going to use their that
sorry the left in the X anchor point and
I’m gonna use the DA that up in the Y so
actually if you look at it it’s the
anchor points
you know if it’s set to the left it will
move to the right if it’s set to the top
it will move to the bottom so it’s kind
of like the opposite yeah it’s kind of
the opposite but it’s not cuz you can
see here in their square here and I’m
changing it to the right so it takes it
scales up from the right side yeah if
I’m gonna change it to the left it
scales up from the left side okay so we
wanted to scale up towards yeah look to
the right to the right that’s why we
said it to the left
mm-hmm exactly and the next thing we’re
gonna do is the blur so what you’re
doing is you’re combining and and the
direction of the shock you know scaling
up and also you’re adding a blur to it
at the same time so yeah as you can see
like we can use multiple multiple motion
effects yeah on one object yeah as we
saw before here are the numbers that we
did the transparency and the vertical
scroll mhm
we can do here with the scale and there
and there blur and also here in the
rotation we did it with fixed position
and rotation you can mix everything to
be nicer but again use it wisely we
don’t want to like jump out yeah the
logo whatever the logo okay
so let’s go to the blur here we have
fade in fade out out in and in out let’s
see what’s going on here so fading in as
we scroll down it fades in that’s cool
fade out the opposite form shot to blur
mm-hmm Oh out and we can control this
bluer levels that’s really yeah see how
we want to do it
and the last one in and out so it’s
gonna be sharp and out okay so let’s
start with fade in so we want it to be
like let’s say 11 blurry okay and we
want it to stop
blurry to be blurry in 50% our zero
point so that’s when it’s halfway the
screen yeah
so you can see here if I’m starts crying
we can see 20% here about 20% and as I
scroll down it reach to 50% so it starts
to be sharp and stops and just it’s cool
now scaling that stays sharp yeah that’s
cool mm-hmm okay that’s it okay great
that is he that’s very very cool okay so
in conclusion we can we can see that
this motion effects really gives you an
extra layer to the designs that you
create and empowers you as a as a web
designer to really create these you know
stunning pages that really stand out
with with minimal coding boy I mean you
don’t need any animation code party yeah
and no third party it’s all built in the
widget yeah I can say that I’m really
excited about this release I think it’s
the best release ever since Elemento was
born yeah I guess I can do something
that I couldn’t do before and I can give
life to my designs and I think I think
that the main goal here what we need to
think about as we use the motion effects
is to use it wisely as I said before
several times and think of less is more
and don’t use it everywhere and I think
that’s it absolutely I have fun use it
wisely and in watch our tutorials check
out auditorium yeah you know YouTube
channel subscribe and I think I think
right okay so see you next time thank
you for being with me leave thank you on
us and thank you all for joining us and
that’s it
you
