Feature Request: Scroll based animations

[chrispreisler]

Hey guys,

I love your motion library, but sometimes I need to create scroll based animations. Do you plan to integrate something like Scrolltrigger from gsap? Or maybe as a first step a composable for useViewportScroll like in FramerMotion? https://www.framer.com/api/motion/motionvalue/#useviewportscroll

Thank you very much for your feedback and your effort.

Best regards
Chris

[Tahul]

Hey @chrispreisler;

Could you take a look at https://github.com/vueuse/gesture and tell me if it fits your needs ? 😄

👋

[chrispreisler]

Hey @Tahul,

oh wow, didn't saw that there is scroll events integrated into gesture. Thanks I will dig deeper into that plugin :)

My only question is, if I only need the useScroll composable will it also integrate all other parts of the plugin like drag and so on in the production build?

And what is the mapper function doing? Can't find the explanation in the Motion Integration section.

Best regards
Chris

[Tahul]

Mapper is actually an interpolation function taken from Popmotion 😄

More details here:
https://github.com/vueuse/gesture/blob/main/docs/.vitepress/components/demos/ScrollExample.vue#L11
https://github.com/vueuse/gesture/blob/main/docs/.vitepress/components/demos/ScrollExample.vue#L21
https://github.com/vueuse/gesture/blob/main/docs/.vitepress/components/demos/ScrollExample.vue#L31

I think that if you only uses useScroll, only useScroll will be included in your bundle (with its direct dependencies, such as useRecognizers and the Recognizers API).

If it isn't the case, please let me know as this is clearly an issue and needs a fix.

Let me know if you need help about anything!

👋

[chrispreisler]

Oh wow, thanks for the link to the complete example code on github. That is soo cool.

I am so excited to try this in a project. :)