BAUMEN · MOTION LAB
One effect per screen
Teal #48BCC7 · Blue #43A1FF · Lime #AECB40 · Ink #262626. Scroll slowly. Each card uses Scroll Effects (the method already working on this site).
SCROLL EFFECT · FADE
Fade
Opacity 0 at the bottom of the viewport, 100 when this card is centered.
Advanced → Scroll Effects → Fade
SCROLL EFFECT · SLIDE UP
Slide up
Rises into place while fading in.
Vertical Motion start +6 → 0
SCROLL EFFECT · SLIDE LEFT
Slide left
Enters from the left as you reach this screen.
Horizontal Motion −8 → 0
SCROLL EFFECT · SLIDE RIGHT
Slide right
Enters from the right.
Horizontal Motion +8 → 0
SCROLL EFFECT · ZOOM
Zoom
Scales from 70% to 100% while fading.
Scroll Effects → Scaling
SCROLL EFFECT · FLIP + SCALE
Flip + scale
Rotation plus scale to mimic a flip.
Rotating 40° → 0 with scale
SCROLL EFFECT · ROLL
Roll
Slight rotation while rising.
Rotating −25° plus vertical motion
LOTTIE · VIEW
Plays when this screen arrives
Native Lottie module. Trigger Animation = View. Loop on.
LOTTIE · SECOND FILE
Later in the scroll
A different file so you can show two Lottie scenes separately.
CLICK · NATIVE TOGGLE
Click to reveal
This is Divi’s Toggle module — click the title bar. Interactions JSON was not binding on this site, so this uses a module that is click-to-open by default.
Click this bar to open the panel
This panel is closed until you click. Use Toggle or Accordion whenever you need a guaranteed click reveal in Divi 5.14.
Another click target
Second toggle. Only one story on screen, two clickable reveals.
CLICK · ACCORDION
Accordion is also click
Another native click pattern. First item starts open.
Fade vs Scroll Effects
On this site, Scroll Effects were the reliable viewport trigger. Design-tab Animation fields did not play after JSON import.
Lottie trigger
Set Trigger Animation to View so the file starts when the module is on screen, not on page load.
Click without Interactions
Toggle and Accordion are the dependable click reveals when the Interactions schema does not attach.
HOVER · STYLE STATE
Hover this card
Background shifts to Baumen teal on hover. This uses Divi’s hover state, not the Interactions panel.
FINALE · COMPOSITION
Engineering Partnerships
Scale, rotate and blur are tied to scroll. Lottie waits for view. Counters count when this block arrives.