<Root>
Allows the creation of timelines, scrollTrigger and their configuration; provides React Context.
Render Props
| Prop | Type | Details | Default |
|---|---|---|---|
children | React.ReactNode | Optional: Children to animate, provide context to | - |
debug | Optional: Enables debugging features | false | |
start | enum | Optional: Start position of the scroll-triggered animation timeline | "top top" |
end | enum | Optional: End position of the scroll-triggered animation timeline | "bottom bottom" |
callbacks | enum | Optional: Includes callbacks for various ScrollTrigger events. | - |
scrub | boolean | number | Optional: Whether the animation should scrub (move proportionally with the scroll position) | true |
defaults | Optional: An object of default values for the GSAP tween | - | |
toggleActions | See toggleActions (opens in a new tab) | Optional: Sets how the anim is handled at toggle points (onEnter, onLeave, onEnterBack, and onLeaveBack) | - |
trigger | Optional: Triggers the scroll animation. Can be a DOM element or a selector string | false | |
disabled | boolean | Optional: To disable the Scrollytelling component | false |
debug Props
| Prop | Type | Details |
|---|---|---|
label | string | Optional: Label to be displayed in the debug overlay |
visualizer | boolean | undefined | Optional: Enable/disable visualizer |
markers | boolean | undefined | Optional: Enable/disable timeline markers |
Usage
import * as Scrollytelling from "@bsmnt/scrollytelling";
export const Footer = () => (
<Scrollytelling.Root start="top 80%" debug={{ label: "Footer" }}>
<footer className={s.footer}>
<div className={s["container"]}>
<Scrollytelling.Animation
tween={{
start: 60,
end: 100,
from: {
y: "-120%",
position: "absolute",
x: isDesktopSm ? "-8vw" : toVw(-20),
scale: 0.6,
},
}}
>
<a href={ghHref} target="_blank" rel="noreferrer">
<Image className={s.QR} src={QRImg} alt="QR" />
</a>
</Scrollytelling.Animation>
</div>
</footer>
</Scrollytelling.Root>
);