Expo eased animation not triggering on page load

[weinde]

Hello

I need some assistance with figuring out what is causing my animation not to be visible or not happening... altho if I set the timer to like 15 seconds I see in the DOM something is happening but on screen nothing is moiving...

 

Could someone spot the issue please 

Her is my codepen:

See the Pen PwqeYJq by Weindorfer (@Weindorfer) on CodePen.

[Rodrigo]

Hi,

 

In your demo there is no <main> tag so all these selectors return an empty Nodelist:

if (window.innerWidth > 540) {
  tl.set(document.querySelectorAll("main .loaded-in"), {
    y: "50vh",
  });
} else {
  tl.set(document.querySelectorAll("main .loaded-in"), {
    y: "10vh"
  });
}
tl.to(document.querySelectorAll("main .loaded-in"), {
  duration: 1.5,
  y: "0vh",
  stagger: 0.07,
  ease: "expo.out",
  clearProps: true
}, "-=0.9");

GSAP is actually telling you that in the console:

GSAP target [object NodeList] not found.

console.log(document.querySelectorAll("main .loaded-in")); // NodeList []

Please be sure your demo clearly illustrates the issue you're having in order to offer you the best possible support 🙏

[weinde]

5 hours ago, Rodrigo said:

Hi,

 

In your demo there is no <main> tag so all these selectors return an empty Nodelist:

if (window.innerWidth > 540) {
  tl.set(document.querySelectorAll("main .loaded-in"), {
    y: "50vh",
  });
} else {
  tl.set(document.querySelectorAll("main .loaded-in"), {
    y: "10vh"
  });
}
tl.to(document.querySelectorAll("main .loaded-in"), {
  duration: 1.5,
  y: "0vh",
  stagger: 0.07,
  ease: "expo.out",
  clearProps: true
}, "-=0.9");

GSAP is actually telling you that in the console:

GSAP target [object NodeList] not found.

console.log(document.querySelectorAll("main .loaded-in")); // NodeList []

Please be sure your demo clearly illustrates the issue you're having in order to offer you the best possible support 🙏

Sorry my mistake, I have fixed my HTML structure now

[weinde]

I have updated my pen example with more accure HTML and JS

My desired animation efect is that the scrolling text and that text on right slowly drive up from bottom to their current position and animate from opacity 0 to 1...

Where is my mistake in the JS code that the animation is not happening

See the Pen PwqeYJq by Weindorfer (@Weindorfer) on CodePen.

[Rodrigo]

Hi,

 

This most likely has to do with a set instance at the start of a Timeline, normally that is a tricky situation because a set instance is a zero seconds tween which starts and ends at the same time and there is some chance that the Timeline's playhead is already pass the zero seconds mark.

 

This  seems to work the way you intend:

See the Pen GgJdXEd by GreenSock (@GreenSock) on CodePen.

 

I also moved the opacity: 0 to the CSS in order to avoid a FOUC (Flash Of Unstyled Content):

https://gsap.com/resources/fouc/

 

Hopefully this helps

Happy Tweening!

[weinde]

On 6/13/2025 at 1:01 AM, Rodrigo said:

Hi,

 

This most likely has to do with a set instance at the start of a Timeline, normally that is a tricky situation because a set instance is a zero seconds tween which starts and ends at the same time and there is some chance that the Timeline's playhead is already pass the zero seconds mark.

 

This  seems to work the way you intend:

 

 

 

I also moved the opacity: 0 to the CSS in order to avoid a FOUC (Flash Of Unstyled Content):

https://gsap.com/resources/fouc/

 

Hopefully this helps

Happy Tweening!

Is there any way to add the scrolling fonctionality... like when I scroll the page up the texts move up? Do I need another timeline for that or can I add that to this existing one?

[Rodrigo]

I'd use the same Timeline, unless the animation you're referring is not the same in the demo I posted. If you're talking about a different animation, perhaps a different timeline could be needed.

 

Finally for the marquee text you can use our Horizontal Loop helper function:

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop

 

Hopefully this helps

Happy Tweening!

[weinde]

On 6/14/2025 at 6:56 PM, Rodrigo said:

I'd use the same Timeline, unless the animation you're referring is not the same in the demo I posted. If you're talking about a different animation, perhaps a different timeline could be needed.

 

Finally for the marquee text you can use our Horizontal Loop helper function:

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop

 

Hopefully this helps

Happy Tweening!

I have added more html to my pen... I hope I can explain correctly what I desire to achieve... upon the text animating into the position I want to also animate the mentioned text to scroll faster the the image... like some sortf of paralax efect... idk if this is the right word for what I am describing... 
Something simmilar like this on this webpage when user starts scrolling:
https://dennissnellenberg.com/

See the Pen azOjdPZ by Weindorfer (@Weindorfer) on CodePen.

[Rodrigo]

Hi,

 

Using the Horizontal Loop helper function is the best approach as I mentioned before. You can plug either the Observer Plugin or use ScrollTrigger to update the speed and direction of the loop instance:

See the Pen zYaxEKV by GreenSock (@GreenSock) on CodePen.

 

See the Pen GRwePYw by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening! 

[weinde]

19 hours ago, Rodrigo said:

Hi,

 

Using the Horizontal Loop helper function is the best approach as I mentioned before. You can plug either the Observer Plugin or use ScrollTrigger to update the speed and direction of the loop instance:

 

 

 

 

 

 

Hopefully this helps

Happy Tweening! 

Hmm perhaps we missunderstood eachother  I have updated my pen aggain if you still have the will to chekc it out

THe issue is that upon scroll the elements jump... i want them to scrub nicely with user scrolling up the page... I hope you understand what I mean
 

See the Pen azOjdPZ by Weindorfer (@Weindorfer) on CodePen.

[Rodrigo]

Hi,

 

There are two issues in your code.

1. You have a child Tween with a ScrollTrigger configuration inside a Timeline:

   tl.to(document.querySelectorAll("main .loaded-in"), {
     scrollTrigger: {
       markers: true,
       scrub: 1,
       trigger: ".home-header",
       start: "top top",
       end: "+=1000"
     },
     y: "-15vh",
     ease: "expo.out",
     stagger: 0.07
   });

   That is a no-no when it comes to ScrollTrigger as explained here:
   https://gsap.com/resources/st-mistakes#nesting-scrolltriggers-inside-multiple-timeline-tweens
   Better move that ScrollTrigger configuration to the Timeline.
    
2. Basically you have the same target in that Timeline instance as here:

   if (window.innerWidth > 540) {
     gsap.set(document.querySelectorAll("main .loaded-in"), {
       y: "50vh"
     });
   } else {
     gsap.set(document.querySelectorAll("main .loaded-in"), {
       y: "20vh"
     });
   }

   That creates the jump. 

What you can do is add immediateRender: false to the ScrollTrigger configuration, so the animation in the Timeline uses the Y position of the element at the moment and not the one before the set instances are created and rendered. Something like this:

const tl = gsap.timeline({
  scrollTrigger: {
    markers: true,
    scrub: 1,
    trigger: ".home-header",
    start: "top top",
    immediateRender: false,
    end: "+=1000"
  },
});

https://gsap.com/docs/v3/GSAP/Tween/vars/#immediateRender

 

Something like this:

See the Pen bNdxEgY by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!