Streaming live at 10am (PST)

Adding to page length breaks 'while scrolling' / sticky animations. Any way to prevent?

Hi guys,

I created an animation in the middle of my page using ‘while page is scrolling’ and ‘position sticky’.

I’ve discovered that adding new sections anywhere on the page effectively breaks this because it increases the length of the page meaning the percentages change.

Is there any way to get around this or is the only way to be absolutely sure that you are finished with the page before adding any scroll / sticky animations.

Sorry if I’m being stupid… surely there’s a way to ‘contain’ the animation so increasing or decreasing the length of a page won’t break it it?

Thanks all!

P.S.

I’m referring to the white animated section halfway through the page.

Adding anything anywhere on the page breaks the end of this animation… I’m guessing.


Here is my site Read-Only: LINK

Hi @JTL, thanks for the great question. A good practice is to plan how many sections you will have in advance, i.e. if you have 5 full page sections, then your animate steps will occur at 20% of the total page length.

Basically you take the total number of views that span 100% height and divide 100 by that number to get your %. If the section count changes, then you may have to adjust your % based on the new page length.

This is very predictable though, I usually like to plan out the number of sections, each with 100% height (set body to 100% also) and you can plan your page while scrolling interactions predictably.

I hope this helps

Hi Dave!

Thanks man!

I wonder whether instead of ‘percentage’ it would be possible to select an option to make it ‘pixels’. So each animation action occurs at a defined pixel distance from the top of the website instead of a percentage.

Don’t know whether this is possible or not, but maybe an idea to get around planning ahead.

Thanks again anyway!