Jump to content
Search Community

Bootstrap 3 + GSAP

failure13 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Questiuon is as simple, as it gets complex i guess...

Is there any simple and effective way to completely rewrite Bootstrap 3 default very slow and sluggy jQuery + CSS3 animation for super-awesome and fast GSAP?

 

Well, at least core stuff like sliders, collapse, tabs...

Maybe somebody have done it already?

Link to comment
Share on other sites

Answer is certainly no :D

So basicly, as i understood, idea behind this plugin is that you just include it and than it immediately override usual jQuery methods and functionality, but you still work with it in usual jQuery animate methods?

 

Very cool, thank you!

Link to comment
Share on other sites

Yep, that's exactly the theory. There are a few exceptions due to the proprietary way that jQuery handles certain properties, though, like show, hide, toggle, and scrollTop. The caveats are all mentioned on the plugin page http://www.greensock.com/jquery-gsap-plugin/. But yeah, everything else gets "GreenSocked", so you instantly get a speed boost and added capabilities. Enjoy!

  • Like 1
Link to comment
Share on other sites

Also i wanted to know if it possible with gsap easy way, for example Bootstrap 3 have some CSS transitions in thumbnail calss:

.thumbnail {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

 

Which makes some cool thing, it seem to react on any change, for example if you resize borwser it will smoothly react on div position change, or if you have 0 border radius and 10 on hover, it will slowly fade from 0 to 10.

 

Would love to know if such concept of reaction can be achieved via GSAP :)

Link to comment
Share on other sites

I'm not sure why you would want to replace this, to be honest. GSAP handles animations - it doesn't handle interaction - so to achieve this you would need to attach javascript listeners for mouseover and mouseout events on every element that is 'hoverable' just to do a little border-radius transition. That's a lot of extra fiddling for something that can be handled natively... Just because GSAP exists doesn't mean that all CSS transitions no longer have a use - this seems like one of them.

 

To answer your question, 'yes' you could do this with GSAP, but it's not automatic and would require a lot of javascript event setup for such a tiny effect.

  • Like 2
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.
×
×
  • Create New...