Jump to content

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

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?

  .then(res => {
  res.data.items.forEach(item => {
    if(item.sys.contentType.sys.id === "blogPost"){
      if(item.fields.featured === true) {
      } else {

  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.