Chapter 315: .effects

Core Idea

Adds parallax elements that should be managed by the ScrollSmoother

Key Concepts

• targets: String | Element | Array

• config: Object | null

Code Examples

let smoother = ScrollSmoother.create(...);

// use the data-speed and data-lag attributes found on each .box element
smoother.effects(".box");

// or specify values:
smoother.effects(".circle", {speed: 0.9, lag: 0.3});

• What it demonstrates: typical usage of .effects in a GSAP animation.

Key Takeaways

1. targets: String | Element | Array

2. config: Object | null

Connects To

• ScrollSmoother.create(): see ch325 — ScrollSmoother.create
• ScrollTrigger: related GSAP concept
• ScrollTrigger.refresh(): see ch368 — ScrollTrigger.refresh