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); });