Jump to content
Search Community

Jake H

Business

  • Posts

    6

  • Joined

  • Last visited

About Jake H

Jake H's Achievements

  • Dedicated Rare
  • First Post Rare
  • Reacting Well Rare
  • Conversation Starter Rare
  • Week One Done

Recent Badges

3

Reputation

  1. Jake H
    All clear. I'm new to GSAP, so thanks for helping me get up to speed.
  2. Jake H
    Thanks, Jack. I didn't realize that Timeline exposes its ScrollTrigger. (That would be a useful addition to the docs, if you don't mind my suggesting.) I did try something along those lines, but I used the scroll trigger directly rather than getting it from the timeline. Like this: const scrollTrigger = ScrollTrigger.create({ scrub: true, ... }); gsap .timeline({ scrollTrigger }) .to( ... ) .add(() => showNavBar(scrollTrigger.direction > 0)) .to( ... ); That didn't work: the timeline stayed stuck at progress = 0 with the above approach. Is there an expected difference between using ScrollTrigger.create() vs. passing the ScrollTrigger config to gsap.timeline()? Thanks again.
  3. Jake H
    I solved this by adding onUpdate to the scroll trigger config: gsap .timeline({ scrollTrigger: { /* ... */ onUpdate: (self) => showNavBar(self.progress > 0.5), }, }) .to(".foo", { /* ... */ }) .to(".bar", { /* ... */ }); Not terrible, but it would be nice to be able to insert the nav bar callback in the timeline. If there's a more elegant solution, I'd like to hear it. Thanks.
  4. Jake H started following ScrollTrigger not working when scrolling element is not body and With timeline.call(), is there any way to pass the direction to the callback?
  5. Jake H
    I have a function `showNavBar(show: boolean)`, and I'd like to toggle it at a certain scroll point: passing true going forward, passing false back. I'd expect to be able to do something like this: gsap .timeline({ scrollTrigger: { /* ... */ } }), .to(".foo", { /* ... */ }) .call(showNavBar, ???); // Insert solution here ... .to(".bar", { /* ... */ }); I'm sure I could get this working by using the scroll trigger's onUpdate callback and watching self.progress, but that feels like a hack for a pretty common use case. Is there any one-liner solution? Apologies if I missed it in the docs.
  6. Jake H
    Wow, how did I miss that?? The scroller property is indeed exactly what I needed. Thank you. And yep, you're right that people with taller monitors than my laptop would have the animation happen immediately. I tweaked the demo to fix that.
  7. Jake H
    Jake H changed their profile photo
  8. Jake H
    I'm trying to get ScrollTrigger to work in my Vue 3 SPA. The page layout is: <body> <div id="#app"> <div class=".scrollable"> <div class=".content"></div> </div> </div> </body> The catch is that #app and .scrollable both have height: 100vh, and .scrollable has overflow: auto. Unfortunately, it looks like ScrollTrigger is only listening for scroll events on body. Here's a minimal example that demonstrates the problem: https://codesandbox.io/p/devbox/vue-scrolltrigger-test-k8qmt8?file=%2Fsrc%2Fcomponents%2FTallComponent.vue%3A17%2C7 [EDIT: above demo is now working, thanks to the answer below.] Is this a known limitation, or am I missing something? I'm new to GSAP, so probably — hopefully — the latter! Thanks.
×
×
  • Create New...