Fade and Slide
These are combinations of the fade and slide animations.
Fade In and Slide In
These animations fade and element in while sliding it into view.
Fade In and Slide Left
Fade and element into view while sliding it in from the left.
To use this animation add simple-animation sa-fade-in-and-slide-left classes to the element you want to animate.
<div className="simple-animation sa-fade-in-and-slide-left">Fade in and slide in from the left.</div>
Fade In and Slide Right
Fade and element into view while sliding it in from the right.
To use this animation add simple-animation sa-fade-in-and-slide-right classes to the element you want to animate.
<div className="simple-animation sa-fade-in-and-slide-right">Fade in and slide in from the right.</div>
Fade In and Slide Top
Fade and element into view while sliding it in from the top.
To use this animation add simple-animation sa-fade-in-and-slide-top classes to the element you want to animate.
<div className="simple-animation sa-fade-in-and-slide-top">Fade in and slide in from the top.</div>
Fade In and Slide Bottom
Fade and element into view while sliding it in from the bottom.
To use this animation add simple-animation sa-fade-in-and-slide-bottom classes to the element you want to animate.
<div className="simple-animation sa-fade-in-and-slide-bottom">Fade in and slide in from the bottom.</div>
Fade Out and Slide Out
These animations fade and element out while sliding it out of view.
Fade Out and Slide Left
Fade and element out of view while sliding it out to the left.
To use this animation add simple-animation sa-fade-out-and-slide-left classes to the element you want to animate.
<div className="simple-animation sa-fade-out-and-slide-left">Fade out and slide out to the left.</div>
Fade Out and Slide Right
Fade and element out of view while sliding it out to the right.
To use this animation add simple-animation sa-fade-out-and-slide-right classes to the element you want to animate.
<div className="simple-animation sa-fade-out-and-slide-right">Fade out and slide out to the right.</div>
Fade Out and Slide Top
Fade and element out of view while sliding it out to the top.
To use this animation add simple-animation sa-fade-out-and-slide-top classes to the element you want to animate.
<div className="simple-animation sa-fade-out-and-slide-top">Fade out and slide out to the top.</div>
Fade Out and Slide Bottom
Fade and element out of view while sliding it out to the bottom.
To use this animation add simple-animation sa-fade-out-and-slide-bottom classes to the element you want to animate.
<div className="simple-animation sa-fade-out-and-slide-bottom">Fade out and slide out to the bottom.</div>