Hello, my friend! Welcome to YouDivi’s first video tutorial. Follow along with this tutorial and watch the video to learn how to create a timed slide in blurred animation.

Animated GIF  - Find & Share on GIPHY

To achieve this kind of animation we need to add some HTML, CSS and JS code to our Divi website. It has some steps, but the overall difficulty of this timed slide in blurred animation is pretty easy.

I hope you learn a thing or two from this tutorial. Ready? Let’s go!

How to create a timed slide in blurred animation

Demo

For this tutorial – and all other Divi-related custom code – I recommend using the Custom CSS and JS plugin. But, if you don’t want one more plugin, you can add the custom codes inside Divi Theme Options.

Html

First, you need to tell the browser to only start the animation when the user is viewing the page. For this to work, install a plugin called visibility.js.

Add the following code to Divi > Theme Options > Integration > Add code to the < head > of your blog:

<script src="https://cdnjs.cloudflare.com/ajax/libs/visibility.js/1.2.4/visibility.min.js"></script>

JS

Secondly, you need to trigger the plugin with the following code. Add it to Divi > Theme Options > Integration > Add code to the < head > of your blog.

jQuery(document).ready(function( $ ){
    Visibility.onVisible(function(){
	setTimeout(function () {
		$(".animation-1").addClass("slide-in-blurred-top");
	}, 1000);
	setTimeout(function () {
		$(".animation-2").addClass("slide-in-blurred-top");
	}, 2000);
	setTimeout(function () {
		$(".animation-3").addClass("slide-in-blurred-top");
	}, 3000);
});
});

Don’t forget to put both codes between <script> tags.

Look at 1000, 2000 and 3000 values. They represent the delay of the animation to start when the user is viewing the page. You can play with those values until you find the one that suits your needs.

CSS

Finally, add the following CSS inside Divi > Theme Options > Custom CSS.

/* ----------------------------------------------
 * Generated by Animista on 2017-5-20 9:41:57
 * http://animista.net
 * T: @cssanimista
 * ---------------------------------------------- */

.animation-1, .animation-2, .animation-3 {
  opacity: 0;
}

.slide-in-blurred-top {
	-webkit-animation: slide-in-blurred-top 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	-moz-animation: slide-in-blurred-top 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	animation: slide-in-blurred-top 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}

@-webkit-keyframes slide-in-blurred-top{0%{-webkit-transform:translateY(-1000px) scaleY(2.5) scaleX(.2);transform:translateY(-1000px) scaleY(2.5) scaleX(.2);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-filter:blur(40px);filter:blur(40px);opacity:0}100%{-webkit-transform:translateY(0) scaleY(1) scaleX(1);transform:translateY(0) scaleY(1) scaleX(1);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes slide-in-blurred-top{0%{-webkit-transform:translateY(-1000px) scaleY(2.5) scaleX(.2);transform:translateY(-1000px) scaleY(2.5) scaleX(.2);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-filter:blur(40px);filter:blur(40px);opacity:0}100%{-webkit-transform:translateY(0) scaleY(1) scaleX(1);transform:translateY(0) scaleY(1) scaleX(1);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-filter:blur(0);filter:blur(0);opacity:1}}

/* -- Divi small layouts #3 -- */
.up {
  position: relative;
  bottom: 0px;
  padding: 30px;
  border-top: 3px solid transparent;
  transition: .3s all;
}
 
.up:hover {
  position: relative;
  bottom: 5px;
  border-top: 3px solid #039be5; /* Change border-top color */
  transition: .3s all; 
}
 
/* Credits: http://propeller.in/ */
.box-shadow {
  -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  -moz-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  transition: .3s all;
}

This animation code was generated by Animista and has the FreeBSD License.

Layout

Everything should me working right now. You can add animation-1, animation-2 and animation-3 classes in every Divi section, row or module that you want – and it may trigger the animation like the demo.

But, if you want the 3 column layout you can download it from Divi small layouts #3.

Conclusion

I really hope you enjoyed this new code trick! If you liked the video tutorial send me some feedback, so I know I’m in the right way.

Do you like this slide in blurred animation? Show in the comments the link to your Divi project that you used this kind of animation.

See ya!