| 73 | DOM.enterCtrl.addEventListener('click', this.enterClickEv); |
| 74 | } |
| 75 | start() { |
| 76 | this.startTL = gsap.timeline() |
| 77 | .addLabel('start', 0) |
| 78 | // rotation for all texts |
| 79 | .to(this.DOM.circleText, { |
| 80 | duration: 3, |
| 81 | ease: 'expo.inOut', |
| 82 | rotation: i => i%2 ? 90 : -90, |
| 83 | stagger: { |
| 84 | amount: 0.4 |
| 85 | } |
| 86 | }, 'start') |
| 87 | // scale in the texts & enter button and fade them in |
| 88 | .to([this.DOM.circleText, DOM.enterCtrl], { |
| 89 | duration: 3, |
| 90 | ease: 'expo.inOut', |
| 91 | startAt: {opacity: 0, scale: 0.8}, |
| 92 | scale: 1, |
| 93 | opacity: 1, |
| 94 | stagger: { |
| 95 | amount: 0.4 |
| 96 | } |
| 97 | }, 'start') |
| 98 | // at start+1 allow the hover over the enter ctrl |
| 99 | .add(() => { |
| 100 | gsap.set(DOM.enterCtrl, {pointerEvents: 'auto'}); |
| 101 | }, 'start+=2'); |
| 102 | } |
| 103 | enter() { |
| 104 | this.startTL.kill(); |
| 105 | |