ScrollSmoother - Changing size of Framer site frame

[Adam Kozel]

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

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

I did notice that you're using useGSAP() correctly in one spot, but then you use useEffect() in the second one instead which is incorrect. You're not doing proper cleanup there. I'd recommend switching to useGSAP() or do the proper cleanup yourself.

 

For the minimal demo, 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo. 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Rodrigo]

Hi,

 

You're not using the useGSAP hook correctly.

 

// Wrong
useGSAP(() => {}, [
  // dependencies
]);

// Right
useGSAP(() => {}, {
  dependencies: [],
});

Also, why you have so many dependencies in your array? If possible try to avoid that, since it can definitely lead to unexpected behaviour. If I was you I would use those dependencies in a regular useEffect hook and using contextSafe I would add instances to the useGSAP hook based on a specific condition:

const { contextSafe } = useGSAP(() => {});

const myMethod = contextSafe(() => {});

useEffect(() => {
  if (bar === "hello") {
    myMethod();
  }
}, [foo, bar, baz]); 

But always try to use the useGSAP hook for your GSAP related stuff in React.

 

Happy Tweening!

[GreenSock]

2 hours ago, Rodrigo said:

You're not using the useGSAP hook correctly.

Actually, it's totally fine to do this: 

useGSAP(() => {
}, [
  // dependencies
]);

Since useGSAP() is a drop-in replacement for useEffect()/useLayoutEffect(). We offer that additional config API for convenience, flexibility, and readability. 

 

If you're still having trouble, please make sure you provide a minimal demo and we'd be happy to take a peek. I suspect this boils down to some kind of React question, not so much a GSAP one. 🤷‍♂️