Methods

ParticleText.js instances expose several methods for controlling animation and querying state. Access these methods through the object returned by initParticleJS().

Available Methods

const particle = initParticleJS('#canvas', { colors: ['#695aa6'] });

// Available methods:
particle.start Animation();
particle.forceRequestAnimationFrame();
particle.getCurrentBreakpoint();

---

startAnimation()

Manually starts the animation. Use this when autoAnimate is set to false.

Signature

particle.startAnimation()

Parameters

None

Returns

undefined

Usage

// Initialize without auto-start
const particle = initParticleJS('#canvas', {
colors: ['#695aa6'],
autoAnimate: false  // Don't start automatically
});

// Start animation when user clicks button
document.getElementById('startBtn').addEventListener('click', () => {
particle.startAnimation();
console.log('Animation started!');
});

Notes

• Calling startAnimation() multiple times has no effect after the first call
• Animation state is tracked via isAnimating property
• Once started, animation cannot be stopped (by design)

Example: Delayed Start

const particle = initParticleJS('#canvas', {
colors: ['#695aa6'],
autoAnimate: false
});

// Start after 2 seconds
setTimeout(() => {
particle.startAnimation();
}, 2000);

Example: User-Triggered Animation

const particle = initParticleJS('#hero-canvas', {
text: 'Welcome',
colors: ['#695aa6'],
autoAnimate: false
});

// Start when page is visible
document.addEventListener('DOMContentLoaded', () => {
if (document.visibilityState === 'visible') {
  particle.startAnimation();
}
});

---

forceRequestAnimationFrame()

Forces an immediate single-frame render of the animation. Useful for debugging or manual frame-by-frame control.

Signature

particle.forceRequestAnimationFrame()

Parameters

None

Returns

undefined

Usage

const particle = initParticleJS('#canvas', {
colors: ['#695aa6'],
autoAnimate: false  // Manual control
});

// Render single frame
particle.forceRequestAnimationFrame();

// Render another frame
particle.forceRequestAnimationFrame();

Notes

• This renders only ONE frame
• Primarily for debugging and testing
• Does not start continuous animation
• Can be called before or after startAnimation()

Example: Step-Through Animation

const particle = initParticleJS('#canvas', {
colors: ['#695aa6'],
autoAnimate: false
});

let frame = 0;

// Render frame-by-frame
document.getElementById('nextFrame').addEventListener('click', () => {
particle.forceRequestAnimationFrame();
console.log(`Rendered frame ${++frame}`);
});

---

getCurrentBreakpoint()

Returns the current responsive breakpoint based on viewport width. Can be overridden for custom breakpoint logic.

Signature

particle.getCurrentBreakpoint()

Parameters

None

Returns

String - Current breakpoint key

Possible values: 'xxxs', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'

Usage

const particle = initParticleJS('#canvas', {
colors: ['#695aa6']
});

// Check current breakpoint
const breakpoint = particle.getCurrentBreakpoint();
console.log(breakpoint);  // e.g., 'lg' on desktop

// Use in conditional logic
if (breakpoint === 'xs' || breakpoint === 'xxs') {
console.log('Mobile device detected');
}

Default Breakpoints

Breakpoint	Width Range
xxxs	0px - 320px
xxs	320px - 375px
xs	375px - 768px
sm	768px - 1024px
md	1024px - 1440px
lg	1440px - 2560px
xl	2560px - 3440px
xxl	3440px - 3840px
xxxl	3840px+

Example: Responsive Logic

const particle = initParticleJS('#canvas', {
colors: ['#695aa6']
});

// Adjust behavior based on breakpoint
const bp = particle.getCurrentBreakpoint();

if (bp === 'xs' || bp === 'xxs' || bp === 'xxxs') {
console.log('Optimizing for mobile');
// Could adjust particle count, etc.
}

Overriding for Custom Breakpoints

You can override this method to implement custom breakpoint logic:

const particle = initParticleJS('#canvas', {
colors: ['#695aa6']
});

// Override with custom logic
particle.getCurrentBreakpoint = function() {
const width = window.innerWidth;

if (width < 600) return 'mobile';
if (width < 1200) return 'tablet';
return 'desktop';
};

console.log(particle.getCurrentBreakpoint());  // 'mobile', 'tablet', or 'desktop'

Note: When overriding, ensure your custom breakpoints match those used in particleRadius and explosionRadius configurations.

---

Method Chaining

Methods can be called sequentially, but they don’t return the instance (no chaining):

const particle = initParticleJS('#canvas', {
colors: ['#695aa6'],
autoAnimate: false
});

// Call methods
particle.startAnimation();
particle.forceRequestAnimationFrame();  // Not chained

const bp = particle.getCurrentBreakpoint();
console.log(bp);

---

Next Steps

• Properties - Access animation state
• Configuration - Configure behavior
• Examples - See methods in action
• Advanced Examples - Manual animation control