jQuery addClass example

Change class name on click in jQuery

by WebDev93

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
  <div class="demo">
    <div class="zoom"></div>
  </div>
  <div class="demo">
    <div class="zoom"></div>
  </div>
  <div class="demo">
    <div class="zoom"></div>
  </div>
  <div class="demo">
    <div class="zoom"></div>
  </div>

CSS

.demo {
  width:100vw;
  height:100vh;
  overflow:hidden;
  position: relative;
}

.demo img {
  display: none;
}


.zoom {
  background-image: url(https://images.pexels.com/photos/3337210/pexels-photo-3337210.jpeg?cs=srgb&dl=city-dawn-sunset-skyline-3337210.jpg&fm=jpg);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

JavaScript

var controller = new ScrollMagic.Controller();

// loop through all elements
$('.zoom').each(function() {
  
  var tween = new TimelineMax();
 
  var zoomOut = TweenLite.from($(this),3,{scale:2,rotationZ:0.01});
  var zoomIn = TweenLite.to($(this),0.01,{scale:1,rotationZ:0});
  
tween
    .add(zoomOut)
    .add(zoomIn)

  var scene = new ScrollMagic.Scene({triggerElement: this, offset: '50%'})
  .setTween(tween) // trigger a TweenMax.to tween
  .addIndicators()
  .addTo(controller);
  
});