There are two ways to do scroll-based animation in CNVS Studio. The native way, which integrates GSAP directly from the Frontend CNVS UI, and using Gloo’s GSAP Scrolltrigger module with Canvas Studio. In both scenarios, Instead of keyframing every value, you save two Scene States, tell GSAP which element on the page should trigger the transition, and let the plugin interpolate the rest. The result is a smooth, scroll-based animation that morphs cameras, lights, materials, and object transforms in one seamless tween. For the Gloo-based integration, check the GSAP Scrolltrigger Overview and the GSAP Standard Event for a detailed overview of the controls. When doing it this way, remember to select the Canvas tween as event type. The following controls are for the CNVS-native way to do scroll animations, found in the left Outliner panel, just to the right of the Save/Load State and Keyboard Shortcuts icons, in the top bar.
Global settings – trigger element – HTML ID or selector that tells ScrollTrigger when to initiate the tween as it enters the viewport (for example #content or .section-hero) . Can be set to Body to represent the entire page.
Global settings – custom scroll height (vh) – allows to set a different vh than the Trigger Element’s, which would be otherwise inherited. View Height essentially represents the lenght of the animation.
Global settings – Advanced Settings – smooth scroll – makes scrolling across the entire page smoother and more fluid.
Global settings – Advanced Settings – smoothness – controls the degree of scroll smoothing.
Global settings – Advanced Settings – pinning – pins the trigger element during the scroll so the Canvas stays fixed while the rest of the page moves
Global settings – Advanced Settings – show markers – shows markers for when the scenes start and stop transitioning. Useful for debugging and design.
Transition – from and to states –the ‘from’ state for your first transition should match the initial state defined in the backend settings, while the ‘to’ state should represent the state you want it to scroll into.
Transition – start and end scroll – this setting defines what portion of the viewport height (vh) is used for a single scroll transition; when you have multiple transitions, the total percentage should usually add up to 100%. (eg transition one start 0 – end 60, transition two start 60 – end 100)
Transition – Advanced Settings – responsive icons– let you decide which devices this specific transition happens on: turning off mobile means this specific transition will not be displayed on mobile; useful if you have a different starting state in mobile (check Responsive Design Tools for more details) and would then have to make a different transition specifically for mobile states.
Transition – Advanced Settings – easing – controls how an animation progresses over time: in other words, how it starts, moves, and stops – experiment to find the best fit for your use case.
Transition – Advanced Settings – custom trigger element – optional setting to set a different trigger element for this specific transition
By combining Canvas Studio’s instant State saves with Gloo’s time-tested GSAP ScrollTrigger integration, or using the CNVS feature by itself, 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.