| 31 | this.initEvents(); |
| 32 | } |
| 33 | initEvents() { |
| 34 | this.enterMouseEnterEv = () => { |
| 35 | gsap.killTweensOf([DOM.enterBackground,this.DOM.circleText]); |
| 36 | |
| 37 | gsap.to(DOM.enterBackground, { |
| 38 | duration: 1, |
| 39 | ease: 'expo', |
| 40 | scale: 1.4 |
| 41 | }); |
| 42 | gsap.to(this.DOM.circleText, { |
| 43 | duration: 1, |
| 44 | ease: 'expo', |
| 45 | scale: 1.15, |
| 46 | rotation: i => i%2 ? '-=90' : '+=90', |
| 47 | opacity: 0.4, |
| 48 | |
| 49 | }); |
| 50 | }; |
| 51 | this.enterMouseLeaveEv = () => { |
| 52 | // gsap.killTweensOf([DOM.enterBackground,this.DOM.circleText]); |
| 53 | gsap.to(DOM.enterBackground, { |
| 54 | duration: 1, |
| 55 | ease: 'expo', |
| 56 | scale: 1 |
| 57 | }); |
| 58 | gsap.to(this.DOM.circleText, { |
| 59 | duration: 1, |
| 60 | ease: 'expo', |
| 61 | scale: 1, |
| 62 | rotation: i => i%2 ? '+=120' : '-=120', |
| 63 | opacity: 1, |
| 64 | stagger: { |
| 65 | amount: -0.2 |
| 66 | } |
| 67 | }); |
| 68 | }; |
| 69 | DOM.enterCtrl.addEventListener('mouseenter', this.enterMouseEnterEv); |
| 70 | DOM.enterCtrl.addEventListener('mouseleave', this.enterMouseLeaveEv); |
| 71 | |
| 72 | this.enterClickEv = () => this.enter(); |
| 73 | DOM.enterCtrl.addEventListener('click', this.enterClickEv); |
| 74 | } |
| 75 | start() { |
| 76 | this.startTL = gsap.timeline() |
| 77 | .addLabel('start', 0) |