search

vueuse / motion

🤹 Vue Composables putting your components in motion
https://motion.vueuse.org
MIT License
2.36k stars 80 forks source link

Feature Request: Scroll based animations #17

Closed chrispreisler closed 3 years ago

chrispreisler commented 3 years ago

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 commented 3 years ago

Hey @chrispreisler;

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

👋

chrispreisler commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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. :)