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