"toogle class gsap "
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="bye-world"> </div> <div class="hello-world"> </div> <input class="btn toggler" type="button" value="Toggle" /> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script> <script> var byeWorld=document.querySelectorAll('.bye-world')[0]; var helloWorld=document.querySelectorAll('.hello-world')[0]; var toggleButton=document.querySelectorAll('.toggler')[0]; var timeline=new TimelineMax({paused:true,reversed:true}); var duration=.8; function init(){ toggleButton.addEventListener('click',swap,false); TweenMax.set(helloWorld,{opacity:0}); timeline.to(byeWorld,duration,{opacity:0,ease:Power2.easeIn}).to(helloWorld,duration,{opacity:1,ease:Power2.easeOut}); } function swap(){ (timeline.reversed())?timeline.play():timeline.reverse(); } init(); </script>
.bye-world, .hello-world { width: 100%; height: 80px; } .bye-world { background: #000; } .hello-world { background: #bbb; }

Related: See More


Questions / Comments: