Jump to content
Search Community

GSAP/Bootstrap display and visibility

kathryn.crawford test
Moderator Tag

Go to solution Solved by PointC,

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

I've been building a website with Bootstrap3, and I decided I wanted to tween some divs to break up one of the pages. I tried the following to tween the display of the divs, but nothing seems to work. I also tried using .invisible (see below) and tweening visibility, but that did not work either.  


Bootstrap classes

.hidden {
  display: none !important;
.invisible {
  visibility: hidden;

See the Pen MaPyEN by kathryncrawford (@kathryncrawford) on CodePen

Link to comment
Share on other sites

  • Solution

Hi Kathryn :),


I just removed the Bootstrap dependencies (CSS and JS) and added a local style for .hidden and this works just fine.


See the Pen mezNPb by PointC (@PointC) on CodePen


I also noticed that you were using TimelineMax in your JS rather than TweenMax or TweenLite. The console was also showing an error looking for jQuery as Bootstrap's js seems to need it.


I'd recommend going into your Bootstrap CSS and just change the hidden class to an opacity of 0 and then the tween should work just fine.


I hope this helps.

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