Adam Kozel

April 16

I am building a code exporter for GSAP React in vanilla JS/HTML/CSS as an exercise and proof of concept. It seems like whenever i update the parameters the GSAP animation multiplies resulting in huge jumps in motion. I have tried .kill but no results. I am wondering if there is a better way to do the hover interaction?

Demo can be found here

Js code:

// Define a function to handle the animation
function animateElement() {
  const element = document.getElementById("element");
  const container = document.getElementById("container");
  const width = document.getElementById("widthInput").value;
  const height = document.getElementById("heightInput").value;
  const unit = document.getElementById("unitSelect").value;
  const fromwidth = document.getElementById("fromwidthInput").value;
  const fromheight = document.getElementById("fromheightInput").value;
  const ease = document.getElementById("easeSelect").value;
  const duration = document.getElementById("durationInput").value;
  const scrolltriggercheck = document.getElementById("scrolltriggercheckbox").checked;
  const radiobasic = document.getElementById("radiobasic").checked;

  // Set initial values
  gsap.set("#element", {
      width: fromwidth + unit,
      height: fromheight + unit,
  });

  // Define the animation based on mouse enter and leave events
  container.addEventListener("mouseenter", () => {
      gsap.to("#element", {
          width: width + unit,
          height: height + unit,
          ease: ease,
      });
  });

  container.addEventListener("mouseleave", () => {
      gsap.to("#element", {
          width: fromwidth + unit,
          height: fromheight + unit,
      });
  });

  // Generate the exported code dynamically
  const exportedCode = `${
      radiobasic
          ? `export function animation(): Override {
        useGSAP(() => {
            gsap.fromTo(
                "#element",
                {
                  width: '${fromwidth}${unit}',
                  height: '${fromheight}${unit}',
              },
              {
                 delay: 0.1,
                 duration: ${duration},
                 width: '${width}${unit}',
                 height: '${height}${unit}',
                 ease: '${ease}',
                 ${
                     scrolltriggercheck
                         ? `scrollTrigger: {
                        trigger: "#element",
                        start: "top bottom",
                        end: "bottom top",
                        stagger: 0.5,
                        markers: false,
                    },`
                         : ``
                 }
                }
            )
        }, [])
        return {}
    };`
          : `Hover`
  }`;
  document.getElementById("exportedCode").value = exportedCode;
}

// Attach event listeners to input fields to trigger the animation dynamically
const inputFields = document.querySelectorAll("#widthInput, #heightInput, #unitSelect, #fromwidthInput, #fromheightInput, #easeSelect, #durationInput, #scrolltriggercheckbox, input[name='animationtype']");
inputFields.forEach(input => {
  input.addEventListener("input", animateElement);
});

// Initial call to set up the animation based on initial values
animateElement();

See the Pen zYXJwMM by Adam-Kozel (@Adam-Kozel) on CodePen

January 15

This is code component that dynamically loads import url for custom hosted script for ScrollSmoother.

Unfortunatelly whenever i use it it completely changes my main wrapper (body) to 1 px in framer or offsets whole content. This changes with different css configurations of return <div><div>

Could anyone give me pointers as how to get rid of this issue please?

import React, { useState, useEffect } from "react"
import { Frame, addPropertyControls, ControlType } from "framer"
import { useGSAP } from "@gsap/react"
import { ScrollTrigger } from "gsap/ScrollTrigger"
import { gsap } from "gsap"

export function GSAPScrollSmoother(props) {
    const [smooth, setSmooth] = useState(props.smooth)
    const [effects, setEffects] = useState(props.effects)
    const [smoothTouch, setSmoothTouch] = useState(props.smoothTouch)
    const [url, setUrl] = useState(props.url)
    const [ease, setEase] = useState(props.ease)

    useGSAP(async () => {
        const ScrollSmoother = await import(url)
        gsap.registerPlugin(ScrollTrigger, ScrollSmoother.default)
        const smoother = ScrollSmoother.default.create({
            wrapper: '[data-framer-name="smooth-wrapper"]',
            content: '[data-framer-name="page-wrapper"]',
            smooth: smooth,
            effects: effects,
            smoothTouch: smoothTouch,
            ease: ease,
        })
    }, [smooth, effects, smoothTouch, url, ease])

    useEffect(() => {
        async function loadAndApplySmoother() {
            const ScrollSmoother = await import(url)
            gsap.registerPlugin(ScrollTrigger, ScrollSmoother.default)
            const smoother = ScrollSmoother.default.create({
                wrapper: '[data-framer-name="smooth-wrapper"]',
                content: '[data-framer-name="page-wrapper"]',
                smooth: smooth,
                effects: effects,
                smoothTouch: smoothTouch,
                ease: ease,
            })
        }
        loadAndApplySmoother()
    }, [smooth, effects, smoothTouch, url, ease])

    return <div></div>
}

addPropertyControls(GSAPScrollSmoother, {
    url: {
        type: ControlType.String,
        title: "URL",
        placeholder: "https://example.com/ScrollSmoother.min.js",
        description:
            "Upload your minified ScrollSmoother javascript file to CDN to get the link.\n\nFor further instructions check [documentation](https://www.lipsum.com).",
    },
    smooth: {
        type: ControlType.Number,
        title: "Smooth",
        min: 1,
        max: 50,
    },
    smoothTouch: {
        type: ControlType.Number,
        title: "Smooth Touch",
        min: 0,
        max: 50,
        step: 0.1,
    },
    effects: {
        type: ControlType.Boolean,
        title: "Effects",
    },
    ease: {
        type: ControlType.Enum,
        title: "Ease",
        defaultValue: "expo",
        displaySegmentedControl: false,
        options: [
            "none",
            "power1",
            "power2",
            "power3",
            "power4",
            "back",
            "bounce",
            "circ",
            "elastic",
            "expo",
            "sine",
            "steps",
            "rought",
            "slow",
            "expoScale",
        ],
        optionTitles: [
            "none",
            "power1",
            "power2",
            "power3",
            "power4",
            "back",
            "bounce",
            "circ",
            "elastic",
            "expo",
            "sine",
            "steps",
            "rought",
            "slow",
            "expoScale",
        ],
    },
})

January 14

case closed, had to use ESM verion

January 14

i have updated my approach for useGSAP

import { Frame, addPropertyControls, ControlType } from "framer"
import { useGSAP } from "@gsap/react"
import { ScrollTrigger } from "gsap/ScrollTrigger"
import ScrollSmoother from "https://res.cloudinary.com/dm1wlzcab/raw/upload/v1705246683/ScrollSmoother.min_h7sufi.js"

export function GSAPScrollSmoother(props) {
    const { smooth, effects, smoothTouch } = props

    useGSAP(() => {
        gsap.registerPlugin(ScrollTrigger, ScrollSmoother)
        const smoother = ScrollSmoother.create({
            wrapper: '[data-framer-name="smooth-wrapper"]',
            content: '[data-framer-name="page-wrapper"]',
            smooth: smooth,
            effects: effects,
            smoothTouch: smoothTouch,
        })
    }, [smooth, effects, smoothTouch])

    return <Frame size="0px" background="" style={{ userSelect: "none" }} />
}

now i get error saying that my url for minified club GSAP ScrollSmoother plugin does not provide an export named default

January 14

i have also tried this approach:

import { useEffect } from "react"
import { Frame, addPropertyControls, ControlType } from "framer"
import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
import ScrollSmoother from "https://res.cloudinary.com/ScrollSmoother.js"

export function GSAPScrollSmoother(props) {
    const { smooth, effects, smoothTouch } = props

    useEffect(() => {
        gsap.registerPlugin(ScrollTrigger, ScrollSmoother)
        const smoother = ScrollSmoother.create({
            wrapper: '[data-framer-name="smooth-wrapper"]',
            content: '[data-framer-name="page-wrapper"]',
            smooth: smooth,
            effects: effects,
            smoothTouch: smoothTouch,
        })
    }, [smooth, effects, smoothTouch])

    return <Frame size="0px" background="" style={{ userSelect: "none" }} />
}

GSAPScrollSmoother.defaultProps = {
    smooth: 1.5,
    effects: true,
    smoothTouch: 0.1,
}

addPropertyControls(GSAPScrollSmoother, {
    smooth: {
        type: ControlType.Number,
        title: "Smooth",
        min: 1,
        max: 50,
    },
    smoothTouch: {
        type: ControlType.Number,
        title: "Smooth Touch",
        min: 0,
        max: 50,
        step: 0.1,
    },
    effects: {
        type: ControlType.Boolean,
        title: "Effects",
    },
})

but i get error:
TypeError: Cannot set property window of #<Window> which has only a getter

January 14

I am using framer.com for web development

I have created this code component for myself so i can import self-hosted ScrollSmoother easily in any project i have:

import { useEffect } from "react"
import { Frame, addPropertyControls, ControlType } from "framer"

export function GSAPScrollSmoother(props) {
    const { url, smooth, effects, smoothTouch } = props

    useEffect(() => {
        const script1 = document.createElement("script")
        script1.src =
            "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"
        document.head.appendChild(script1)

        const script2 = document.createElement("script")
        script2.src =
            "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js"
        document.head.appendChild(script2)

        const script3 = document.createElement("script")
        script3.src = url
        document.head.appendChild(script3)

        script3.onload = () => {
            const script4 = document.createElement("script")
            script4.text = `
        gsap.registerPlugin(ScrollSmoother)
        const smoother = ScrollSmoother.create({
          wrapper: '[data-framer-name="smooth-wrapper"]',
          content: '[data-framer-name="page-wrapper"]',
          smooth: ${smooth},
          effects: ${effects},
          smoothTouch: ${smoothTouch},
        })
      `
            document.head.appendChild(script4)
        }
    }, [url, smooth, effects, smoothTouch])

    return <Frame size="0px" background="" style={{ userSelect: "none" }} />
}

GSAPScrollSmoother.defaultProps = {
    url: "",
    smooth: 1.5,
    effects: true,
    smoothTouch: 0.1,
}

addPropertyControls(GSAPScrollSmoother, {
    url: {
        type: ControlType.String,
        title: "URL",
        placeholder: "https://example.com/ScrollSmoother.min.js",
        description:
            "Upload your minified ScrollSmoother javascript file to CDN to get the link.\n\nFor further instructions check [documentation](https://www.lipsum.com).",
    },
    smooth: {
        type: ControlType.Number,
        title: "Smooth",
        min: 1,
        max: 50,
    },
    smoothTouch: {
        type: ControlType.Number,
        title: "Smooth Touch",
        min: 0,
        max: 50,
        step: 0.1,
    },
    effects: {
        type: ControlType.Boolean,
        title: "Effects",
    },
})

Then i proceed and create gsap animations with scrolltrigger and gsap core in my code overrides in framer in react code:

import * as React from "react"
import gsap from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
import { Override } from "framer"
import SplitType from "split-type"

gsap.registerPlugin(ScrollTrigger)

export function workexperience(): Override {
    const containerRef = React.useRef(null)

    React.useEffect(() => {
        const containerElement = containerRef.current
        if (!containerElement) return

        const childrenElement = containerElement.children[0] // Assuming only one child for simplicity
        if (!childrenElement) return

        const containerHeight = containerElement.offsetHeight
        const childrenHeight = childrenElement.offsetHeight

        gsap.fromTo(
            childrenElement,
            {
                y: 0, // Starting position on Y-axis
            },
            {
                y: containerHeight - childrenHeight, // Destination position on Y-axis
                ease: "linear", // Easing function
                scrollTrigger: {
                    trigger: containerElement,
                    start: "top center-=40%", // Adjust start position as needed
                    end: `+=${containerHeight}`, // Use `+=` to dynamically add the container height
                    scrub: 1, // Adjust scrubbing intensity
                },
            }
        )
    }, [])

    return {
        ref: containerRef,
    }
}

Problem is that my scrolltrigger is not synced from <script> to react so when i scroll my scrolltriggers are scrolling normally apart from scrollsmoother. It's just not synced.

January 11

Sorry for the confusion, i am trying to create override for tool framer.com, not framer motion. It should act as an override that attaches itself to DOM element

January 10

I know you guys might tell me this is more of framer community question but i am trying to setup scrollsmoother in my framer project. I have created wrappers as needed and now i am trying to create override that sets up scrollsmoother. I am not fluid programmer more like bashing my wall against a wall until i make it work. If you could help me it'd be great.

Thank you!

import Scrollsmoother, {
ScrollSmoother,
} from "...redacted"
import gsap from "gsap"
import { useEffect, useLayoutEffect } from "react"
gsap.registerPlugin(ScrollSmoother)

export default function SmoothScroll() {
let smoother = ScrollSmoother.create({
wrapper: ".parent",
content: ".child",
smooth: 2,
effects: true,
smoothTouch: 0.1,
})

return smoother
}

Notifications

Messages

Adam Kozel

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Adam Kozel

GSAP Animation Cleanup

ScrollSmoother - Changing size of Framer site frame

GSAP ScrollTrigger script + GSAP React code in Framer

GSAP ScrollTrigger script + GSAP React code in Framer

GSAP ScrollTrigger script + GSAP React code in Framer

GSAP ScrollTrigger script + GSAP React code in Framer

Setting up ScrollSmoother in framer as override

Setting up ScrollSmoother in framer as override