Jump to content
Search Community

problem applying scrollTrigger toArray in VueJs

dehlix test
Moderator Tag

Recommended Posts

Hello! 
With VueJs I'm not managing to apply ScrollTrigger animation to the array of posts I’m rendering in the page. However the same GSAP animation is working perfectly if applied to a list of div.
Therefore I would assume that I’m not managing to properly get the reference to the v-for.
Please any hint? Thank you!
 
 
   <ul>
      <li v-for="post in posts" :class="box" :key="post._id">{{ post.title }}</li>
    </ul>

 

 
 
...
  mounted: function() {
    this.startAnimation();
  },
methods: {
   startAnimation: function() {
      ScrollTrigger.defaults({
        toggleActions: "restart pause resume none",
        markers: true
      });
      gsap.utils.toArray(".box").forEach((el, i) => {
        gsap.to(el, {
          scrollTrigger: {
            trigger: el,
            scrub: i * 0.2
          },
          x: "400px"
        });
        console.log(i, "hello there");
      });
  }
  }
...

 

Link to comment
Share on other sites

This sounds more like a Vue question, and I'm not familiar with it enough to offer advice here. We really try to keep these forums focused on GSAP-specific questions. Did you make sure you loaded ScrollTrigger and registered it like gsap.registerPlugin(ScrollTrigger)?

Link to comment
Share on other sites

Hard to say what your issue is without seeing a demo, but you should not be using selectors. Use refs as they are local to the instance. Using a selector searches the entire DOM. 

 

<ul>
  <li ref="post" v-for="post in posts" :class="box" :key="post._id">{{ post.title }}</li>
</ul>
mounted() {
  this.startAnimation();
},
methods: {
   startAnimation() {
      ScrollTrigger.defaults({
        toggleActions: "restart pause resume none",
        markers: true
      });
      this.$refs.post.forEach((el, i) => {
        gsap.to(el, {
          scrollTrigger: {
            trigger: el,
            scrub: i * 0.2
          },
          x: "400px"
        });
        console.log(i, "hello there");
      });
  }
}

 

 

 

 

  • Like 1
Link to comment
Share on other sites


ScrollTrigger is registered and loading properly, animations on other elements is working fine! Yes ultimately it's a Vue inherent question. I'll try to follow your suggestion to use refs. thank you!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...