2.2.0 • Published 1 year ago
@byloth/vue-scroll-animator v2.2.0
Vue Scroll Animator ↕
A simple but fast & powerful library to animate HTML elements while scrolling pages.
Installation
npm install @byloth/vue-scroll-animator --save
Using Vue.js
/* main.ts */
import Vue from "vue";
import VueScrollAnimator from "@byloth/vue-scroll-animator";
Vue.use(VueScrollAnimator);
// [...]
new Vue({ ... }).$mount("#app");
/* plugins.d.ts */
import Vue from "vue";
import ScrollAnimation, { AnimationOptions } from "@byloth/vue-scroll-animator/animations";
declare module "vue/types/vue"
{
interface Vue
{
$initScrollAnimation(options: AnimationOptions): ScrollAnimation;
$destroyScrollAnimation(animation: ScrollAnimation): void;
}
}
Running
Using Vue.js
/* ExampleVueComponent.ts */
import ScrollAnimation from "@byloth/vue-scroll-animator/animations";
import { ClassAnimatorBehavior } from "@byloth/vue-scroll-animator/animators/classes";
@Component({ name: "ExampleVueComponent" })
export default class ExampleVueComponent extends Vue
{
protected _animation?: ScrollAnimation;
// [...]
public mounted(): void
{
this._animation = this.$initScrollAnimation({
startingValue: 0,
endingValue: 128,
classes: [{
classesName: [ "active" ],
behavior: ClassAnimatorBehavior.FROM_END
}],
cssProperties: [
{
target: this.$refs.title as HTMLElement,
name: "font-size",
startValue: 34,
endValue: 20
},
{
name: "height",
startValue: 168,
endValue: 56,
maxWidth: 767
},
{
name: "height",
startValue: 192,
endValue: 64,
minWidth: 768
}
]
});
}
public destroyed(): void
{
this.$destroyScrollAnimation(this._animation!);
this._animation = undefined;
}
// [...]
public forceUpdate(): void
{
this._animation.update();
}
public toggleAnimation(): void
{
if (this._animation.isEnabled)
{
this._animation.disable();
}
else
{
this._animation.enable();
}
}
// [...]
}
3.0.0-rc.2
1 year ago
3.0.0-rc.1
1 year ago
3.0.0-rc.5
1 year ago
3.0.0-rc.4
1 year ago
3.0.0-rc.3
1 year ago
2.3.0-rc5
4 years ago
2.3.0-rc4
4 years ago
2.3.0-rc3
4 years ago
2.3.0-rc2
4 years ago
2.3.0-rc1
4 years ago
2.2.0
4 years ago
2.1.1
4 years ago
2.1.0
4 years ago
2.0.2
4 years ago
2.0.1
4 years ago
2.0.0
4 years ago
1.0.0
4 years ago