Problems with fade animation on page scroll

I don’t know if it’s a mistake, so I ask for help to understand and correct it.
The site has two sections, it uses scrolling animation, in the second section, Bootstrap x Wordpress, the animation runs when the site is loaded on mobile devices, on desktop only when the page is scrolled. It is possible to see this process on the website, https://potestade.com.br, scrolling the page to the end the section has already executed the animation, returning the page to the beginning, without reloading, and again scrolling to the end the animation works as it should.
I couldn’t solve it, I would like the help of friends to understand what is wrong with the site.

Hey @gilmar

You are trying to only play the animation once?
Am I getting this right?

If so - did you try enabling ‘play once’ option under animation settings?

@Darko
Activated, deactivated, the result was the same. The animation loads before the page scrolls.

I believe that if the component you’ve animated is already in the viewport upon page load, this will trigger the animation as if you had scrolled to that component. With this site, if the browser window is in the medium view (between 768px and 991px) the bottom section is visible as soon as the page opens, so the animation runs. If I resize the browser window below 768px, or above 991px, the layout shifts such that the bottom section is not visible upon site load, so the animation doesn’t run.

@Darko , @printninja
I managed to solve the problem.
I added a section, set the height to 100vh and inserted everything from the first section into it.
Thank you all for your help.

1 Like

It seems like an unnecessary solution. Why would you want people to have to scroll through empty space just so you can trigger an animation?

The following is purely my opinion. Take it with a grain of salt…

I feel that most website animations are just unnecessary distractions. I can see using them IF they’re being used to specifically draw attention to something that a person might otherwise not notice. But just having things sliding, flying and fading into view that would be seen anyway when normally navigating the website strikes me as gimmicky.

Think of it like shopping. When you go to the grocery store, there’s an automatic door that opens when you enter and leave. Under the best case scenario, the door opens quickly enough that you never have to slow down, so you don’t even notice it’s there. But why is the door automated? It’s because the people who own grocery stores know that shoppers are coming there to solve a problem, and they want to do it as quickly as possible. The door is an obstacle that slows them down.

Still, doors are necessary to keep the store environment separate from the outdoor environment. By automating the door the store owner effectively removes the obstacle to the shopper, but maintains the environmental separation.

Now, imagine if the store owner put automated doors inside the store at the ends of every aisle.

Even if they were fast enough that they never slowed a shopper down, they would serve no practical purpose.

That’s how I see most website animations. They’re just extra “automatic doors” that (sometimes) delay people in getting to where they’re going.

Websites exist to solve problems… provide information, entertainment, or products/services. Even if the animation is fast enough that it doesn’t slow down a person from getting what they came for, one needs to ask themselves, “how does the animation help to solve the visitor’s problem?” If it doesn’t, it’s probably unnecessary.

1 Like

I agree 100% with you, but there are annoying customers who want the site of a pirouette, helicopter and if possible even dancing. hahahaha.

Point taken. The customer is always right - even when you know they’re not! :stuck_out_tongue:

1 Like