| 101 | }, 'start+=2'); |
| 102 | } |
| 103 | enter() { |
| 104 | this.startTL.kill(); |
| 105 | |
| 106 | gsap.set(DOM.enterCtrl, {pointerEvents: 'none'}); |
| 107 | DOM.enterCtrl.removeEventListener('mouseenter', this.enterMouseEnterEv); |
| 108 | DOM.enterCtrl.removeEventListener('mouseleave', this.enterMouseLeaveEv); |
| 109 | |
| 110 | gsap.set([DOM.frame, DOM.content], {opacity: 1}); |
| 111 | |
| 112 | gsap.timeline() |
| 113 | .addLabel('start', 0) |
| 114 | .to(DOM.enterCtrl, { |
| 115 | duration: 0.6, |
| 116 | ease: 'back.in', |
| 117 | scale: 0.2, |
| 118 | opacity: 0 |
| 119 | }, 'start') |
| 120 | .to(this.DOM.circleText, { |
| 121 | duration: 0.8, |
| 122 | ease: 'back.in', |
| 123 | scale: 0, |
| 124 | opacity: 0, |
| 125 | stagger: { |
| 126 | amount: -0.4 |
| 127 | } |
| 128 | }, 'start') |
| 129 | .to([DOM.content.children, DOM.frame.children], { |
| 130 | duration: 0.9, |
| 131 | ease: 'back.out', |
| 132 | startAt: {opacity: 0, scale: 1.2}, |
| 133 | scale: 1, |
| 134 | opacity: 1, |
| 135 | stagger: { |
| 136 | amount: 0.3 |
| 137 | } |
| 138 | }, 'start+=1.3') |
| 139 | } |
| 140 | } |