Jump to content

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

Share this post

Link to post
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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.