BgaAnimations - Revision history

BoontjieBoon: Added note about animating elements from/to container elements

2026-07-27T15:43:20Z

Added note about animating elements from/to container elements

← Older revision		Revision as of 17:43, 27 July 2026
Line 83:		Line 83:

	For all elements which will be animated, it is recommended to use CSS class selectors to style them (not, e.g., ID or parent-based selectors). This is because the animations typically clone the element to animate (giving it a new ID), and the DOM parentage may change as well. Symptoms that this address are things like <code>slideOutAndDestroy</code> simply causing the element to disappear, or <code>slideAndAttach</code> causing the element to "jump" to the destination.		For all elements which will be animated, it is recommended to use CSS class selectors to style them (not, e.g., ID or parent-based selectors). This is because the animations typically clone the element to animate (giving it a new ID), and the DOM parentage may change as well. Symptoms that this address are things like <code>slideOutAndDestroy</code> simply causing the element to disappear, or <code>slideAndAttach</code> causing the element to "jump" to the destination.


			Animating absolutely positioned elements might not behave as expected, rather animate elements from/to container elements (containers can be positioned absolutely).

	== Changelog ==		== Changelog ==

Thoun at 09:00, 23 June 2026

2026-06-23T09:00:30Z

← Older revision		Revision as of 11:00, 23 June 2026
Line 21:		Line 21:
	const BgaAnimations = await importEsmLib('bga-animations', '1.x');		const BgaAnimations = await importEsmLib('bga-animations', '1.x');
	</pre>		</pre>
			This line should be placed on top of the JS file, before any class declaration.

	Legacy way;		Legacy way;

Victoria La at 15:34, 21 December 2025

2025-12-21T15:34:30Z

← Older revision		Revision as of 17:34, 21 December 2025
Line 1:		Line 1:
	{{Studio_Framework_Navigation}}		{{Studio_Framework_Navigation}}

	~~'''<big>[https://x.boardgamearena.net/data/game-libs/bga-animations/1.x/demo/index.html Demo]</big>'''~~

	~~'''<big>[https://x.boardgamearena.net/data/game-libs/bga-animations/1.x/docs/index.html Doc]</big>'''~~

	== Overview ==		== Overview ==
Line 13:		Line 9:

	The game Reversi is an example of usage.		The game Reversi is an example of usage.

			To see how its work and access examples of source code (via browser dev tools) see
			'''<big>[https://x.boardgamearena.net/data/game-libs/bga-animations/1.x/demo/index.html Demo]</big>'''

			For comprehensive API docs see
			'''<big>[https://x.boardgamearena.net/data/game-libs/bga-animations/1.x/docs/index.html Doc]</big>'''

	== Usage ==		== Usage ==

Thoun at 14:19, 19 December 2025

2025-12-19T14:19:01Z

← Older revision		Revision as of 16:19, 19 December 2025
Line 35:		Line 35:
	// create the animation manager, and bind it to the `gameui.bgaAnimationsActive()` function		// create the animation manager, and bind it to the `gameui.bgaAnimationsActive()` function
	this.animationManager = new BgaAnimations.Manager({		this.animationManager = new BgaAnimations.Manager({
	animationsActive: () => this.gameui.bgaAnimationsActive(),		animationsActive: () => this.bga.gameui.bgaAnimationsActive(),
	});		});
	</pre>		</pre>
Line 49:		Line 49:
	async notif_scoreMeeple(args) {		async notif_scoreMeeple(args) {
	const meepleDiv = document.getElementById(`player-meeple-${args.playerId}`);		const meepleDiv = document.getElementById(`player-meeple-${args.playerId}`);
	await this.animationManager.displayScoring(meepleDiv, args.~~sscore~~, this.gamedatas.players[args.playerId].color);		await this.animationManager.displayScoring(meepleDiv, args.score, this.gamedatas.players[args.playerId].color);
	}		}
	</pre>		</pre>

Thoun at 10:01, 16 December 2025

2025-12-16T10:01:42Z

← Older revision		Revision as of 12:01, 16 December 2025
Line 16:		Line 16:
	== Usage ==		== Usage ==
	Load the lib:		Load the lib:
			<pre>
			const BgaAnimations = await importEsmLib('bga-animations', '1.x');
			</pre>

			Legacy way;
	<pre>		<pre>
	define([		define([
Line 28:		Line 33:
	In your game setup:		In your game setup:
	<pre>		<pre>
	// create the animation manager, and bind it to the `~~game~~.bgaAnimationsActive()` function		// create the animation manager, and bind it to the `gameui.bgaAnimationsActive()` function
	this.animationManager = new BgaAnimations.Manager({		this.animationManager = new BgaAnimations.Manager({
	animationsActive: () => this.bgaAnimationsActive(),		animationsActive: () => this.gameui.bgaAnimationsActive(),
	});		});
	</pre>		</pre>
Line 36:		Line 41:
	Example of usage:		Example of usage:
	<pre>		<pre>
	notif_moveMeeple~~: async function~~(args) {		async notif_moveMeeple(args) {
	const meepleDiv = document.getElementById(`player-meeple-${args.playerId}`);		const meepleDiv = document.getElementById(`player-meeple-${args.playerId}`);
	const destinationDiv = document.getElementById(`table-slot-${args.slot}`);		const destinationDiv = document.getElementById(`table-slot-${args.slot}`);
Line 42:		Line 47:
	}		}

	notif_scoreMeeple~~: async function~~(args) {		async notif_scoreMeeple(args) {
	const meepleDiv = document.getElementById(`player-meeple-${args.playerId}`);		const meepleDiv = document.getElementById(`player-meeple-${args.playerId}`);
	await this.animationManager.displayScoring(meepleDiv, args.sscore, this.gamedatas.players[args.playerId].color);		await this.animationManager.displayScoring(meepleDiv, args.sscore, this.gamedatas.players[args.playerId].color);

Vagabond: Add a developer note about CSS

2025-12-06T13:32:11Z

Add a developer note about CSS

← Older revision		Revision as of 15:32, 6 December 2025
Line 71:		Line 71:
	});		});
	</pre>		</pre>

			== Developer notes ==

			For all elements which will be animated, it is recommended to use CSS class selectors to style them (not, e.g., ID or parent-based selectors). This is because the animations typically clone the element to animate (giving it a new ID), and the DOM parentage may change as well. Symptoms that this address are things like <code>slideOutAndDestroy</code> simply causing the element to disappear, or <code>slideAndAttach</code> causing the element to "jump" to the destination.

	== Changelog ==		== Changelog ==

Vurtan: Added linebreak between Demo and Doc (always misclick)

2025-10-16T20:02:01Z

Added linebreak between Demo and Doc (always misclick)

← Older revision		Revision as of 22:02, 16 October 2025
Line 1:		Line 1:
	{{Studio_Framework_Navigation}}		{{Studio_Framework_Navigation}}

	'''<big>[https://x.boardgamearena.net/data/game-libs/bga-animations/1.x/demo/index.html Demo] [https://x.boardgamearena.net/data/game-libs/bga-animations/1.x/docs/index.html Doc]</big>'''		'''<big>[https://x.boardgamearena.net/data/game-libs/bga-animations/1.x/demo/index.html Demo]</big>'''

			'''<big>[https://x.boardgamearena.net/data/game-libs/bga-animations/1.x/docs/index.html Doc]</big>'''

	== Overview ==		== Overview ==

Thoun at 12:44, 13 August 2025

2025-08-13T12:44:16Z

← Older revision		Revision as of 14:44, 13 August 2025
Line 9:		Line 9:
	It is also Promise-based, so easy to plug-in with the async notification functions.		It is also Promise-based, so easy to plug-in with the async notification functions.
	The lib relies on the Element.animate function.		The lib relies on the Element.animate function.

			The game Reversi is an example of usage.

	== Usage ==		== Usage ==

Thoun: /* Changelog */

2025-08-13T08:48:06Z

Changelog

← Older revision		Revision as of 10:48, 13 August 2025
Line 69:		Line 69:

	== Changelog ==		== Changelog ==
			'''1.0.2''': fix error when a parallelAnimation is null

	'''1.0.1''': Fix documentation		'''1.0.1''': Fix documentation

	'''1.0.0''': Initial version		'''1.0.0''': Initial version

	[[Category:Studio]]		[[Category:Studio]]

Thoun at 18:04, 8 August 2025

2025-08-08T18:04:15Z

← Older revision		Revision as of 20:04, 8 August 2025
Line 1:		Line 1:
	{{Studio_Framework_Navigation}}		{{Studio_Framework_Navigation}}

	'''[https://x.boardgamearena.net/data/game-libs/bga-animations/1.x/demo/index.html Demo] [https://x.boardgamearena.net/data/game-libs/bga-animations/1.x/docs/index.html Doc]'''		'''<big>[https://x.boardgamearena.net/data/game-libs/bga-animations/1.x/demo/index.html Demo] [https://x.boardgamearena.net/data/game-libs/bga-animations/1.x/docs/index.html Doc]</big>'''

	== Overview ==		== Overview ==