| 30 | this.initEvents(); |
| 31 | } |
| 32 | initEvents() { |
| 33 | // click and hover events for the "enter" button: |
| 34 | this.enterMouseEnterEv = () => { |
| 35 | gsap.killTweensOf([DOM.enterBackground,this.DOM.circleText]); |
| 36 | |
| 37 | gsap.to(DOM.enterBackground, { |
| 38 | duration: 0.8, |
| 39 | ease: 'power4', |
| 40 | scale: 1.2, |
| 41 | opacity: 1 |
| 42 | }); |
| 43 | |
| 44 | gsap.to(this.DOM.circleText, { |
| 45 | duration: 4, |
| 46 | ease: 'power4', |
| 47 | rotate: '+=180', |
| 48 | stagger: { |
| 49 | amount: -0.3 |
| 50 | } |
| 51 | }); |
| 52 | }; |
| 53 | this.enterMouseLeaveEv = () => { |
| 54 | //gsap.killTweensOf(DOM.enterBackground); |
| 55 | gsap.to(DOM.enterBackground, { |
| 56 | duration: 0.8, |
| 57 | ease: 'power4', |
| 58 | scale: 1 |
| 59 | }); |
| 60 | }; |
| 61 | this.enterClickEv = () => this.enter(); |
| 62 | |
| 63 | DOM.enterCtrl.addEventListener('mouseenter', this.enterMouseEnterEv); |
| 64 | DOM.enterCtrl.addEventListener('mouseleave', this.enterMouseLeaveEv); |
| 65 | DOM.enterCtrl.addEventListener('click', this.enterClickEv); |
| 66 | } |
| 67 | // initial (intro) animation |
| 68 | start() { |
| 69 | this.startTL = gsap.timeline() |