Integrating Gloo’s GSAP Scrolltrigger module with Canvas Studio lets you drive scene changes with the power of GSAP. Instead of keyframing every value, you save two Scene States, tell GSAP which element on the page should trigger the transition, and let the library interpolate the rest. The result is a smooth, scroll-based animation that morphs cameras, lights, materials, and object transforms in one seamless tween. Check the GSAP Scrolltrigger Overview for a detailed overview of the controls.
Title – a label for the tween entry so you can keep multiple triggers organized in the backend panel
GSAP Event Type – set to Canvas when you want ScrollTrigger to interpolate between Canvas Studio states rather than animate standard DOM properties
Project ID – the unique Canvas project ID that you can set in the Canvas Widget Configure Tab
From State ID – the saved state you want to start from (e.g.state1)
To State ID – the target state GSAP should animate toward (e.g. state2)
Trigger Element – HTTML ID or selector that tells ScrollTrigger when to initiate the tween as it enters the viewport (for example #content or .section-hero)
Event Scrolling – toggle that decides whether the tween scrubs with scroll or plays once when triggered
Show Markers – displays ScrollTrigger start/end markers in the browser for alignment and debugging
Canvas Settings – define where the animation starts and ends relative to the position of the Trigger element within the viewport, along with letting us set the Scrub value. The unit of the value is in seconds, and an higher value represents more delicate scrubbing. Check the GSAP Standard Event page for more details.
Animation Settings – duration, delay, and ease for the state interpolation itself
Pin Settings – pins the trigger element during the scroll so the Canvas stays fixed while the rest of the page moves, as an alternative to using the Pin Event.
Responsive – choose alternate From/To states for tablet or mobile breakpoints so animation framing always looks correct
By combining Canvas Studio’s instant State saves with Gloo’s time-tested GSAP ScrollTrigger integration, you can stage product reveals, step-by-step walkthroughs, or data narratives that respond directly to user scroll. No manual syncing of individual properties. Just pick two states, set a trigger, and publish a professional, fluid transition that works on every device.