Phaser 4 examples
Eases
- 22 examples
Examples 22
Back Ease GraphVisualizes the curves of Back easing functions (In, Out, and InOut) by plotting a tweened object's path onto a graph.
Back Easing FunctionsThis example demonstrates the 'Back' easing functions (In, Out, and InOut), showing how tweens can overshoot their start or end positions for an elastic movement effect.
Bounce EaseA comparison of the bounce easing functions (bounce.in, bounce.out, and bounce.inout) showing how they apply a bouncing motion at the start, end, or both ends of a tween.
Bounce Ease VariationsVisualize the motion curves of different Bounce ease types (In, Out, and InOut) as they are graphed in real-time.
Circular EasingA demonstration of the Circular easing functions (Circ.in, Circ.out, and Circ.inOut) applied to multiple tweened objects.
Circular Easing GraphVisualize the curves of different Circular easing functions (circ.in, circ.out, and circ.inout) using a moving target and a Graphics path.
Cubic Easing GraphVisualize the trajectory of Cubic ease functions (In, Out, and InOut) by plotting their movement over time using a Graphics object and a RenderTexture.
Cubic Easing VariationsThis example demonstrates the differences between Cubic In, Cubic Out, and Cubic InOut easing functions within Phaser tweens.
Ease EquationsA visual comparison of all built-in easing functions in Phaser, demonstrating how different equations affect the speed and motion of tweens.
Ease MixerDemonstrates how to apply different easing functions to individual properties within a single tween to create complex motion paths by mixing ease types for the X and Y axes.
Ease ParametersDemonstrates how to pass custom arguments to easing functions using the easeParams property, such as adjusting the overshoot amount for the Back ease.
Exponential Ease VisualizerVisualizes exponential easing functions (In, Out, and InOut) by plotting their movement curves in real-time using a tween and Graphics object.
Exponential EasingDemonstrates the behavior of Exponential In, Out, and InOut easing functions applied to tween animations.
Linear EaseThis example demonstrates how to use the linear easing function to move an object at a constant speed throughout a tween.
Quad Ease FunctionsA comparison of the visual differences between Quadratic (Quad) easing types: In, Out, and InOut.
Quadratic Easing VisualizationVisualizes the curves of Quadratic In, Out, and InOut easing functions by plotting their movement across the screen using a tween and Graphics object.
Quartic EaseCompare the differences between Quartic In, Quartic Out, and Quartic InOut easing functions applied to sprite movement.
Quartic Ease GraphVisualizes the Quartic easing functions (In, Out, and InOut) by drawing their curves in real-time using a tweened object and Graphics.
Quintic EaseDemonstrates the Quintic easing functions (Quint.in, Quint.out, and Quint.inout) to create smooth animations with dramatic acceleration and deceleration.
Quintic Easing GraphVisualize the curve of Quintic easing functions (In, Out, and InOut) by plotting a movement path using a tween and RenderTexture.
Sine Ease GraphVisualize and compare Sine.in, Sine.out, and Sine.inout ease functions by plotting a tween's path onto a RenderTexture.
Sine Easing FunctionsA demonstration comparing the movement characteristics of Sine.in, Sine.out, and Sine.inOut easing functions.