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 post
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 post
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 post
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 post
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 post
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.

×