You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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_gozrMnD7I
On 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
The text was updated successfully, but these errors were encountered: