API Reference


Allows the creation of timelines, scrollTrigger and their configuration; provides React Context.

Render Props

childrenReact.ReactNodeOptional: Children to animate, provide context to-
debugOptional: Enables debugging featuresfalse
startenumOptional: Start position of the scroll-triggered animation timeline"top top"
endenumOptional: End position of the scroll-triggered animation timeline"bottom bottom"
callbacksenumOptional: Includes callbacks for various ScrollTrigger events.-
scrubboolean | numberOptional: Whether the animation should scrub (move proportionally with the scroll position)true
defaultsOptional: An object of default values for the GSAP tween-
toggleActionsSee toggleActions (opens in a new tab)Optional: Sets how the anim is handled at toggle points (onEnter, onLeave, onEnterBack, and onLeaveBack)-
triggerOptional: Triggers the scroll animation. Can be a DOM element or a selector stringfalse
disabledbooleanOptional: To disable the Scrollytelling componentfalse

debug Props

labelstringOptional: Label to be displayed in the debug overlay
visualizerboolean | undefinedOptional: Enable/disable visualizer
markersboolean | undefinedOptional: Enable/disable timeline markers


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"]}>
            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" />