ScaleFadeAnimation
in package
implements
AnimationInterface
Scale-fade animation for components.
The scale_fade animation causes a component to scale up while fading in when it enters the viewport, creating a zoom-in effect.
Tags
Table of Contents
Interfaces
- AnimationInterface
- Interface for all ANF component animations.
Properties
- $initialAlpha : float|null
- The initial opacity of the component (0.0 to 1.0).
- $initialScale : float|null
- The initial scale of the component (e.g., 0.75 for 75% size).
- $userControllable : bool|null
- Whether the animation is controllable by user scroll position.
Methods
- dramatic() : self
- Create a dramatic scale-fade animation.
- getType() : string
- Get the animation type identifier.
- jsonSerialize() : array<string, mixed>
- {@inheritdoc}
- moderate() : self
- Create a moderate scale-fade animation.
- setInitialAlpha() : $this
- Set the initial alpha (opacity) value.
- setInitialScale() : $this
- Set the initial scale value.
- setUserControllable() : $this
- Set whether the animation is user controllable.
- subtle() : self
- Create a subtle scale-fade animation.
- with() : self
- Create a ScaleFadeAnimation with specific values.
Properties
$initialAlpha
The initial opacity of the component (0.0 to 1.0).
private
float|null
$initialAlpha
= null
$initialScale
The initial scale of the component (e.g., 0.75 for 75% size).
private
float|null
$initialScale
= null
$userControllable
Whether the animation is controllable by user scroll position.
private
bool|null
$userControllable
= null
Methods
dramatic()
Create a dramatic scale-fade animation.
public
static dramatic() : self
Starts at 50% size and fully transparent.
Return values
self —A new ScaleFadeAnimation instance.
getType()
Get the animation type identifier.
public
getType() : string
Return values
string —The animation type (e.g., 'fade_in', 'move_in').
jsonSerialize()
{@inheritdoc}
public
jsonSerialize() : array<string, mixed>
Return values
array<string, mixed>moderate()
Create a moderate scale-fade animation.
public
static moderate() : self
Starts at 75% size and 25% opacity.
Return values
self —A new ScaleFadeAnimation instance.
setInitialAlpha()
Set the initial alpha (opacity) value.
public
setInitialAlpha(float $initialAlpha) : $this
The component will fade from this value to 1.0.
Parameters
- $initialAlpha : float
-
Initial opacity from 0.0 to 1.0.
Return values
$thissetInitialScale()
Set the initial scale value.
public
setInitialScale(float $initialScale) : $this
The component will scale from this value to 1.0. Values less than 1.0 create a zoom-in effect.
Parameters
- $initialScale : float
-
Initial scale factor (e.g., 0.75 for 75%).
Return values
$thissetUserControllable()
Set whether the animation is user controllable.
public
setUserControllable(bool $userControllable) : $this
When true, the animation progress is tied to scroll position.
Parameters
- $userControllable : bool
-
Whether user can control the animation.
Return values
$thissubtle()
Create a subtle scale-fade animation.
public
static subtle() : self
Starts at 90% size and 50% opacity.
Return values
self —A new ScaleFadeAnimation instance.
with()
Create a ScaleFadeAnimation with specific values.
public
static with(float $initialAlpha, float $initialScale) : self
Parameters
- $initialAlpha : float
-
Initial opacity (0.0 to 1.0).
- $initialScale : float
-
Initial scale factor.
Return values
self —A new ScaleFadeAnimation instance.