juliangarnier / anime

JavaScript animation engine
https://animejs.com
MIT License
49.7k stars 3.67k forks source link

seek on vue does not reverse? #835

Open mdkbdg opened 1 year ago

mdkbdg commented 1 year ago

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

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!

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