Skip to content


vue3-pixi provides out-of-the-box transition effects. You can use the Transition component on any element, which inherits from Vue's <BaseTransition>.

The usage of PTransition is similar to Vue Transition (but does not include CSS modes). The component can wrap any element, and the transition effect is triggered when the v-if condition of the element becomes true|false. It can also be encapsulated as a standalone transition component.

It is important to note that the default Transition component cannot be overridden, so the exported component name is PTransition|PixiTransition.


Pixi.js does not provide a built-in tweening engine, but you can use third-party tweening engines like GSAP or Tween.js to achieve tween animations.

Properties Mode

Unlike the Vue Transition, you can achieve transition effects by setting different properties:


By default, all transition effects are linear. You can customize the transition easing by using custom cubic-bezier curves.

Ease Presets

The following transitions are available via the TransitionPresets constant.

For more complex transitions, a custom function can be provided.


You can also control the transition effects by setting enter and level to functions:


PTransition Props

durationnumber object500Transition duration (ms).
before-enterfunction object|arrayundefinedCalled before the transition starts.
enterfunction object|arrayundefinedCalled when the transition starts.
after-enterfunction object|arrayundefinedCalled after the transition ends.
before-leavefunction object|arrayundefinedCalled before the transition starts.
leavefunction object|arrayundefinedCalled when the transition starts.
after-leavefunction object|arrayundefinedCalled after the transition ends.

PTransition Events

before-enterfunctionCalled before the transition starts.
enterfunctionCalled when the transition starts.
after-enterfunctionCalled after the transition ends.
enter-cancelledfunctionCalled when the transition is cancelled.
before-leavefunctionCalled before the transition starts.
leavefunctionCalled when the transition starts.
after-leavefunctionCalled after the transition ends.

TransitionVars Properties

delaynumberTransition delay (ms).
durationnumberTransition duration (ms).
sasestringTransition easing.
xnumberThe x position of the element.
ynumberThe y position of the element.
alphanumberThe alpha of the element.
rotationnumberThe rotation of the element.
scalenumberThe scale of the element.
scaleXnumberThe scaleX of the element.
scaleYnumberThe scaleY of the element.
skewnumberThe skew of the element.
skewXnumberThe skewX of the element.
skewYnumberThe skewY of the element.
pivotnumberThe pivot of the element.
pivotXnumberThe pivotX of the element.
pivotYnumberThe pivotY of the element.
tintnumberThe tint of the element.
tileXnumberThe tileX of the element.
tileYnumberThe tileY of the element.
tilePositionnumberThe tilePosition of the element.
tilePositionXnumberThe tilePositionX of the element.
tilePositionYnumberThe tilePositionY of the element.
tileScalenumberThe tileScale of the element.
tileScaleXnumberThe tileScaleX of the element.
tileScaleYnumberThe tileScaleY of the element.
zIndexnumberThe zIndex of the element.
widthnumberThe width of the element.
heightnumberThe height of the element.
anchornumberThe anchor of the element.
anchorXnumberThe anchorX of the element.
anchorYnumberThe anchorY of the element.
autoAlphanumberThe autoAlpha of the element.
blurnumberThe blur of the element.
blurXnumberThe blurX of the element.
blurYnumberThe blurY of the element.
blurPaddingnumberThe blurPadding of the element.
brightnessnumberThe brightness of the element.
colorizenumberThe colorize of the element.
colorizeAmountnumberThe colorizeAmount of the element.
colorMatrixFilternumberThe colorMatrixFilter of the element.
combineCMFnumberThe combineCMF of the element.
contrastnumberThe contrast of the element.
fillColornumberThe fillColor of the element.
huenumberThe hue of the element.
lineColornumberThe lineColor of the element.