Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

seek on vue does not reverse? #835

Open
mdkbdg opened this issue Dec 20, 2022 · 0 comments
Open

seek on vue does not reverse? #835

mdkbdg opened this issue Dec 20, 2022 · 0 comments

Comments

@mdkbdg
Copy link

mdkbdg commented Dec 20, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant