Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by monolith

  1. 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.
  2. 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.
  3. 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.
  4. 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?
  5. Hi, is there any word the the release date for this next version?
  6. 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?
  7. 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.
  8. 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)
  9. 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
  10. 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.
  11. 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.
  12. 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