I recently had to rebuild a custom slider that was originally built with Slider Revolution, only the new one had to be strictly Divi due to some issues the client was having with the other plugin.

We basically wanted a few keywords to slide in one after another and in opposite directions (right to left and left to right).

I used the standard Divi fly-in animations used in one of my past tutorials but it did not give the right effect. I needed each one to slide in in at a different speed giving it the appearance of one after another.

So in order to do that, I had to create my own custom keyframes and animations.

View The Live Demo

In this tutorial I will show you how to recreate the custom fly-in animations with varying timing as shown on the demo.

 

Lets Get Started

1. First you will create a new section with a single column

custom flyin

 

2. Open up the section settings and use the gradient background.

 

3. In the demo I used the default colors and settings.

 

4. Go to the Advanced tab and give it the following custom class: gq_s_slider1 

 

5. Save your changes and insert a text module into that first row.

 

6. Add the word or phrase you want to slide in first. In this case I used the words: custom jquery.

 

7. All the style will be applied using custom CSS so you can skip over the Design tab and go to the Advanced tab.

 

8. Now we are going to assign four CSS Classes to this module. Remember to leave a space between each class and no periods: gq-animated gq-waypoint gq_text_slidein_1 gq_animation_right1 

 

9. Save changes and make a clone of the module.

 

10. In the cloned text module, change the content and assign the following four CSS classes: gq-animated gq-waypoint gq_text_slidein_2 gq_animation_left2 

 

11. Repeat steps 9 & 10 until you have created a total of 5 text modules. You will use these classes for 3, 4 & 5.

gq-animated gq-waypoint gq_text_slidein_3 gq_animation_right3

gq-animated gq-waypoint gq_text_slidein_4 gq_animation_left4 

gq-animated gq-waypoint gq_text_slidein_5 gq_animation_right5 

 

Adding The Custom CSS

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>Custom CSS (which is located at the bottom of the first tab in Theme Options)

12. Add this CSS.

/*------------------------------------------------*/
/*--------[GQ - CUSTOM FLY-IN ANIMATIONS]---------*/
/*------------------------------------------------*/

/* hide overflow */
	.gq_s_slider1 {
		overflow:hidden;}

/* font */
	.gq_s_slider1 p {
		color: #2aa6c2;
		font-size: 46px;
		line-height: 46px;
		background: #ffffff;
		padding: 7px 25px 14px;
		display: inline-block;
		display: -webkit-inline-box;
		margin-bottom: 28px;
		border-radius: 4px;}

/* offset padding */
	.gq_text_slidein_1 {padding-left: 6%;}
	.gq_text_slidein_2 {padding-left: 50%;}
	.gq_text_slidein_3 {padding-left: 12%;}
	.gq_text_slidein_4 {padding-left: 60%;}
	.gq_text_slidein_5 {padding-left: 16%;}

/* css animations */
	.gq_animation_right1.gq-animated {
		-webkit-animation: GQfadeRight 1.3s 1 cubic-bezier(0.77, 0, 0.175, 1);
		-moz-animation: GQfadeRight 1.3s 1 cubic-bezier(0.77, 0, 0.175, 1);
		-o-animation: GQfadeRight 1.3s 1 cubic-bezier(0.77, 0, 0.175, 1);
		animation: GQfadeRight 1.3 1 cubic-bezier(0.77, 0, 0.175, 1);}
	.gq_animation_left2.gq-animated {
		-webkit-animation: GQfadeLeft 1.9s 1 cubic-bezier(0.77, 0, 0.175, 1);
		-moz-animation: GQfadeLeft 1.9s 1 cubic-bezier(0.77, 0, 0.175, 1);
		-o-animation: GQfadeLeft 1.9s 1 cubic-bezier(0.77, 0, 0.175, 1);
		animation: GQfadeLeft 1.9s 1 cubic-bezier(0.77, 0, 0.175, 1);}
	.gq_animation_right3.gq-animated {
		-webkit-animation: GQfadeRight 2.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
		-moz-animation: GQfadeRight 2.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
		-o-animation: GQfadeRight 2.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
		animation: GQfadeRight 2.5s 1 cubic-bezier(0.77, 0, 0.175, 1);}
	.gq_animation_left4.gq-animated {
		-webkit-animation: GQfadeLeft 3.3s 1 cubic-bezier(0.77, 0, 0.175, 1);
		-moz-animation: GQfadeLeft 3.3s 1 cubic-bezier(0.77, 0, 0.175, 1);
		-o-animation: GQfadeLeft 3.3s 1 cubic-bezier(0.77, 0, 0.175, 1);
		animation: GQfadeLeft 3.3s 1 cubic-bezier(0.77, 0, 0.175, 1);}
	.gq_animation_right5.gq-animated {
		-webkit-animation: GQfadeRight 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
		-moz-animation: GQfadeRight 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
		-o-animation: GQfadeRight 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
		animation: GQfadeRight 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);}

/* keyframe animations */
	@-webkit-keyframes GQfadeLeft {
		0% {opacity: 0; -webkit-transform: translateX(-100%);}
		100% {opacity: 1!important; -webkit-transform: translateX(0);}}
	@-moz-keyframes GQfadeLeft {
		0% {opacity: 0;-moz-transform: translateX(-100%);}
		100% {opacity: 1!important; -moz-transform: translateX(0);}}
	@-o-keyframes GQfadeLeft {
		0% {opacity: 0; -o-transform: translateX(-100%);}
		100% {opacity: 1!important; -o-transform: translateX(0);}}
	@keyframes GQfadeLeft {
		0% {opacity: 0; transform: translateX(-100%);}
		100% {opacity: 1!important; transform: translateX(0);}}

	@-webkit-keyframes GQfadeRight {
		0% {opacity: 0; -webkit-transform: translateX(100%);}
		100% {opacity: 1!important; -webkit-transform: translateX(0);}}
	@-moz-keyframes GQfadeRight {
		0% {opacity: 0; -mox-transform: translateX(100%);}
		100% {opacity: 1!important; -moz-transform: translateX(0);}}
	@-o-keyframes GQfadeRight {
		0% {opacity: 0; -0-transform: translateX(100%);}
		100% {opacity: 1!important; -o-transform: translateX(0);}}
	@keyframes GQfadeRight {
		0% {opacity: 0; transform: translateX(100%);}
		100% {opacity: 1!important; transform: translateX(0);}}

 

Adding The jQuery

In order to get the animations to initiate over and over again as the user scrolls, you will need to add a little custom jQuery.

13. Copy this code onto your clipboard.

<script>
(function($) {
    var $animation_elements = $('.gq-waypoint'),
        $window = $(window);
  
    function check_if_in_view() {
        var window_height = $window.height(),
            window_top_position = $window.scrollTop(),
            window_bottom_position = (window_top_position + window_height);
  
        $animation_elements.each(function() {
            var $element = $(this),
                element_height = $element.outerHeight(),
                element_top_position = $element.offset().top,
                element_bottom_position = (element_top_position + element_height);
  
            //check to see if this element is within viewport
            if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
                $element.addClass('gq-animated');
            } else {
                $element.removeClass('gq-animated');
            }
        });
    }
  
    $window.on('scroll resize', check_if_in_view);
})(jQuery);
</script>

 

14. Now go to Divi Theme Options > Integration and paste the code into the section that says: Add code to the < body > (good for tracking codes such as google analytics)

 

Notes

If you want to change the background colors, font sizes, font colors and other text styling, just modify this part of the css.

 

If you want to change the padding that makes each text module offset, just modify this part of the css.

 

If you want to change the timing of the animations, just modify this part of the css.

 

And that’s it.

If you used this on one of your projects, please share a link below so we can see how you used it.

Have fun!


Well that’s all for now. I hope you find this article useful.


STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest