Harley

[harley]

I currently have a bootstrap 4 navbar and when i have a tween max animation in use in my index it breaks the smooth animation on the navbar burger bar. I cant seem to figure out why.

Here is the code below:

 

<!--- The parallax has a tweenmax animation of zooming in an out on the "img/-ob.pnglogo."  The "id="para-logo" is the targeted tween effect. if i remove it the bootstrap burger bar smooth animation works. -->

<div id="parallax1" class="parallaxparent parallax">
            <div class="box">
                <div class="fade-in disable" style="margin-top: 130px"><svg style="width: 240px;" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1294.1 1935.6"><style>.st0{fill:none;stroke:#fbb043;stroke-width:73;stroke-miterlimit:10}</style><g id="Layer_2"><path fill="none" class="path2" d="M829.1 1935.6V330.3c0-3.1 2.5-5.5 5.5-5.5h127.6c3.1 0 5.5 2.5 5.5 5.5v128c0 3.1-2.5 5.5-5.5 5.5H696c-3.1 0-5.5-2.5-5.5-5.5V186.7c0-3.1 2.5-5.5 5.5-5.5h409.9c3.1 0 5.5 2.5 5.5 5.5v412.8c0 3.1-2.5 5.5-5.5 5.5H552.2c-3.1 0-5.5-2.5-5.5-5.5V42c0-3.1 2.5-5.5 5.5-5.5h697.4c3.1 0 5.5 2.5 5.5 5.5v701c0 3.1-2.5 5.5-5.5 5.5H-2.5" id="Layer_3"/></g></svg>
                </div>
                <div class="center-img"> <img src="img/logo-ob.png" id="para-logo" class="para-logo rellax fade-in responsive">
                </div>
                <div id="logo" style="margin-top: -200px;" class="fade-in disable" >
                    <svg style="width: 200px;" id="Layer_1"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1294.1 1935.6"><g id="Layer_2"><path fill="none" 
                    class="path2" d="M462.5-2.5v1605.3c0 3.1-2.5 5.5-5.5 5.5H329.4c-3.1 0-5.5-2.5-5.5-5.5v-128c0-3.1 2.5-5.5 5.5-5.5h266.2c3.1 0 5.5 2.5 5.5 5.5v271.6c0 3.1-2.5 5.5-5.5 5.5H185.7c-3.1 0-5.5-2.5-5.5-5.5v-412.8c0-3.1 2.5-5.5 5.5-5.5h553.7c3.1 0 5.5 2.5 5.5 5.5v557.5c0 3.1-2.5 5.5-5.5 5.5H42c-3.1 0-5.5-2.5-5.5-5.5v-701c0-3.1 2.5-5.5 5.5-5.5h1252.1" id="Layer_3"/></g></svg>
                </div>
            </div>
        </div>
    </div>

 

<!-- If I get rid of the tweenmax effect on the img logo above then the bootstrap smooth animation burger bar works perfectly. -->

        <section class="navigation container-fluid">
        <nav class="container navbar-custom navbar navbar-expand-md navbar-light">
  <a class="navbar-brand m-logo" href="#"><img src="img/logo-ob.png" id="n-logo"></a>
  <button class="navbar-toggler custom-toggler.navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  

  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="nav navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Branding</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Social</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Art</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Web Development</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
      
    </ul>
        
    </div>
</nav>
</section>

 

<!--- here is the tween scripts --->

$(document).ready(function(){

// Init ScrollMagic
    var controller = new ScrollMagic.Controller();

// build tween
    var tween = TweenMax.fromTo("#para-logo", 1,
                                {scale: 1},
                                {scale: 1.02, repeat: -1, yoyo: true, ease: Circ.easeInOut}
                                
                            );

    // build scene
    var scene = new ScrollMagic.Scene({triggerElement: "#para-logo", duration: "100%", offset: -50})
                    .setTween(tween)
                    .addIndicators({name: "loop"}) // add indicators (requires plugin)
                    .addTo(controller);

});

     

[ZachSaucier]

Hello Harley and welcome to the forums.

 

Could you please recreate a minimal demo recreating your issue in something like a CodePen? The below thread should provide more info on how to do so and the below demo should help get you started.

 

 

See the Pen xxKEmML by GreenSock (@GreenSock) on CodePen