Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kathryn.crawford

GSAP/Bootstrap display and visibility

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

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