Thomas-Vance-clone-/script.js at main · kor1998/Thomas-Vance-clone- · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import {
	OverlayScrollbars ,
	ScrollbarsHidingPlugin,
  SizeObserverPlugin,
  ClickScrollPlugin
} from './node_modules/overlayscrollbars/overlayscrollbars.mjs';

const lenis = new Lenis()

// lenis.on('scroll', (e) => {
//   console.log(e)
// })

function raf(time) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}

requestAnimationFrame(raf)

// gsap.registerPlugin(ScrollTrigger);

document.querySelectorAll('.elem').forEach(elem => {
   let image = elem.querySelector("img")
   let tl = gsap.timeline()

   let xTransform = gsap.utils.random(-100, 100);

   tl
   .set(image, {
     transformOrigin: `${xTransform < 0 ? 0 : '100%'}`,
   }, "start")
   .to(image, {
    scale: 0,
    ease: 'none',
    scrollTrigger: {
      scrub: true,
      trigger: image,
      start: 'top top',
      end: 'bottom top',
    }
   }, "start")
   .to(elem, {
    xPercent: xTransform,
    ease: 'none',
    scrollTrigger: {
      scrub: true,
      trigger: image,
      start: 'top bottom',
      end: 'bottom top',
    }
   });
});

OverlayScrollbars(document.querySelector('body'), {
  className: (document.body.classList.contains('os-theme-dark') ? "os-theme-dark" : "os-theme-light"),
});