Section scroll text opacity animation disables page load text opacity animation

Hi everyone,
I’ve created a text opacity animation that’s triggered on page load - the text fades in.
I’ve also created a text opacity animation on the same text that’s triggered on section scroll - the text fades out.
My problem is that the section scroll animation is disabling the page load animation so that the text doesn’t fade in on page load.
The text that is animating is ‘Interior Design. for intelligent creatives who appreciate the understated’ on the hero section of the homepage.
Is there a way to get both animations to work, or can I only have one applied to the text?
The public share link shows both animations active but if you delete the section scroll animation linked to the fern video section then the page load animation starts working again.
I’ve tried changing the section scroll animation into a page scroll animation but the same happens.
Any ideas greatly appreciated.
Many thanks,
Webflow newbie!


Here is my public share link: LINK
(how to access public share link)

Hi,

Did you ever figure this out? I’m having the exact same issue and am stumped.

Thanks!

Hi BDK,

Yes, I worked out a solution to this:

  1. Put the text inside a simple div block
  2. Apply the page load animation to change the text opacity to the text only
  3. Apply the page scroll animation to the div only

Now the 2 animations don’t conflict. The text fades in on page load and then because it’s inside the div it fades out on page scroll.
If you can’t get it to work share a link and I’ll take a look.

2 Likes

Just got around to testing this out today, and it works perfectly. Thank you!

No problem, my pleasure