| 58 | |
| 59 | // GSAP Scroll Triggers |
| 60 | const scroll = () => { |
| 61 | |
| 62 | fx1Titles.forEach(title => { |
| 63 | |
| 64 | const chars = title.querySelectorAll('.char'); |
| 65 | |
| 66 | gsap.fromTo(chars, { |
| 67 | 'will-change': 'opacity, transform', |
| 68 | opacity: 0, |
| 69 | scale: 0.6, |
| 70 | rotationZ: () => gsap.utils.random(-20,20) |
| 71 | }, |
| 72 | { |
| 73 | ease: 'power4', |
| 74 | opacity: 1, |
| 75 | scale: 1, |
| 76 | rotation: 0, |
| 77 | stagger: 0.4, |
| 78 | scrollTrigger: { |
| 79 | trigger: title, |
| 80 | start: 'center+=20% bottom', |
| 81 | end: '+=50%', |
| 82 | scrub: true |
| 83 | }, |
| 84 | }); |
| 85 | |
| 86 | }); |
| 87 | |
| 88 | fx2Titles.forEach(title => { |
| 89 | |
| 90 | const chars = title.querySelectorAll('.char'); |
| 91 | |
| 92 | gsap.fromTo(chars, { |
| 93 | 'will-change': 'opacity, transform', |
| 94 | opacity: 0, |
| 95 | yPercent: 120, |
| 96 | scaleY: 2.3, |
| 97 | scaleX: 0.7, |
| 98 | transformOrigin: '50% 0%' |
| 99 | }, |
| 100 | { |
| 101 | duration: 1, |
| 102 | ease: 'back.inOut(2)', |
| 103 | opacity: 1, |
| 104 | yPercent: 0, |
| 105 | scaleY: 1, |
| 106 | scaleX: 1, |
| 107 | stagger: 0.03, |
| 108 | scrollTrigger: { |
| 109 | trigger: title, |
| 110 | start: 'center bottom+=50%', |
| 111 | end: 'bottom top+=40%', |
| 112 | scrub: true |
| 113 | } |
| 114 | }); |
| 115 | |
| 116 | }); |
| 117 | |