https://www.avengedsevenfold.com/assets/a06ba87d/javascripts/scrub.js

1import { valGlobalScrub, valGlobalDuration } from "./anim-defaults.js"
2import { ScrollTrigger } from "./gsap-business-green/esm/ScrollTrigger.js"
3
4gsap.registerPlugin(ScrollTrigger)
5
6const elem = document.querySelectorAll('.js-scrub')
7
8export const scrub = () => {
9  if (typeof (elem) != 'undefined' && elem != null) {
10
11    elem.forEach(elem => {
12
13      const 
14      keyId = 'data-scrub-id',
15      keyEase = 'data-scrub-ease',
16      keyTrigger = 'data-scrub-trigger',
17      keyTriggerEnd = 'data-scrub-trigger-end',
18      keyStart = 'data-scrub-start',
19      keyEnd = 'data-scrub-end',
20      keyType = 'data-scrub-type',
21      keyAnimStart = 'data-scrub-anim-start',
22      keyAnimEnd = 'data-scrub-anim-end',
23      valEase = elem.getAttribute(keyEase) || 'linear',
24      valTrigger = document.querySelector('['+keyId+'="'+elem.getAttribute(keyTrigger)+'"]') || elem,
25      valTriggerEnd = document.querySelector('['+keyId+'="'+elem.getAttribute(keyTriggerEnd)+'"]') || valTrigger || elem,
26      valStart = elem.getAttribute(keyStart) || 'top bottom',
27      valEnd = elem.getAttribute(keyEnd) || 'bottom top',
28      valType = elem.getAttribute(keyType),
29      valAnimStart = elem.getAttribute(keyAnimStart),
30      valAnimEnd = elem.getAttribute(keyAnimEnd),
31      tl = gsap.timeline({
32        scrollTrigger: {
33          trigger: valTrigger,
34          endTrigger: valTriggerEnd,
35          start:  valStart,
36          end: valEnd,
37          scrub: valGlobalScrub
38        },
39        defaults: {
40          ease: valEase,
41          immediateRender: true
42        }
43      })
44      if (valType === 'scale') {
45        tl.set(elem, {
46          scale: valAnimStart
47        }).to(elem, {
48          scale: valAnimEnd
49        })
50      } else if (valType === 'clip') {
51        tl.set(elem, {
52          clipPath: valAnimStart
53        }).to(elem, {
54          clipPath: valAnimEnd
55        })
56      } else if (valType === 'y') {
57        tl.set(elem, {
58          y: valAnimStart
59        }).to(elem, {
60          y: valAnimEnd
61        })
62      } else if (valType === 'x') {
63        tl.set(elem, {
64          x: valAnimStart
65        }).to(elem, {
66          x: valAnimEnd
67        })
68      } else if (valType === 'opacity') {
69        tl.set(elem, {
70          opacity: valAnimStart
71        }).to(elem, {
72          opacity: valAnimEnd
73        })
74      } else if (valType === 'curtain') {
75        let path = elem.querySelectorAll('path'),
76            tlPath = gsap.timeline()
77        path.forEach(elem => {
78          tlPath.from(elem, {
79            yPercent: -100,
80          },"<25%")
81        })
82        tl
83        .add(()=> elem.classList.remove('position-absolute'))
84        .set(elem, {
85          position: 'fixed',
86          pointerEvents: 'none'
87        })
88        .add(tlPath)
89        .set(elem, {
90          position: 'absolute',
91          pointerEvents: 'initial',
92          immediateRender: false
93        })
94      }
95      console.log(valTrigger)
96
97    })
98  }
99}