INSTRUCTIONS
Make Roavero yours.
A brief guide to editing Roavero’s GSAP interactions and accessing hidden content in Webflow Designer.
01 / Edit GSAP interactions
Roavero uses Webflow’s native Interactions with GSAP. Edit animation timelines in Designer; no separate GSAP installation is needed for these effects.
01
Open the relevant page, select the animated element in Navigator, and open Interactions. Choose its named interaction to edit triggers, targets, timing, and easing.
02
On Home, use “Home • 02 Cups scroll spread and tilt” for the cup scroll effect. Preserve targeted wrappers and classes; do not make temporarily hidden reveal elements permanently visible.
03
Review conditional playback for breakpoints and reduced motion. Preview the timeline, then test scrolling on desktop and mobile after editing.
GSAP DOCUMENTATION
Designer → Interactions
Webflow: Interactions with GSAPWebflow: animation timelinesEdit native timelines, not custom animation scripts.
ROASTERY / PROCESS
Stacked images + scroll states
Navigator → roastery-process-container → roastery-process-stage
Keep all state images and their existing wrappers.
02 / Edit the Roastery process
The process images overlap and crossfade. Select hidden images through Navigator rather than clicking only the visible image.
01
Open Roastery and expand roastery-process-stage. Select each roastery-process-state-photo, including the cooling and brew images, then replace its asset in Image settings.
02
In Interactions, edit “Roastery Process — Desktop Scroll States” and “Roastery Process — Mobile Scroll States”. Desktop pins the process; mobile uses an unpinned scroll sequence.
03
If changing the sequence, update both timelines and their targets. Keep the existing breakpoint and reduced-motion conditions, then preview every process state.