Create a global animations file

public/ui/animations.js

@@ -0,0 +1,59 @@
+import gsap from './../web_modules/gsap.js'
+
+window.gsap = gsap
+
+gsap.registerEffect({
+	name: 'dealCards',
+	effect: (targets, config) => {
+		const x = window.innerWidth
+		gsap.killTweensOf(targets)
+		gsap.set(targets, {
+			rotation: -25,
+			x: -x,
+			y: 100,
+			scale: 0.5
+		})
+		console.log('dealCards')
+		return gsap.to(targets, {
+			duration: config.duration,
+			delay: config.delay,
+			scale: 1,
+			x: 0,
+			y: 0,
+			// y: function (index) {
+			// 	const offset = parseInt(index, 10) - 2
+			// 	return offset * 20
+			// },
+			rotation: function (index) {
+				const offset = parseInt(index, 10) - 2
+				return offset * 2
+			},
+			stagger: -0.1,
+			// rotation: gsap.utils.random(-2, 2),
+			ease: 'back.out(0.3)'
+		})
+	},
+	defaults: {
+		delay: 0.4,
+		duration: 0.8
+	}
+})
+
+gsap.registerEffect({
+	name: 'discardHand',
+	effect: (targets, config) => {
+		gsap.killTweensOf(targets)
+		const x = window.innerWidth
+		return gsap.to(targets, {
+			duration: 0.8,
+			x,
+			rotation: 25,
+			stagger: -0.1,
+			scale: 0.5,
+			ease: 'power2.inOut',
+			onComplete: config.onComplete
+		})
+	}
+})
+
+export default gsap

public/ui/cards.js

@@ -1,61 +1,11 @@
 import {html, Component} from './../web_modules/htm/preact/standalone.module.js'
-import gsap from './../web_modules/gsap.js'
 
 export default class Cards extends Component {
 	// props = {	cards: [], isHand: false, energy: 123 }
-	componentDidMount() {
-		this.positionCards()
-	}
-	componentDidUpdate() {
-		this.positionCards()
-	}
-	positionCards() {
-		const cards = this.base.querySelectorAll('.Card')
-		if (this.props.isHand && cards.length) {
-			gsap.set(cards, {x: 0})
-			const x = this.base.getBoundingClientRect().width
-			gsap.killTweensOf(cards)
-			gsap.fromTo(
-				cards,
-				{
-					rotation: -25,
-					x: -x,
-					y: 100,
-					scale: 0.5,
-				},
-				{
-					duration: 0.8,
-					scale: 1,
-					delay: 0.4,
-					x: 0,
-					// y: 0,
-					y: function (index) {
-						const offset = parseInt(index, 10) - 2
-						return offset * 20
-					},
-					rotation: function (index) {
-						const offset = parseInt(index, 10) - 2
-						return offset * 2
-					},
-					stagger: -0.1,
-					// rotation: gsap.utils.random(-2, 2),
-					ease: 'back.out(0.3)',
-				}
-			)
-		}
-	}
-	// spreadCards() {
-	// 	const cards = this.base.querySelectorAll('.Card')
-	// 	cards.forEach((card, index) => {
-	// 		const offset = parseInt(index, 10) - 2
-	// 		card.style.transform = ''
-	// 		card.style.transform = `rotate(${offset * 4}deg)`
-	// 	})
-	// }
 	render(props) {
 		return html`
 			<div class="Cards">
-				${props.cards.map((card) => Card(card, props.energy))}
+				${props.cards.map(card => Card(card, props.energy))}
 			</div>
 		`
 	}