GSAP/Bootstrap display and visibility

[kathryn.crawford]

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

[Diaco]

Hi kathryn.crawford 

 

pls provide Codepen demo for your questions .

 

check this out : 

See the Pen WQawdL by MAW (@MAW) on CodePen

[kathryn.crawford]

@Diaco, I added a codepen demo

[PointC]

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.

[kathryn.crawford]

Thanks PointC, that should work great