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