[Export `gsap/types` for usage in helper functions]

Never mind, I realized that those types are accessible with import gsap from 'gsap/gsap-core'

Then gsap.core.Tween | gsap.core.Timeline 

 

It would be nice to document this usage and add references to each types in the docs.

[Export `gsap/types` for usage in helper functions]

Yes but it's not exported in the main package index "module": "index.js"

 

The index.d.ts provides types to the package, but does not make to types public (available for import).

At least thats my understanding.

[Export `gsap/types` for usage in helper functions]

Hey, yes I see the type definitions in the node_module, although I haven't been able to import them.

I tried import { GSAPTween } from "gsap/types" and that doesn't work. (I don't know if it's possible with some environment config, maybe someone can shed some light on this).

I can probable copy the definitions and host them in my project, but it seems counter productive.

To me the import snippet above, would be an elegant way to provide the types to the community.
I believe, we would just need an index in the package to reexport them.

[Export `gsap/types` for usage in helper functions]

Hi, I'm currently building some React hooks to make using GSAP easier in React.

 

const [tween, { ref }] = useTween(({ node }) =>
  gsap.to(node, { opacity: 0.5 })
)

// tween.play()
// tween.pause()

Now the tween value should have the type Tween | Timeline, but I don't have access to these types; so it is set to any.

 

Maybe there's already a way to do this and I'm missing something?

[GSAP 3.10.4 issue scrollsmoother (on phone drag X and normalizeScroll)]

Hi, is there any word the the release date for this next version?

[iOS Mobile problem - ScrollSmoother + pin large section glitching]

Hi, I'm experiencing this same issue.

Is there any development on this, are we hopeful we'll see a fix in the near future?

[ScrollSmoother + ScrollTrigger resize broken?]

Hi @GreenSock could I also get the code to this beta? I'm currently on 3.10.4 and facing this issue.

 

If it doesn't fix my issue I'll try to make a codesandbox (gatsby).

It's weird because I have a minimal environnement where this bug isn't present, but on an actual project it's an issue.
Could be because of the component nesting or something of the sorts.

[[enhancement]: allow to specify an effect attribute prefix]

Yeah that works!

But I do think that a "prefix" option would be very useful for a lot of people.

 

In any case, I think that this use case should be added to the docs. (either as the prefix options, or your snippet above)

[[enhancement]: allow to specify an effect attribute prefix]

Hi, I will keep this short.
This is a simple feature, but I think it would be essential to prevent conflict with each user's code.

data-speed & data-lag might already be used in the DOM for other things than scrollsmoother; which might break some integrations.

 

What I'm suggesting is a new option for effects, EX:

let smoother = ScrollSmoother.create({
  wrapper: '#wrapper',
  content: '#content',
  smooth: 2,
  effects: true,
  prefix: 'my-prefix' // -> [data-my-prefix-(speed/lag)]
})

Passing a string to a prefix option would allow for more specific attributes to be used to trigger effects (without the need to play around with string or array scopes).

 

The above would output these:

• data-my-prefix-speed
• data-my-prefix-lag

 

[GSAP private module + Netlify + yarn]

14 hours ago, GreenSock said:

Not that I'm aware of - @Prasanna, have you heard anything? This isn't something on our end - it's more of a Yarn thing from what I understand, so there's really nothing we can do. Sorry, @monolith 

 

I'm not too sure this issue comes from Yarn.

See I was already working with private NPM packages using Yarn without issues.

 

Problems started to surface only after adding GSAP.

 

@Prasanna I've been wanting to play around with Yarn Berry for a while, but it's not really a possibility in my current stack.

[GSAP private module + Netlify + yarn]

Anyone had progress on this?

I was excited to be able to add GSAP as a dependency instead of a  .tgz file

 

I switch to NPM for now, but I use Yarn on all my projects, it's not really viable for me.

[locomotive scroll direction with ScrollTrigger]

Hi, I love this ScrollTrigger Locomotive implementation.

I used it in my React project, there were a few gotchas, but it works nicely now.

 

The only thing that is lacking right now is the way these two lines are called:

 

ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
ScrollTrigger.refresh();

 

I define everything in a useEffect, then put those in the return:

 

const ScrollTriggerProxy = () => {
  const { scroll } = useLocomotiveScroll()

  useEffect(() => {
    if (scroll) {
      const element = scroll?.el

      scroll.on('scroll', ScrollTrigger.update)
      ScrollTrigger.scrollerProxy(element, {
        scrollTop(value) {
          return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.scroll.instance.scroll.y
        },
        getBoundingClientRect() {
          return {
            top: 0,
            left: 0,
            width: window.innerWidth,
            height: window.innerHeight,
          }
        },
        pinType: element.style.transform ? 'transform' : 'fixed',
      })
    }

    return () => {
      ScrollTrigger.addEventListener('refresh', () => scroll?.update())
      ScrollTrigger.refresh()
    }
  }, [scroll])

  return null
}

 

I don't see any problem, but I doubt it works as intended.

Any pointers or ideas?

Thanks