Fade in down/up elements

We are using this template in this article, download it or simply use your own

In this post we will give some animation for the jumbotron elements, we want them to fade in down when the page loaded, let’s start.

After activating the plugin from Manage frameworks under the File Menu, select the h1 inside the Jumbotron (Pinegrow Block) then go to the ACT panel and open the Animation Pro drop down

WP Panel

Now click on Animation 1 under the GENERAL section, change the trigger to Load and leave other properties as is, under the ANIMATION SETPS change the Init state to transform:translateY(-30px);opacity:0; and the Step 1 to transform:translateY(0px);opacity:1; so we want the element’s position on the Y axis start from -30px to 0px and and its opacity from 0 to 1

Fade In Down - On Load

Save the page and click on Page drop down link and click on Preview in browser or Ctrl+B, or you can simply refresh the Pinegrow by clicking Ctrl+R and THE ANIMATION IS HERE !

Farther more we can add animations to the rest of the Jumbotron content, let’s do the same steps with the paragraph under the heading (Lots of easy to use component blocks for fast Bootstrap site development). Same thing here Load for the trigger, transform:translateY(-30px);opacity:0; for the Inital Step and transform:translateY(0px);opacity:1; for the Step 1, but we don’t want the heading animation and this paragraph animation to start with the same time, so under the GENERAL section add 300 as a delay to the paragraph.

Fade In Down With Delay - On Load

Save it and test it again. Now we can add animations for the two buttons, but I’ll leave that for you and I’m very sure you can do it !.

Leave a comment

Your email address will not be published. Required fields are marked *