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