Greensock with Bootstrap

Greensock with Bootstrap, a powerful combination!

First, the Greensock Animation Platform! What is it? It is an awesome, fast, slick, and very very easy to use framework.  You can get GSAP here.

Next, Bootstrap, what is it, well it is a framework that makes it quick and easy to put together a responsive site that will work on most devices. Bootstrap is one of our invaluable tools. Get Bootstrap here.

Now for the lesson. We built a responsive billboard slider and we wanted to share how we did it the way we did. First GreenSock needs the elements to be either


position:absolute;

or


position:relative;

in your CSS to animate. This is fortunate because the .col* classes in Bootstrap are already positioned relatively.

Here is a small example of  Bootstrap HTML:


<class="container">

<div class="row">

<div class="col-md-3"></div>

</div>

</div>

So what happens is that div that has col-md-3 as its class will be set to a relative position, exactly what we need for GSAP. Now here is another tricky thing about Bootstrap, Bootstrap will work inside of ANY relative or absolute positioned container, you do not have to have it inside its “container” then “row” classes, it will work just as fine directly in a div with 15px padding, so take this very basic diagram below:

Gradum Ante Bootstrap Diagram

What we have done is taken 3 divs positioned absolute and side by side. (The blue square in the “monitor”, the green, then the red.) They are all positioned absolute, with a width of 100%. The green is left 100% and the red is left 200%. Inside them in the purple we have our Bootstrap elements positioned with their respective classes. So what do we do now? Well we move them out of the picture:

Gradum Ante Bootstrap placement

Since we have set the height of our slideshow to a fixed height (for simplicity terms) we know by pixels how much we can more the relative positioned bootstrap elements to get them out of the way. Now the fun part, we wanted the Bootstrap elements to slide in at different times so I used GSAP’s TimelineMax feature to do the magic. So, say in that first red box, the two elements on top we set their CSS to


top:-300px;

and the bottom to


top:800px;

and that moved them out of the field of view. The neat thing about relative positioning is that


top:0px;

would return them to the place they were sitting before, not on top of each other, which in a second you will see whey this makes life so easy!

After you have moved all your Bootstrap elements out of the picture ,you can start developing the animation. Not diving into GSAP too much we will make a simple animation that moves the Bootstrap elements back to their original position.


var moveElementsBack = new TimelineMax({paused:true, repeat:-1});

moveElementsBack.fromTo('#first_one_you_want_to_move',1,{top:-300},{top:0})

.fromTo('#the_second_top_element_you_want_to_move',1,{top:-300},{top:0})

.fromTo('#the_bottom_element',1,{top:800},{top});

So line one is making a new TimeLine, it does not autoplay, and repeats indefinitely. The third line is the first block animation, the reason we used .fromTo if you are familiar with GSAP is because we am repeating the animation, if I just used .to, the element would still be there in the next time the slideshow looped through and there would be no cool animation of the Bootstrap elements coming into view. The id is the selector, the next number is the length of time it takes for the animation to complete, and then the first top is where the element is animating FROM, (remember you set those with the CSS from earlier), and then the second top is where the element is animating to. Then, the next animation in queue, line five, will start to play. Why this is cool is because you can use the Bootstrap media queries to get the nice effect on all screens, instead of having to write a ton of media queries to make sure your slideshow looks nice on all the devices out there.  The numeric values for top do not include a “px” because GSAP already falls to that as default. You could use percentages there wrapped in apostrophes, but that would cause with the relative positioning, it is better to stick with pixels for relative, and percentage with absolute.

Need a custom slideshow, plugin, or a whole new site, contact us here!