Jump to content
GreenSock

sunirmalya

bootstrap and GSAP

Recommended Posts

this is really just a question

I love how bootstrap rejigs everything when you reduce the window size. So for example, i have 3 pics in a row of 3 columns, when i reduce the window size it becomes 1 column and the pics follow one another.

i am guessing this cannot be done with GSAP and bootstrap together and we have to use that MediaMatch and forget bootstrap - is that right?

 

Link to comment
Share on other sites

Hi,

 

You can definitely use GSAP and Bootstrap without any issue. GSAP is 100% agnostic in order to maximize compatibility with your preferred tools.

 

For this you can set up your Bootstrap image grid using Flexbox and let the Flip plugin do the rest for you:

https://greensock.com/docs/v3/Plugins/Flip

 

This codepen example from the GreenSock collection shows how simple it is:

See the Pen zYqLjre by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!!!

  • Like 3
Link to comment
Share on other sites

thanks for that - i am looking at the tutorial now, but can i ask how do you find the screen size to automatically flip? Thanks  so much for your help and really appreciate your time

 

Link to comment
Share on other sites

11 hours ago, sunirmalya said:

how do you find the screen size to automatically flip?

 

There is no automatically, you're the developer so you need to implement it as you see fit. I would look in to the new gsap.matchMedia() function, seems like the perfect use case for it.

 

https://youtu.be/9gipsKpWozE

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×