TEST | On scroll animations

Tutorials of (Test | on scroll animations) by Whiskas_

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>TEST | On scroll animations</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  
<div class="container">
  <div class="block" data-scroll="data-scroll">
    <div class="block__inner" data-animate="left"></div>
    <div class="block__inner" data-animate="right"></div>
  </div>
  <div class="block" data-scroll="data-scroll">
    <div class="block__inner" data-animate="left"></div>
    <div class="block__inner" data-animate="right"></div>
  </div>
  <div class="block center" data-scroll="data-scroll">
    <div class="block__inner" data-animate="up"></div>
  </div>
  <div class="block" data-scroll="data-scroll">
    <div class="block__inner" data-animate="left"></div>
    <div class="block__inner" data-animate="right"></div>
  </div>
  <div class="block" data-scroll="data-scroll">
    <div class="block__inner" data-animate="left"></div>
    <div class="block__inner" data-animate="right"></div>
  </div>
  <div class="block center" data-scroll="data-scroll">
    <div class="block__inner" data-animate="up"></div>
  </div>
</div>
<div class="container">
  <div class="block slider slider--left" data-animate="data-animate" data-scroll="data-scroll">
    <div class="block__inner image"></div>
    <div class="block__inner text"></div>
  </div>
  <div class="block slider slider--right" data-animate="data-animate" data-scroll="data-scroll">
    <div class="block__inner text"></div>
    <div class="block__inner image"></div>
  </div>
  <div class="block slider slider--up" data-animate="data-animate" data-scroll="data-scroll">
    <div class="block__inner image"></div>
    <div class="block__inner text"></div>
  </div>
  <div class="block slider slider--left" data-animate="data-animate" data-scroll="data-scroll">
    <div class="block__inner image"></div>
    <div class="block__inner text"></div>
  </div>
  <div class="block slider slider--right" data-animate="data-animate" data-scroll="data-scroll">
    <div class="block__inner text"></div>
    <div class="block__inner image"></div>
  </div>
  <div class="block slider slider--up" data-animate="data-animate" data-scroll="data-scroll">
    <div class="block__inner image"></div>
    <div class="block__inner text"></div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.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>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
html,
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 400px;
  padding-bottom: 400px;
  width: 800px;
  background-color: rgba(255,165,0,0.1);
}
.block {
  display: flex;
  justify-content: space-between;
  width: 500px;
  background-color: rgba(0,0,0,0.3);
}
.block + .block {
  margin-top: 50px;
}
.block.center {
  justify-content: center;
}
.block.slider {
  border: 5px solid rgba(0,0,255,0.3);
}
.block__inner {
  display: flex;
  width: 200px;
  height: 200px;
  background-color: #008000;
  opacity: 0.3;
}
/* Downloaded from https://www.codeseek.co/ */
var controller = new ScrollMagic.Controller();

// Animations

var element = $('[data-animate]');

element.each(function(index, item) {
  var $el = $(item);
  var offset = $el.offset().top - window.innerHeight / 1.5;
  
  var transition = getTransition($el);
  
  if(transition) {

    var tween = TweenMax.from($el, 1, {
      autoAlpha: 0,
      x: transition.x,
      y: transition.y
    });
    
    createScene(offset, tween);
    
  } else {
    
    initSliderAnimations($el, offset);

  }

});

// ==============================
// Helpers
// ==============================

function getTransition($el) {
  var x = 0, y = 0;
  
  var data = $el.data('animate');
  
  switch (data) {

    case 'left':
      x = -500;
      break;

    case 'right':
      x = 500;
      break;

    case 'up':
      y = 500;
      break;
      
    default:
      return null;
      break;
  }
 
  return {
    x: x,
    y: y
  }
}

// ==============================
// Scene
// ==============================

function createScene(offset, tween) {
  new ScrollMagic.Scene({ offset: offset })
    .triggerHook(0)
    .setTween(tween)
    .reverse(false)
    // .addIndicators()
    .addTo(controller);
}

// ==============================
// Slider
// ==============================

function initSliderAnimations($el, offset) {
  var type;
  var $image = $el.find('.image');
  var $text = $el.find('.text');
  
  if($el.hasClass('slider--left')) {
    type = 'left';
  } else if($el.hasClass('slider--right')) {
    type = 'right';
  } else if($el.hasClass('slider--up')) {
    type = 'up';
  }
  
  switch (type) {

    case 'left':
      var tween1 = TweenMax.from($image, 1, { autoAlpha: 0, x: -500, y: 0 });
      var tween2 = TweenMax.from($text, 1, { autoAlpha: 0, x: 500, y: 0 });
      break;

    case 'right':
      var tween1 = TweenMax.from($image, 1, { autoAlpha: 0, x: 500, y: 0 });
      var tween2 = TweenMax.from($text, 1, { autoAlpha: 0, x: -500, y: 0 });
      break;

    case 'up':
      var tween1 = TweenMax.from($image, 1, { autoAlpha: 0, x: 0, y: 500 });
      var tween2 = TweenMax.from($text, 1, { autoAlpha: 0, x: 0, y: 500 });
      break;

    default:
      return;
  }
  
  createScene(offset, tween1);
  createScene(offset, tween2);
}

// Parallax

var element = $('[data-scroll]');

element.each(function(index, item) {

  var $el = $(item);
  
  var offset = $el.offset().top - window.innerHeight;
  var duration = window.innerHeight + $el.height();
  var power = 400;
  var time = 0.5;
  
  if(index % 2) duration += window.innerHeight / 2;

  var tween = TweenMax.to($el, 1, { textOverflow: 'ellipsis' })
    .eventCallback('onUpdate', function(self) {
      var scroll = self._time * power - power/2;
      TweenMax.to(self._targets[0], time, { y: -scroll });
    }, ["{self}"]);
    
  var scene = new ScrollMagic.Scene({
    offset: offset,
    duration: duration
  })
    .triggerHook(0)
    .setTween(tween)
    .addIndicators()
    .addTo(controller);

});

This awesome code ( TEST | On scroll animations ) is write by Whiskas_, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Whiskas_