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
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
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.
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 !.