Vue directive (no TypeScript)

[54mu3l]

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

[Byloth]

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! 😉

[Byloth]

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

[54mu3l]

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

[54mu3l]

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",
    ...
}

[Byloth]

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?

[54mu3l]

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

[54mu3l]

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. ✌🏻🙃

[Byloth]

I have just released the v2.3.0-rc4 version.

It should work, now...
Can you confirm it?

[54mu3l]

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

[Byloth]

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!

[54mu3l]

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

[Byloth]

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 using tslib 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";

[54mu3l]

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?

[Byloth]

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!

[54mu3l]

It works! 🤩

You did a great job!