https://www.elife.co.jp/wp-content/themes/elife/js/top_hero.js

1$(function() {
2  var isSP = window.matchMedia('(max-width: 1023px)').matches
3
4  var masterTl
5  var yellowTl
6  var grayTl
7
8  // Load animation
9  var loadAnimation = function() {
10    var $yellow = $('.top-hero__mask-yellow')
11    var $yellowShadow = $('.top-hero__mask-yellow-drop-shadow')
12    var $gray = $('.top-hero__mask-gray')
13    var $grayShadow = $('.top-hero__mask-gray-drop-shadow')
14
15    // Yellow bubble
16    yellowTl = gsap.timeline({
17      repeat: -1,
18      yoyo: true,
19      defaults: {
20        ease: 'sine.inOut',
21        duration: 4,
22      }
23    })
24    yellowTl.addLabel('yellow')
25    yellowTl.to($yellow, {
26      y: -50,
27      snap: {
28        y: 0.5,
29      }
30    }, 'yellow')
31    yellowTl.to($yellowShadow, {
32      autoAlpha: 0.5,
33    }, 'yellow')
34
35    // Gray bubble
36    grayTl = gsap.timeline({
37      repeat: -1,
38      yoyo: true,
39      defaults: {
40        ease: 'sine.inOut',
41        duration: 4,
42      }
43    })
44    grayTl.addLabel('gray')
45    grayTl.to($gray, {
46      y: -30,
47      snap: {
48        y: 0.5,
49      }
50    }, 'gray')
51    grayTl.to($grayShadow, {
52      autoAlpha: 0.5,
53    }, 'gray')
54
55    // Rest of first view
56    var elementsTl = gsap.timeline()
57    // Show hero text
58    $('#mainimg h2 span').each(function() {
59      $(this)[0].innerHTML =  $(this)[0].textContent.replace(/\S/g, "<span class='letter'>$&</span>")
60    })
61    elementsTl.from('#mainimg h2 .letter', {
62      opacity: 0,
63      x: '-40',
64      duration: 1.2,
65      stagger: 0.05,
66      ease: 'expo.out',
67    })
68    elementsTl.from('#mainimg h3', {
69      opacity: 0,
70      duration: 1,
71      ease: 'none'
72    }, '-=1.4')
73    // Show scroll button
74    elementsTl.from('#mainimg .item-scroll', {
75      opacity: 0,
76      scale: .4,
77      duration: 0.4,
78      ease: 'back.out(0.8)',
79    }, '-=1')
80
81    // Master timeline
82    masterTl = gsap.timeline()
83    masterTl.set('.top-hero', {
84      opacity: 0
85    })
86    masterTl.add(elementsTl)
87    masterTl.from('.top-hero', {
88      opacity: 0,
89      duration: 1,
90    }, '-=1')
91    masterTl.add(yellowTl, '-=2')
92    masterTl.add(grayTl, '-=3')
93    masterTl.add(function() {
94      mouseAnimation()
95    }, '-=1')
96  }
97  loadAnimation()
98
99  var mouseAnimation = function() {
100    var $yellow = $('.top-hero__mask-yellow')
101    var $yellowShadow = $('.top-hero__mask-yellow-drop-shadow')
102    var $gray = $('.top-hero__mask-gray')
103    var $grayShadow = $('.top-hero__mask-gray-drop-shadow')
104    $(document).mousemove(function(event){
105      if(isSP) return false
106      yellowTl.kill()
107      grayTl.kill()
108      var xPos = (event.clientX/$(window).width())-0.5
109      var yPos = (event.clientY/$(window).height())-0.5
110      var shadowOpacity = 1 + yPos
111
112      if(yPos > 0) {
113        yPos = 0
114        shadowOpacity = 1
115      }
116
117      gsap.to($yellow, {
118        y: 120 * yPos, 
119        x: 120 * xPos,
120        ease: 'none',
121        duration: 8,
122      })
123      gsap.to($yellowShadow, {
124        x: 120 * xPos,
125        opacity: shadowOpacity,
126        ease: 'none',
127        duration: 8,
128      })
129      gsap.to($gray, {
130        y: 80 * yPos, 
131        x: 80 * -xPos,
132        ease: 'none',
133        duration: 8,
134      })
135      gsap.to($grayShadow, {
136        x: 80 * -xPos,
137        opacity: shadowOpacity,
138        ease: 'none',
139        duration: 8,
140      })
141    })
142  }
143  
144})