| 7 | |
| 8 | export class Cursor { |
| 9 | constructor(el) { |
| 10 | this.DOM = {el: el}; |
| 11 | this.DOM.svg = this.DOM.el.querySelector('.cursor__svg'); |
| 12 | this.DOM.circle = this.DOM.svg.querySelector('.cursor__svg-circle'); |
| 13 | this.DOM.circle.style.transformOrigin = '50% 50%'; |
| 14 | this.DOM.text = this.DOM.el.querySelector('.cursor__text'); |
| 15 | |
| 16 | this.DOM.el.style.opacity = 0; |
| 17 | |
| 18 | this.bounds = this.DOM.svg.getBoundingClientRect(); |
| 19 | |
| 20 | this.renderedStyles = { |
| 21 | tx: {previous: 0, current: 0, amt: 0.2}, |
| 22 | ty: {previous: 0, current: 0, amt: 0.2}, |
| 23 | txText: {previous: 0, current: 0, amt: 0.1}, |
| 24 | tyText: {previous: 0, current: 0, amt: 0.1}, |
| 25 | scale: {previous: 1, current: 1, amt: 0.15} |
| 26 | }; |
| 27 | |
| 28 | this.onMouseMoveEv = () => { |
| 29 | this.renderedStyles.tx.previous = this.renderedStyles.tx.current |
| 30 | = this.renderedStyles.txText.previous |
| 31 | = this.renderedStyles.txText.current |
| 32 | = mouse.x - this.bounds.width/2; |
| 33 | this.renderedStyles.ty.previous = this.renderedStyles.ty.current |
| 34 | = this.renderedStyles.tyText.previous |
| 35 | = this.renderedStyles.tyText.current |
| 36 | = mouse.y - this.bounds.height/2; |
| 37 | |
| 38 | gsap.to(this.DOM.el, {duration: 0.9, ease: 'Power3.easeOut', opacity: 1}); |
| 39 | requestAnimationFrame(() => this.render()); |
| 40 | window.removeEventListener('mousemove', this.onMouseMoveEv); |
| 41 | }; |
| 42 | window.addEventListener('mousemove', this.onMouseMoveEv); |
| 43 | } |
| 44 | enter() { |
| 45 | this.renderedStyles['scale'].current = 1.5; |
| 46 | } |