[GSAP with shader values]

Welcome to the forums @macl

 

That's all possible, but you can't target a number itself. You can animate any object, for example, in some WebGl libraries you would animate the object that has the uniforms on it.

 

gsap.to(myObject.uniforms, {
  someProperty: 1,
  ease: "bounce"
});

 

But it's hard to answer what you should target without seeing some code. 

 

[Nuxt.js site laggy on mobile versus desktop]

Thanks for the demo. I just enabled normalizeScroll and it seems to have fixed it on my end for Android and iOS. Is this working for you? 

 

https://codesandbox.io/s/hopeful-wood-mhojbi?file=/pages/index.vue

 

[GSAP - Wavify]

Hi Trang, 

 

It's certainly to possible to modify that code to what you want, but it's not something we can really do for you.  Please see the forum guidelines.

 

Anyone else is more than welcome to chime in with a better solution, but you could just animate 2 waves and then flip the second one around so it faces the opposite direction.

 

[ScrollTrigger().refresh with barba.js]

Hi tractaNZ,

 

I'm a little unclear about what you're asking here. This really isn't the best place to ask about barba's API, but I would assume that if you transitioned to a new page, then you would need to create your ScrollTriggers again. It's whole a new set elements, so even if your previous ScrollTrigger instances were stored in memory, refreshing isn't going to do anything as those elements don't exist anymore.

 

And you don't need to include a function inside the same file to call it. Assuming you didn't nest scrollFunction inside another function, it should be global. If not, you can always make it global.

 

window.foo = () => {
  console.log("hello");
};


// in another file
foo(); // hello

// or
window.foo();

 

 

[ScrollSmoother + Gatsby — First click instantly scrolls to top of page]

Welcome to the forums @RJWadley

 

I haven't seen that before, and Gatsby is acting up for me on CodeSandbox. React frameworks that do SSR on CodeSandbox are just buggy sometimes. Can you try to make a simplified version of that using only React so we can at least narrow it down to React or Gatsby? And maybe also test out using version 17 of React. Thanks!

[Gif Control]

Can you make a minimal demo showing what you are trying to do? If something is happening too early, then you can use delay on the animation or the position parameter if you're using a timeline.

 

 

[ScrollTrigger scroll to hash and pin]

Hi Julien, 

 

Have you checked out the Helper Functions page? There are some functions in there for getting the scroll position.

 

https://greensock.com/docs/v3/HelperFunctions#getScrollPosition

 

[Can't resolve 'gsap/ScrollSmoother' in project React with Typescript]

Welcome to the forums @Lộc Phạm

 

ScrollSmoother is not included in the regular GSAP package as that's a perk of being a Club GreenSock member.

 

https://greensock.com/club/

 

[ScrollTrigger & ScrollSmoother Scroll Snapping Issue]

Yes, it makes sense. We get questions like this all the time, and they almost always end up with a very convoluted solution. To me it doesn't make sense to use ScrollTrigger or ScrollSmoother if you can't freely scroll around the page. Stuff tends to end up glitching, just like that site you linked to.

 

https://gyazo.com/b2735d1e2be31a22482345465f27a742

 

I would recommend checking out the Observer docs and that demo. ScrollSmoother is just translating the smooth-content section up and down. You can do the same with the Observer by animating some container and even trigger custom animations when it animates into position.

 

[Gif Control]

Welcome the forums @Jae_H

 

Gifs aren't videos, and the only way to control the playback of them is convert every frame to a still image and create a video player using canvas. So basically the best solution is to just use a video, sprite sheet animation, or some other playback medium like lottie.

[Animate path on scroll - Path seems to be animating too quickly and is almost always out of view.]

Yeah, I don't know how you would do that. I'm sure it's possible with a bunch of math, but that's way beyond the scope of this forum. 

 

Maybe someone else will chime in with a better idea on how to pull something like that off without moving the paths.

[Nuxt.js site laggy on mobile versus desktop]

8 hours ago, nicolaseielll said:

Is there anything strange with my code if you check the /* layer effect */ section from the mounted() ?

 

That's a lot of code to go through. Can you reduce that down to a minimal demo? You don't even need to include Vue/Nuxt. Just something basic that recreates the issue.

[Getting in a muddle with typescript and gsap]

Are you required to use TypeScript? Sometimes is more trouble than it's worth.

[Getting in a muddle with typescript and gsap]

Yeah, that's creating to 2 timelines. You creating one here.

baseTl: gsap.timeline()

And then overwriting the original one here. 

console.log("baseTl", this.baseTl); // logs out the original timeline
this.baseTl = gsap.timeline({ paused: true });

 

That's why I explicitly asked about a Tween because I knew you would do that with a Timeline 😉

 

[Getting in a muddle with typescript and gsap]

I guess something like this, but still a little sketchy as we are defining an object and then changing it in mounted.

 

export default defineComponent({
  data() {
    return {
      myTween: {} as gsap.core.Tween
    };
  },
  mounted() {
    this.myTween = gsap.to(".foo", { x: 300 });
  },
  methods: {
    pauseTween() {
      this.myTween?.pause();
    }
  }
});

 

 

[Getting in a muddle with typescript and gsap]

3 minutes ago, Antdev said:

 myDraggable: Array<Draggable>(),

 

Hopefully there is no issue doing it this way?

 

I mean, it's fine as long you remember that you're always going to be dealing with an array. 

 

But I would still focus on my solution, because you may need to something similar to that in future. Like say you want to pause a Tween, how you would define that in the data?

 

export default defineComponent({
  data() {
    return {
      myTween: ???????????
    };
  },
  mounted() {
    this.myTween = gsap.to(".foo", { x: 300 });
  },
  methods: {
    pauseTween() {
      this.myTween.pause();
    }
  }
});

 

If you define that data type, it should be no issue.

export default defineComponent({
  data(): { myTween?: gsap.core.Tween } {
    return {
      myTween: undefined
    };
  },
  mounted() {
    this.myTween = gsap.to(".foo", { x: 300 });
  },
  methods: {
    pauseTween() {
      this.myTween?.pause();
    }
  }
});

 

[ScrollTrigger & ScrollSmoother Scroll Snapping Issue]

Welcome to the forums @wrighttw

 

Your demo seems to be snapping for me, but maybe I'm missing something. 🤷‍♂️

 

If you're trying to CSS snapping to work with ScrollSmoother, I wouldn't expect that work as it's not using the document's normal scroll. Everything gets translated up. And if you're just doing sections like, I'm not sure I understand the need for ScrollSmoother, let alone ScrollTrigger if there's scrolling. If you're just want to react to mouse-like events, you can use the new Observer plugin.

 

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

 

[Animate path on scroll - Path seems to be animating too quickly and is almost always out of view.]

Hi Shaun,

 

That's a tricky a situation if you think about. You are trying to match up the progress of a curve, your SVG, to something linear, the scroll position. It's nearly impossible to work unless you manipulate the SVG container so it stays centered, kind of like what @mikel did here. DrawSVG should matchup with the motion path so it should stay in sync.

 

See the Pen JjMrLeZ by mikeK (@mikeK) on CodePen

 

 

[Getting in a muddle with typescript and gsap]

I think you might need to use the data thing if you want full TS support without going through a bunch of hoops. This is the exact issue, but there is no good solution as the type will always be any and you have to use $options.

https://github.com/vuejs/docs/issues/694

 

Unless you add some custom types...

https://github.com/vuejs/docs/issues/721

 

But, I can't believe I didn't see what the initial problem was. This is not setting the type. It's setting myDraggable to the actual class.

myDraggable: Draggable

 

To get it to work, we actually need to define the type for the data object that is return by the function call. No errors here.

export default defineComponent({
  name: 'App',
  data(): { myDraggable?: Draggable } {
    return {
      myDraggable: undefined,
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {

      let proxy = document.createElement("div");

      this.myDraggable = new Draggable(proxy, {
        trigger: ".wrapper",
        type: "x"
      });
    },
    disableDraggable() {
      this.myDraggable?.disable();
    }
  }
});

 

If anyone knows a cleaner way to do this in Vue 3 without having to use data, please do share 🙏

 

[Getting in a muddle with typescript and gsap]

Thanks, I'll check it out.

[Getting in a muddle with typescript and gsap]

You shouldn't need to set the type if you exclude from the data as TypeScript should infer its type when you create the Draggable.

 

https://codesandbox.io/s/interesting-euler-rhldbv?file=/src/App.vue

 

The typeof thing I was suggesting was just for the type, but  again, you really don't need to include myDraggable or the proxy in the data. 

 

return {
      myDraggable: typeof Draggable,
      proxy: document.createElement("div"),
    };

 

If you're still getting errors, there must something unique to your setup because I cannot reproduce on my end. Do you think you can send me a simplified version of your project that shows the error? A zip or simple repo is fine. 

 

[Timeline added to master, not in sequence]

20 minutes ago, Vivodionisio said:

Setting immediate render to false has worked a treat. But I’m confused... in the docs (https://greensock.com/docs/v3/GSAP/Tween) it says the default for to() tweens is already false

 

It is, but you have a bunch of weird stuff going on in your pen. Like using a 0 duration tween .to() when it would be better to use  .set().

https://greensock.com/docs/v3/GSAP/Timeline/set()

 

And the first 0 duration tween in a timeline, i.e. the first .set() is going to render immediately.

 

[Sveltekit with gsap and scrollTrigger]

5 minutes ago, AdamsCode said:

Any further updates on this? I'm expierencing the same issue, the only way I can import it now is by using the below method. 

 

We're still looking into this, but have you tried the method I used in the zipped project here?

 

 

If that doesn't work, I would probably just do regular <script> tags as you'll never have issues with a bundler and ScrollTrigger will be global in all your files.

 

[scroll-behavior: smooth; and ScrollToPlugin]

Gotcha. We can add in a check for that condition in the next release so others won't run into the same issue.

[ScrollSmoother parallax not working]

I'm not seeing any issues in my pen. 🤷‍♂️

https://gyazo.com/bfc6971238cce697bd401cc69db030fd