npm install --save vue-animejs
yarn install
yarn build
yarn dev
The project runs well and start to do modification as below :
theme/Home.vue
import anime from 'animejs';
...
export default {
...
methods: {
...
handleScroll() {
const scroll_anim = anime({
targets: this.$refs.square, // just a "<div class="block" ref="square"></div>" with css to make a red rectangle shape
translateX: 800,
duration: 4000,
autoplay: false,
});
var speed = 10000;
var offset = 300; // 300 px above the anchor_el
var anchor_el = document.querySelector("#sect_featureproduct");
var scrollPercent = window.pageYOffset - anchor_el.offsetTop;
scroll_anim.seek(((scrollPercent+offset)/speed)*scroll_anim.duration);
}
...
},
beforeMount() {
if (process.client) {
window.addEventListener('scroll', this.handleScroll)
}
},
beforeDestroy() {
if (process.client) {
window.removeEventListener('scroll', this.handleScroll)
}
},
...
}
Finally,
manage to make it work on scroll down (the rectangle shift from left to right, 800px)
BUT
it does not 'reverse' from right to left when scrolling up!
I console.log the value of scrollPercent, the number increase and decrease accordingly.
Anyone has any clue at all? Thanks!
I am trying to implement animejs on this project https://github.com/vuestorefront-community/prestashop
... and follow a simple example; move a square from left to right on scroll using
seek
. Something like this: https://www.youtube.com/watch?v=f_gozrMnD7IOn the project, I did
The project runs well and start to do modification as below :
theme/Home.vue
Finally, manage to make it work on scroll down (the rectangle shift from left to right, 800px) BUT it does not 'reverse' from right to left when scrolling up!
I console.log the value of
scrollPercent
, the number increase and decrease accordingly. Anyone has any clue at all? Thanks!Just a note that I found someone with similar issue but not on vue. On react : https://stackoverflow.com/questions/61690537/anime-js-seek-function-not-reversing-in-react
macOS Version 10.15.4 Chrome Version 108.0.5359.124