In this tutorial, we’ll create cool animated text with motion effects that you can add to your WordPress website using Elementor.
You’ll learn how to:
✔︎ Add a horizontal scroll
✔︎ Use the overflow: hidden dropdown
✔︎ Create a cool text trick! (Advanced)
hile zip from elemental here today we
will focus on the horizontal scroll
motion effect I’ll show you how it’s
used and give you a step-by-step
explanation on how to apply this effect
so you can make this cool heading color
change illusion while scrolling through
the page as well so let’s dive in and
see how it works let’s start with the
gray heading in the heading widget
settings under advanced go to motion
effects switch the scrolling effects to
on press the pencil next to the
horizontal scroll option to enter its
settings now change the direction to
right
I’ll leave the speed and viewport
settings as is great let’s see it in
action
cool now let’s see how to apply the same
motion concept in order to create the
color change illusion you see here I’ll
go ahead and work on this clean page so
that you can see how it’s done
step-by-step as you can see I’ve already
added two sections these will give us
the height we need to scroll through the
page I’ll add a new section and place it
in between them we will apply the cool
motion concept to this section okay
great now let’s insert an inner section
and delete the left column give this
section of min height of 450 pixels in
the style tab I’ll set the background
color to pink now go over to this column
here and in the Advanced tab set the
left padding to 33% great now let’s add
the heading widget change the title and
style it to your liking I’ll go ahead
and add some padding to the top of the
column here great now the heading fits
nicely back to the heading settings in
the Advanced tab and the motion effects
switch the scrolling effects to on now
press the pencil icon next to the
horizontal scroll option I’ll leave the
default settings as is let’s check what
we have so far cool it gets a little
tricky from now onwards so pay attention
duplicate the inner section as you can
see the new intersection of
piers under the first one to make things
clear I’ll open the navigator and name
this in a section second in ER I’ll do
the same for the first intersection and
call it first in ER I’ll go back to the
second intersection and change its
background color to white we can’t see
the title because it’s white as well so
go to the heading settings and change
the color to the same pink you see above
now let’s add a negative top margin to
the second intersection cut it settings
and under advanced set the top margin to
negative 450 wait the second
intersection appears on top of the first
one we wanted the other way around
let’s fix that by changing its z-index
for the second intersection in the
Advanced tab set the Z and X to 1 for
the first intersection in the Advanced
tab set the Z and X to – okay great
let’s check it out cool but when I
scroll I only want the second
intersection with the pink title to show
once it’s outside the section at the
moment the first intersection with the
white title appears on top and therefore
covers the pink heading on the left side
of the section when scrolling in order
to fix this we need to make sure only
the pink title appears outside the
section how do we achieve this first in
order to show you I’ll remove the
negative 450 pixel margin of the second
intersection so it appears below the
first again I’ll move it back afterwards
it’s important to know that the moment
the heading widget moves out of the
section it’s in as you can see here it
essentially overflows because it’s too
big to fit in the section Elemento has a
feature that can specify whether or not
to hide this content when it overflows
I’ll show you how it’s done go to the
second intersection settings and in
layout set overflow to hidden now when
we scroll the titles content is clipped
so we don’t see it anymore when it
leaves the section it’s in I’ll go ahead
and set it back to default because in
our case this needs to be applied to the
white title in the first intersection we
only want two pink ties
in the second intersection to continue
once it overflows so go to the first
intersection layout settings and set
overflow to hidden now let’s add the
negative 450 pixel margin back and check
it out great
now a change in color illusion works
properly let’s see it in action again on
a landing page cool well that’s it now
you know how to use the horizontal
scroll motion effect and apply it
creatively to make your own cool color
change illusions when visit the scroll
through your page don’t forget to
subscribe to our YouTube channel for
more tips and tutorials see ya later
