artemsemkin

Untitled

Sep 21st, 2020
770
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* ======================================================================== */
  2. /* sectionFullscreen1 */
  3. /* ======================================================================== */
  4. var SectionFullscreen1 = function () {
  5.  
  6.   var $target = $('.section-fullscreen_1[data-os-animation]'),
  7.     tl = new TimelineMax(),
  8.     $bg = $target.find('.section-fullscreen__inner-bg'),
  9.     $headline = $target.find('.slider-fullscreen__slide-headline'),
  10.     $heading = $target.find('.slider-fullscreen__slide-header h2'),
  11.     $description = $target.find('.slider-fullscreen__slide-header p'),
  12.     $button = $target.find('.slider-fullscreen__slide-wrapper-button'),
  13.     $img = $target.find('.overflow__content'),
  14.     $curtain = $target.find('.overflow__curtain'),
  15.     splitHeading = splitLines($heading),
  16.     splitDescription = splitLines($description);
  17.  
  18.   prepare();
  19.  
  20.   function prepare() {
  21.  
  22.     if (!$target.length) {
  23.       return;
  24.     }
  25.  
  26.     setLines(splitHeading.words);
  27.     setLines(splitDescription.lines);
  28.  
  29.     TweenMax.set($headline, {
  30.       scaleX: 0,
  31.       transformOrigin: 'left center',
  32.     });
  33.  
  34.     TweenMax.set($bg, {
  35.       scaleY: 0,
  36.       transformOrigin: 'bottom center'
  37.     });
  38.  
  39.     TweenMax.set($img, {
  40.       scale: 1.1,
  41.       autoAlpha: 0,
  42.     });
  43.  
  44.     TweenMax.set($button, {
  45.       y: '10px',
  46.       autoAlpha: 0
  47.     });
  48.  
  49.     TweenMax.set($curtain, {
  50.       y: '100%',
  51.     });
  52.  
  53.   }
  54.  
  55.   this.animate = function () {
  56.  
  57.     if (!$target.length) {
  58.       return;
  59.     }
  60.  
  61.     tl.timeScale(0.5); // 0.5 = half speed, 1.0 = normal speed, 2.0 = 2x speed, etc
  62.  
  63.     tl
  64.       .staggerTo($bg, 0.6, {
  65.         scaleY: 1,
  66.         ease: Expo.easeInOut
  67.       }, 0.05)
  68.       .to($curtain, 0.3, {
  69.         y: '0%',
  70.         ease: Expo.easeInOut,
  71.       }, '-=0.6')
  72.       .set($img, {
  73.         autoAlpha: 1
  74.       }).to($img, 0.6, {
  75.         scale: 1,
  76.         ease: Power4.easeOut
  77.       })
  78.       .to($curtain, 0.3, {
  79.         y: '-102%',
  80.         ease: Expo.easeInOut,
  81.       }, '-=0.6')
  82.       .to($headline, 0.6, {
  83.         scaleX: 1,
  84.         ease: Expo.easeInOut
  85.       }, '-=1')
  86.       .add(animateLines(splitHeading.words), '-=0.6')
  87.       .to($button, 0.6, {
  88.         autoAlpha: 1,
  89.         y: '0px'
  90.       }, '-=0.6')
  91.       .add(animateLines(splitDescription.lines, 1, 0.1), '-=0.6')
  92.  
  93.   }
  94.  
  95. }
RAW Paste Data