Up next in 10
Build a React.js react-smooth Animation Library to Animate HTML Elements in Browser Using JSX
Jun 3, 2025
Get the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a ReactJS
0:05
package which is used to basically build
0:07
out nice little
0:09
animations inside the browser so the
0:13
package is
0:14
react it's animation library of
0:18
ReactJS very popular uh so now to
0:21
install this the command is very simple
0:25
you simply execute this command npmi
0:28
react smooth i've already installed it
0:31
it's almost got almost 7 million weekly
0:34
downloads so it supports all the basic
0:37
kind of animations basically you animate
0:40
elements using this component animate
0:44
you provide the two location and the
0:46
from location and then you can
0:48
animate almost every attributes so this
0:51
is opacity we are uh animating let me
0:55
show you a very simple example so just
0:58
create a simple functional component and
1:00
first of all you just need to import
1:02
this component so we simply use the
1:04
import statement we say animate method
1:07
we need to import from this package
1:09
which is react smooth
1:12
after that
1:13
we use actually this
1:17
component inside the JSX the animate
1:21
method
1:25
we inside this animate method we specify
1:29
three properties first is the from
1:34
property from position of the animation
1:37
so for this you can actually use the
1:40
translate x method so this is used for
1:44
moving from one location to another
1:45
location so here we are specifying 300
1:48
minus 300 pixel so this will move
1:51
from the right to left position and then
1:55
we also have the two
2:09
position and then we can simply give it
2:12
a
2:16
attribute name so which property which
2:20
CSS property we are animating so we are
2:22
animating the transform
2:24
property and then we can even put the
2:27
duration of the animation so how much
2:30
time that it
2:31
takes,500
2:33
millisecond here you can adjust the
2:36
speed of the animation so this is
2:38
actually a very simple example and we
2:41
define this now and inside this we will
2:44
define
2:47
this a simple div element that we will
2:51
be
2:52
animating so it's simply paste so we are
2:56
simply styled it using CSS using the CSS
2:59
properties so if you just see the result
3:03
that comes in the browser simply
3:08
open so it will look something like this
3:11
you will see it is sliding from left to
3:15
right
3:18
position so all these animations are
3:22
supported this is sliding from left to
3:24
right
3:27
you can just if I say minus 500 you will
3:31
see it will
3:33
slide like
3:46
this minus,000 pixel so now it will
3:49
slide like this
3:54
so in this way guys you can animate your
3:58
elements HTML elements using very
4:02
easily so you can
4:06
actually
4:08
also put a comma and you can even say
4:12
opacity as well you need to
4:15
animate you can put a easing property as
4:18
well so you can even animate multiple
4:21
properties at one time as well so I
4:24
think here you just need to
4:32
replace yeah so in this easy way I
4:36
showed you very simple example but you
4:38
can check out their documentation you
4:39
can also animate other properties as
4:42
well so this takes as a four properties
4:44
I showed you so thank you very much for
4:47
watching this video and uh also check
4:49
out my website freemediattools.com
4:52
uh which contains thousands of tools