Adam Kozel

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();

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", ], }, })

case closed, had to use ESM verion

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

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

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.

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

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 }