Cassie

Tuesday at 10:47 AM

Jumping in to say that (luckily) it actually is pretty easy - it's all down to the SVG filter!

Warning that this effect is quite bad for performance, so keep it for quick small interactions like buttons, don't try and 'goo-ify' lots of things/large elements/or animate infinitely using this filter. Quick and small!

<filter id="alienGoo">
      <fegaussianblur in="SourceGraphic" stdDeviation="24" result="blur" />
      <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 28 -8" result="goo" />
      <feblend in="SourceGraphic" in2="goo" />
    </filter>
    <filter id="gooDrip">
      <fegaussianblur in="SourceGraphic" stdDeviation="10" result="blur" />
      <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 24 -7" result="goo" />
      <feblend in="SourceGraphic" in2="goo" />
    </filter>
    <clippath id="theClipPath">
      <rect x="325" y="500" width="350" rx="8" ry="8" height="180"/>
    </clippath>
    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      <fegaussianblur id="glowBlur" stdDeviation="14" result="blur"/>
      <femerge>
        <femergenode in="blur"/>
        <femergenode in="SourceGraphic"/>
      </femerge>
    </filter>

Tuesday at 10:39 AM

Heya!

From the ScrollSmoother docs

Quote

Add a parallax effect by defining a data-speed attribute on any element, like data-speed="0.5" would make that element "scroll" at half-speed while it's in the viewport. It arrives at its normal position in the document flow when it's centered vertically.

Make an element appear to lag behind, taking a certain amount of time to "catch up" to the smoothed scroll position. It's a really fun effect! Simply define a data-lag attribute, like data-lag="0.5" would take 0.5 seconds to "catch up".

https://gsap.com/docs/v3/Plugins/ScrollSmoother/#speed-parallax

https://gsap.com/docs/v3/Plugins/ScrollSmoother/#lag-the-delightful-kind

May 23

Ah ok, this sounds a lot like big chunks of third party code fighting with each other.

That's usually the difficulty with dropping in different libraries that handle interaction and listen/react to scroll/wheel events.

Pretty tricky for us to debug too I'm afraid. Sorry, it sounds frustrating.

May 22

Ah yeah, that's because I just installed yarn berry for that particular project. That would change depending on the users setup

I'm feeling *tentatively* good about this then.... I'll update the docs (and wait for the new edge cases to start flooding in 🫠)

unsafeHttpWhitelist:
  - "npm.greensock.com"

npmScopes:
  gsap:
    npmRegistryServer: "https://npm.greensock.com"
    npmAuthToken: <YOUR TOKEN>

May 22

super helpful thanks @ynamite

May 22

Thanks for the info! I updated my project settings to yarn berry for testing and managed to get a build working with the following.

YARN BERRY - v4.2.2

yarnrc.yml

yarnPath: .yarn/releases/yarn-4.2.2.cjs  
unsafeHttpWhitelist:
  - "npm.greensock.com"

npmScopes:
  gsap:
    npmRegistryServer: "https://npm.greensock.com"
    npmAuthToken: <YOUR TOKEN>

install command

yarn add @gsap/business

Yarn Classic

With previous versions of Yarn everything seems to be working with .npmrc and the more explicit install command on the install page

.npmrc (not sure why .yarnrc isn't working)

always-auth=true
//npm.greensock.com/:_authToken=<YOUR TOKEN>
@gsap:registry=https://npm.greensock.com/

install command

yarn add gsap@npm:@gsap/business

@Prasanna - do these look like decent recommendations? I'm going to add a Yarn Classic vs Yarn Berry tab on the install page if so.

May 22

Hi there,

I'm sorry, but the audio is incredibly bad on that video.

Please can you provide a clear explanation of the issue and a link to a minimal demo showing the code that is causing the problem. We can't debug live websites I'm afraid as we don't have a clear view of the code and there are too many moving parts to effectively narrow down the issue

May 22

Quote

This React GSAP change is relatively significant as it looks like it requires code refactoring in all animations to bring everything up to modern standards. Correct me if im wrong?

If you're using React 18 and above, React made some changes to how they handle rendering

https://react.dev/reference/react/StrictMode

Your components will re-render an extra time to find bugs caused by impure rendering.
Your components will re-run Effects an extra time to find bugs caused by missing Effect cleanup.

This re-rendering pattern made animation cleanup much more important for React devs so we created a hook to help. This isn't us trying to make things more complicated, this is us extending a helping hand due to decision outside of our control from another library.

Hope this helps to clarify a little

May 22

Hi folks!

I recently updated the installation guide so I'm just trying to nail down what the issue is here as the install instructions were working. I'm sorry about how frustrating this is. We also find it incredibly frustrating, we don't have control over Yarn issues. I would love to find one solution that works for everyone but there always seem to be edge cases popping up.

Quote

My complete surprise was the inclusion of the React GSAP package. When was this deployed and why is it not explicitly listed in yarn install directions?

The React package won't be included in the yarn install instructions unless you explicitly ask for it as plenty of yarn users aren't using React. You can select it on the GSAP install page if it's relevant to you though.

The useGSAP package was a recent addition to help users with animation cleanup. There's a section covering it in our docs here.
https://gsap.com/resources/React/

Quote

And why not yarn add gsap@npm:@gsap/business?

I assume Rodrigo was just demonstrating an install. He wasn't advising to use shockingly instead. You should use business as that's your tier. I can see why this was confusing though, sorry about that.

Installation

Quote

Switched to .npmrc only and that worked but not with the business package install, the shockingly one.

I ran through the install using the instructions on the install page and your install token @stectix - you're correct that it doesn't work with a .yarnrc file, however it does work with an .npmrc file and the business package.

Here's my install

The thing that confuses me is that Yarn advises to use a .yarnrc - so that should work. Tagging in @Prasanna as the resident expert, as I'd really love to figure out why? Is it safe for us to advise Yarn users to use an .npmrc? Why is the yarnrc not working now?

Quote

You need to make a solid fix for this Yarn issue asap!

Quote

3 years is very odd for this to remain an issue.

I'm afraid we don't have any control over how Yarn handles private registries or package name aliases. It is incredibly frustrating though, we're with you on that.

This is why we suggest npm or the .zip download if you're struggling, those are solutions that work seamlessly. We understand that not everyone can just switch over though. I'll do what I can to try and make this easier, I wish there was a 'one size fits all' solution, but it seems like whatever we suggest, Yarn is throwing curveballs out.

We can maybe start by suggesting that people use an .npmrc file if @Prasanna doesn't see an issue with that?

Apologies again, I'm honestly just as frustrated as you all with this endless Yarn saga.

May 19

Here you go!

This one should get you started

See the Pen oNjgEjm?editors=1100 by GreenSock (@GreenSock) on CodePen

May 17

Just to let you know @ElevateBrands - we have a Smooth Scrolling plugin that replaces locomotive (and solves a lot of pain points), https://gsap.com/docs/v3/Plugins/ScrollSmoother/

Just mentioning as if you're hitting issues and considering paying for a freelancer, it may an option to pay for ScrollSmoother to make the process smoother (excuse the pun).

May 17

Hi there, sorry to say there's not really anything you can do to mitigate it.

It's not down to GSAP persay, more that you can't have fixed elements inside a transformed container (like the ScrollSmoother container). It's a web platform thing that we can't change.

The options are either move the elements outside the scroller in the DOM, (or reparent them on interaction if they're modals?) or use a different solution like Lenis, Lenis doesn't smooth all inputs though, soif someone drags the scrollbar or tabs down the page it won't be smooth. It's also a third party solution so we can't speak for compatibility.

Sorry that you've run into this and good luck getting it fixed, happy to answer any questions you may have.

May 17

Hi there, could you explain a little more what you are expecting to see vs what you're seeing?

May 17

Ah no, sorry, that's just down to your trigger positions. I think your clamped end position was occurring before the start position, or at the same time as? Something like that.

If you change them to be relative to the start position it works correctly

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

May 16

Hey!

You can clamp your triggers to ensure that the trigger points fall between the min and max scroll positions.

See the Pen NWVGgvP?editors=0010 by GreenSock (@GreenSock) on CodePen

May 14

Wahay!

May 14

Wonderful! Thanks for your patience.

May 13

Hi there!

We've pressed some knobs and switched things off and on again and you should be all set now.

We generated a new token for you. If you go to the install page, and hard refresh you should see the new token and the correct 'business' tier instructions

I think this little blip happened because your business membership was from quite a while ago - 2014! Something must have gone a bit wonky during those years.

Thanks for all the support and sorry for the trouble.

May 13

We have some demos here!

https://stackblitz.com/@gsap-dev/collections/gsap-nuxtjs-starters

May 13

This may be down to the fact that nuxt is doing the build on the server - are you checking whether you're running registerPlugin client side?

Something like this depending on your setup

if (process.client) {
  gsap.registerPlugin(SplitText)
}

or

if (typeof window !== 'undefined') {
  gsap.registerPlugin(SplitText)
}

May 13

Hi again, Just a note to say we're looking into it as a matter of urgency.

'member' should have been 'business' on the install page. Apologies for leading you down a bad path here.

We'll pop back as soon as we know more

May 13

Hey Jordan,

little sidenote - that token won't just automatically pull from the .env file - you have to set your environment up to manage them, I think this is the right way in nuxt.
https://github.com/nuxt-community/dotenv-module

Otherwise - I'm not seeing any GSAP specific errors in that netlify log. Your issue isn't a 403 with the private repo, the issue is here -

Cannot find module @rollup/rollup-.... npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try npm i again after removing both package-lock.json and node_modules directory

Here's a thread. Sorry I can't help more here!

https://github.com/nuxt/nuxt/issues/25006

May 13

Hey there,

What does your package.json look like currently?

May 13

Pleasure, it was on my to-do list, good to get a little nudge.

Thanks!

May 13

Heya, thanks for that log.

Are you using yarn locally or npm?

This line is giving me a little red flag, I wonder if you're using npm locally and then yarn on Netlify?

warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.

There's a known issue with yarn and private registries - it's discussed in this thread. So maybe these steps from @Prasanna might help?

If you are using npm locally and yarn on Netlify I'd suggest setting up Netlify to use npm commands instead.

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Cassie