Open 54mu3l opened 3 years ago
Hello, @54mu3l!
Thanks for your feedback.
Actually...
I'm afraid it can't be used without using TypeScript, right now...
It's a known problem...
Even when compiled into JS, it still requires tslib
as a dependency for some reason...
I've been the only one interested in this library, until now ... So, I've postponed this problem to "another day"!
Well... I think "that day" has come!
First... I'll enable JS compatibility!
Then... I'll work on directives
!
I hadn't thought of using directives
... But that's a great idea!
Let's keep in touch! 😉
Hey, @54mu3l!
Do you wish to try this library?
Now, it should be compatible with JS projects.
If you want to try this, run:
npm install @byloth/vue-scroll-animator@next
It's still a pre-release... I'll keep trying and testing it.
Please, let me know if something goes wrong!
directives
will come with future releases...
Just like a better documentations...
Amazing! Yes, I'll try this for sure!
Edit: I installed it just now. I'll test it later...
npm WARN @byloth/vue-scroll-animator@2.3.0-rc3 requires a peer of tslib@^2.0.1 but none is installed. You must install peer dependencies yourself.
+ @byloth/vue-scroll-animator@2.3.0-rc3
removed 1 package, updated 1 package and audited 1630 packages in 13.912s
78 packages are looking for funding
run 'npm fund' for details
found 0 vulnerabilities
I'm not sure if I'm doing something wrong. Or if it is something on your side. But as far as I know this should work.
By adding this file
import Vue from "vue";
import VueScrollAnimator from "@byloth/vue-scroll-animator";
export default ({ app, Vue }) => {
Vue.use(VueScrollAnimator)
}
gets me this error
Module not found: Error: Can't resolve '@byloth/vue-scroll-animator' in 'xxxxxxxxxxxxxx'
This dependency was not found:
* @byloth/vue-scroll-animator in ./src/boot/vue-scroll-animator.js
To install it, you can run: npm install --save @byloth/vue-scroll-animator
but I installed it and I can find it in package.json:
"dependencies": {
"@byloth/vue-scroll-animator": "^2.3.0-rc3",
...
}
Mmmh... It looks like it's trying to load the bundled version of the module instead of its module version...
* @byloth/vue-scroll-animator in ./src/boot/vue-scroll-animator.js
This error it's pretty strange... 🤔
Why it's looking for my module in src/boot
instead of in its own directory node_modules/@byloth/vue-scroll-animator
?
Did you copied it manually in that directory?
Are you using webpack
or something else?
boot/vue-scroll-animator.js
is just the file I created with the following content
import Vue from "vue";
import VueScrollAnimator from "@byloth/vue-scroll-animator";
export default ({ app, Vue }) => {
Vue.use(VueScrollAnimator)
}
but it shouldn't matter where this file is located or how it is called
if I call import VueScrollAnimator from "@byloth/vue-scroll-animator";
in another file then I get this error * @byloth/vue-scroll-animator in ./xyz/xyz/otherfile.js
I'm using quasar
, that's why I wanted it in the boot folder. But as stated above, I get this error in the terminal no matter where I import @byloth/vue-scroll-animator
.
So to me it seems that the import won't work correctly
edit:
the same happens if I try to import one of the following lines into one of my components:
import ScrollAnimation from "@byloth/vue-scroll-animator/animations";
or
import { AnimationOptions } from "@byloth/vue-scroll-animator/animations";
or
import { ClassAnimatorBehavior } from "@byloth/vue-scroll-animator/animators/classes";
I get the message that the dependency was not found & that I should install it
If I downgrade @2.2.0
all the imports work fine. This only happens with @next
.
So I guess it's not on my end.
Hope that helps. ✌🏻🙃
I have just released the v2.3.0-rc4
version.
It should work, now...
Can you confirm it?
Thank you. Yes, this problem is solved now.
But now I get:
This dependency was not found:
* tslib in ./node_modules/@byloth/vue-scroll-animator/build/index.js, ./node_modules/@byloth/vue-scroll-animator/build/vue-scroll-animator.js and 4 others
To install it, you can run: npm install --save tslib
Oh, right... In the previous version, it was a dependency: https://github.com/Byloth/vue-scroll-animator/blob/97a819a6eb874e4a02913a00d7be0b3cf1dcf2ce/package.json#L35-L37
I tested it, in this case, as a peerDependency
!
Probably I should set it as a dependency
... 🤔
I want to understand WHY it is required... 🤔
Install it temporarily, to make it work now... I'll keep you updated!
now I try to import as mentioned in your readme (in the vue component I want the animations to be):
import ScrollAnimation from "@byloth/vue-scroll-animator/animations";
but then I get this:
This dependency was not found:
* @byloth/vue-scroll-animator/animations in ./node_modules/@quasar/app/lib/webpack/loader.transform-quasar-imports.js!./node_modules/babel-loader/lib??ref--2-0!./node_modules/@quasar/app/lib/webpack/loader.auto-import-client.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/xxxxx.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save @byloth/vue-scroll-animator/animations
Oh... Ok! Here you are: https://github.com/microsoft/tslib#tslib
Because this can avoid duplicate declarations of things like extends, assign, etc., this means delivering users smaller files on average, as well as less runtime overhead.
For optimized bundles with TypeScript, you should absolutely consider usingtslib
and--importHelpers
.
Ok, then... I just add it as depencency
in my module and published the new v2.3.0-rc5
.
About your last error...
I just got this module working...
Now, before merging the PR #3, I'll fix and enhance the documentation as you previously suggested.
You need to correct that input as follow:
import { ScrollAnimation } from "@byloth/vue-scroll-animator";
From now on, you'll need import everything from "@byloth/vue-scroll-animator"
...
This "entrypoint" exports everything you need!
import VueScrollAnimator, { ScrollAnimation, AnimationOptions, ClassAnimatorBehavior, etc... } from "@byloth/vue-scroll-animator";
Amazing!
I don't get any errors. The imports work now.
But nothing seems to animate. 🤷🏻♂️ Probably I'm missing something. 🤔
This is what I got:
initialize:
import Vue from "vue";
import VueScrollAnimator from "@byloth/vue-scroll-animator";
export default ({ app, Vue }) => {
Vue.use(VueScrollAnimator)
}
in my component where I want to animate a text:
<div ref="myText">
Hello World
</div>
import VueScrollAnimator, {
ScrollAnimation,
AnimationOptions,
ClassAnimatorBehavior,
} from "@byloth/vue-scroll-animator";
data() {
return {
animation: undefined,
};
},
mounted() {
this.animation = this.$initScrollAnimation({
startValue: 2000,
endValue: 2400,
classes: [
{
classesName: ["active"],
behavior: ClassAnimatorBehavior.FROM_START,
},
],
cssProperties: [
{
target: this.$refs.myText,
name: "font-size",
startValue: 40,
endValue: 20,
},
{
name: "opacity",
startValue: 0,
endValue: 1,
},
{
name: "height",
startValue: 192,
endValue: 64,
minWidth: 768,
},
],
});
},
destroyed() {
this.$destroyScrollAnimation(this.animation);
this.animation = undefined;
},
what am I missing?
Ok... Understood!
My bad... Sorry!
I absolutely need to update the documentation... 😅
Just for the animation, you need to add suffix ing
to start
and end
properties...
this.animation = this.$initScrollAnimation({
startingValue: 2000,
endingValue: 2400,
[...]
Keep it just like you wrote for cssProperties
... That's correct!
cssProperties: [
{
target: this.$refs.myText,
name: "font-size",
startValue: 40,
endValue: 20,
},
[...]
Anyway...
1) I need to add some kind of options check passed during initialization and throw some errors if they not match the options allowed...
2) I should review all the options available to create some sort of "standard" in this library...
It isn't that smart to use in the first startING value
and after startValue
... 🤔
Sorry for the inconvenience... Now it should work correctly!
It works! 🤩
You did a great job!
Hello
Your plugin seems very useful! Thank you for creating this. I think this has a great potential.
How can I use it without using TypeScript? Just as a normal plug? As an Vue directive for example? (https://vuejs.org/v2/guide/plugins.html#Writing-a-Plugin)
It would be really nice if that would be possible! Thank you.
Edit: I think adding little bit more description in the readme would also increase its popularity. The simple it is to use the more people will find it useful... ;)