Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ShesADev

Scroll Trigger and Timeline not working with dynamically added elements in Vue

Recommended Posts

I'm trying to add a little parallax effect to the articles I add into my project from contentful. Even after using `this.nextTick`, it seems like the articles are loading in after the timeline initializes. 

 

Can someone help me with getting the dynamic elements to load before the timeline? I don't want to move my gsap to the updated() lifecycle hook, since that seems unnecessarily heavy. 

See the Pen MWyQEpO by shielaNFA (@shielaNFA) on CodePen

Link to comment
Share on other sites

Hey ShesADev and welcome to the GreenSock forums.

 

Why not put it in the axios callback?

axios
  .get("https://cdn.contentful.com/spaces/byjig6lw75ot/environments/master/entries?access_token=ZOE2lRg1IvM98stWEwp_C_HMdW-JFqFgFg_SwYFEbpw")
  .then(res => {
  res.data.items.forEach(item => {
    if(item.sys.contentType.sys.id === "blogPost"){
      if(item.fields.featured === true) {
        this.featuredArticles.push(item.fields)
      } else {
        this.nonFeaturedArticles.push(item.fields)
      }
    }
  })

  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: "#article-preview",
      start: "top center",
      end: "bottom top",
      scrub: true,
      markers: true
    }
  });
  gsap.utils.toArray(".cat").forEach(cat => {
    const depth = cat.dataset.depth;
    const movement = -(cat.offsetHeight * depth);
    tl.to(cat, {y: movement, ease: "none"}, 0)
  });

  tl.fromTo(this.$refs.article[0], {y: 80, opacity: 0.5}, {y:-50, opacity:1, duration: 1});
  tl.fromTo(this.$refs.article[1], {y: 30, opacity: 0.5}, {y:-20, opacity:1, duration: 1}, "-=1");
  tl.fromTo(this.$refs.article[2], {y: 50, opacity: 0.5}, {y:-20, opacity:1, duration: 1}, "-=1");
})

 

  • Like 1
Link to comment
Share on other sites

@ZachSaucier Thanks for responding! I seem to get the same result as before if I put it in the axios callback. The images that I added manually are animating fine, but the articles themselves don't look like they're animating. 

Link to comment
Share on other sites

This is 100% a Vue question... You might not receive aid here as this forum is focused on GSAP. I know I'm not good with it :) 

 

this.$refs.article is undefined. It doesn't look like you're ever adding refs? 

  • Like 1
Link to comment
Share on other sites

@ZachSaucier Hmm, you're right. I'll try and get help with Vue. I declared refs in my template - even if I change it to explicitly reference the article by class name, it doesn't seem to work. Actually, on initial load, none of the animations work, it's only when i make a change to the pen and it reloads that the animation on the images start working.

 

I'll be sure to create a post on Vue forums for help on this issue. Thanks for your help! 

Link to comment
Share on other sites

Hi @ShesADev,

 

I've worked a fair bit in Vue, but (strangely) haven't done much animating in it. This may be of help though: https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle

 

Also worth looking at is Sarah Drasner's Intro to Animations in Vue Article: https://css-tricks.com/intro-to-vue-5-animations/

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

If you're having issues, start a new topic and include a minimal demo. You can use CodeSandbox for Vue. Thanks!

  • Like 1
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.
×