search

Byloth / vue-scroll-animator

↕ A simple but fast & powerful library to animate HTML elements while scrolling pages.
https://byloth.github.io/vue-scroll-animator/
Apache License 2.0
0 stars 0 forks source link

Support CSS transform Property #4

Closed 54mu3l closed 1 year ago

54mu3l commented 3 years ago

Hey Byloth,

I know you're working hard on #2 and I'm thankful for your great work! But I just take the freedom to open up another issue ;)

I realized that a lot of scroll related animations have to do with rotation, scale and so forth.

But currently I can't find a way to make the transform property work properly. Since the syntax for transform looks very different that "normal" css properties.. (e.g. transform: rotate(20deg);)

I already tried to work with the computeValue option, but it only accepts numbers (and not text).

For example: I want a div to rotate while scrolling from -10deg to +10deg.

Do you have any idea how I could solve this? Or do you have any ambitions to implement support for the transform property in the future?

Thx

Byloth commented 3 years ago

Hi, @54mu3l!

Yeah... I know!
Right now, this is a limit of this library...

I was already thinking about starting using (as core of this library) ScrollTrigger by GreenSock and making this library just a "wrapper" specific for Vue applications.
This will solve a lot of problems... Just like yours!

But... I don't know if it's worth it!
This will change the license of this library and you will no longer be able to use it in some commercial applications.

I'll keep you updated!

54mu3l commented 3 years ago

Hi!

Thank you again for your great effort. Just wanna let you know I found a different solution with scrollmagic (https://www.npmjs.com/package/vue-scrollmagic).

Cheers!

Byloth commented 1 year ago

Updated the library, used Vite.js 4 as bundler and added support for Vue.js 3.
It has been revised from stratch to allow developers to have as much freedom as possible while developing using this library.

Is it now possible to animate any property in any possible way. ... and even if the library doesn't support what you've in mind, it still allows you to implement it.

To try it yourself:

npm install @byloth/vue-scroll-animator@next

Documentation will soon be available at: https://byloth.github.io/vue-scroll-animator/

Sorry for all these notifications, @54mu3l... You're probably not even interested anymore... Sorry about that.

This comment is for documentation on this issue only and wasn't directed at you.