While Scrolling in View bug?

Community resources General
1

I have some ‘while scrolling in view animations’ on a site header. Although I have it set to only trigger on desktop, for some reason the initial scroll action set at 0% (for example, say -100px) is applied to the elements on all the other resolutions so throws the whole design out. I thought that if you set it to only display on desktop all instances of the animations were ignored on other resolutions?

Here is my read only…

EDIT* I’ve had to move on with this design now so have disabled the animation for now.

Any help much appreciated.

2

This is something that is an old known problem. As far as I can tell it can not be addressed due to the way initial state is handled. In short initial state is always transferred and executed by elements (resulting in will-change state for a given element) even if subsequent animation is not firing.

1 Like
3

Thanks for the heads up dram.

It’s interesting because I took the idea I have used from one of the marketplace templates (one of Deni’s amazing designs) and he has it working as expected. I have scoured his work-flow and replicated it exactly but still can’t get it to work.

1 Like
4

Can you please link the template in question? I am very much interested to know how it was done too :slight_smile:

5

I know, it’s fascinating and intriguing and also starting to make me twitch. It’s this one…

https://preview.webflow.com/preview/muma-template?utm_source=muma-template&preview=ea111495a0624f29cfdc7740f7bc5215

…and it’s homepage 4.

6

Alright, I officially have no idea how the will-change property was avoided in that template. Maybe someone will chime in with thoughts on this one.

7

:rofl: I know right.

8

He’s actually got the will-change property to display a top property of 0.333 on ipad and 0.666 on mobile. How? when the animation is switched off on anything other than desktop.