SHARE
TWEET

Untitled

a guest Sep 18th, 2019 96 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. (function() {
  2.   var Hero;
  3.  
  4.   Hero = function() {
  5.     this.animate();
  6.   }
  7.  
  8.   Hero.prototype = {
  9.     animate() {
  10.       this.setProgress();
  11.       this.imageScale();
  12.       this.blobAnimation();
  13.     },
  14.     setProgress() {
  15.       const scrollY = window.pageYOffset;
  16.       const hero = document.querySelector('.hero');
  17.       const heroTop = hero.offsetTop;
  18.       const heroHeight = hero.offsetHeight;
  19.  
  20.       this.duration = heroTop + heroHeight;
  21.       this.progress = scrollY / this.duration;
  22.     },
  23.     imageScale() {
  24.       const image = document.querySelector('.hero__image--scale');
  25.  
  26.       // Never scale below 100%
  27.       const minScale = 1;
  28.       // How quickly / slowly the scale happens
  29.       const scaleFactor = .5;
  30.  
  31.       let scaleTo = 1 + (this.progress * scaleFactor);
  32.       let slideTo = (this.progress * 50);
  33.  
  34.       // Make sure to stick to minimum scale
  35.       if (scaleTo < minScale) {
  36.         scaleTo = minScale;
  37.       }
  38.  
  39.       let transform = `scale(${scaleTo}) translateY(${slideTo}%)`;
  40.  
  41.       image.style.transform = transform;
  42.     },
  43.     blobAnimation() {
  44.       const d = {
  45.         start: '.hero__blob--canvas svg path',
  46.         middle: '.hero__blob--middle svg path',
  47.         end: '.hero__blob--end svg path'
  48.       };
  49.  
  50.       for (let x in d) {
  51.         let svg = document.querySelector(d[x]);
  52.         d[x] = svg.getAttribute('d');
  53.       }
  54.  
  55.       const timeline = window.anime.timeline({
  56.         duration: this.duration,
  57.         easing: 'linear',
  58.         autoplay: false,
  59.         direction: 'normal',
  60.         loop: false
  61.       });
  62.  
  63.       timeline
  64.         // .add({
  65.         //   targets: '.hero__blob--canvas svg path',
  66.         //   d: d.start
  67.         // })
  68.         .add({
  69.           targets: '.hero__blob--canvas svg path',
  70.           d: [{
  71.               value: d.middle
  72.             },
  73.             {
  74.               value: d.end
  75.             }
  76.           ]
  77.         });
  78.  
  79.       const seekTo = this.progress * 100;
  80.       console.log(seekTo);
  81.  
  82.       timeline.seek(seekTo);
  83.     }
  84.   }
  85.  
  86.   window.addEventListener('DOMContentLoaded', () => {
  87.     window.hero = new Hero();
  88.   });
  89.   window.addEventListener('scroll', () => {
  90.     if (window.hero) {
  91.       window.hero.animate();
  92.     }
  93.   });
  94.  
  95. })();
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top