Jump to content
Search Community

ScrollTrigger fade-in + slight parallax effect doesn't honour the start value?

watt test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

I'm attempting to create a fade-in parallax effect on the text as you scroll the page. So far the effect is working quite well — barring a slight hiccup that occurs every time the page is visited for the first time (and when refreshed).

 

The element (which should have an starting opacity of 0) is clearly visible if you scroll down from the hero section into the intro section. Once it passes the scroller-start point only then it goes it 0 — causing a flash and jerk of content. Oddly, now if you were to scroll back up and down the page — it works as intended.

 

At my wits end here. I thought fromTo properly handles the animation values before/after animating (it does seem to but not right off the bat) and immediateRender is automatically true if you use ScrollTrigger/fromTo. Not sure what else I am missing. How can I get it so it starts off after page load at 0 opacity and -20% y?

See the Pen RwGKKQN by adamgian (@adamgian) on CodePen

Link to comment
Share on other sites

  • Solution

Hey watt and welcome to the GreenSock forums. Thanks so much for a clear demo!

 

8 hours ago, watt said:

I thought fromTo properly handles the animation values before/after animating (it does seem to but not right off the bat) and immediateRender is automatically true if you use ScrollTrigger/fromTo.

You're right, that's true.

 

8 hours ago, watt said:

Not sure what else I am missing.

You have two fromTo() tweens affecting the same properties of the same element. So the first one sets the opacity immediately to 0. Then the second one sets the opacity immediately to 1. Hence it's visible on page load. But when the tween starts (its progress is changed to 0) then it uses the starting value of the first tween - an opacity of 0. Does that make sense?

 

To fix it simply make the second tween a relative .to() tween instead:

fadeOutTimeline.to(".gsap-intro", { 
    yPercent: 40, 
    autoAlpha: 0 
});

Note that we recommend using yPercent instead of y: some percent. Not doing so is one of the most common GSAP mistakes.

  • Like 2
  • Thanks 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.
×
×
  • Create New...