primer/brand

🐛 [BUG] - RiverStoryScroll incorrectly applies a negative margin when disabled

Opened this issue · 0 comments

rezrah commented

Describe the bug

RiverStoryScroll applies a negative margin of -20vh to enable the animation effect. When animations are disabled through the disabled prop however, there is no need to apply the relevant CSS.

Reproduction steps

  1. Add disabled prop to the RiverStoryScroll component, ideally with content that appears before it
  2. Observe the effect is disabled
  3. Observe the CSS of margin-top: -2vh has been applied
  4. If tested with preceding content, the RiverStoryScroll will overlap with that content

Expected behavior

The negative margin should only apply when the disabled flag is false.

Screenshots

RiverStoryScroll with disabled flag and negative margin styles applied. Causing Rivers to overlap with preceding content.

Browsers

No response

OS

No response