Streaming live at 10am (PST)

Stuttering Interaction

All pages of my site have the same scroll interaction on there, with a simple fade as you scroll away from the hero section. But all the pages have the same ‘stutter’ when the page starts scrolling, with the section fading in and out quickly, then after that first instance it seems to be totally fine?

Just cannot figure out what I’ve got set wrong that’s causing this.

The logic of your interactions is a bit wrong. Here is what happens now when scrolled in view: your hero first becomes transparent (slooowly with the 500ms transition), then it becomes opaque. And then when your section scrolls out of view it first becomes opaque (slowly again), then it becomes transparent. See the discrepancy?

You should set it up like this:

  • when scrolled in view: section gains 100 opacity. That is all.
  • when scrolled out of view: section becomes transparent. That is all.
  • oh and set your hero section wrapper to 100vh not 125 (I don’t know why you set it up like that in the first place but it won’t allow you to see the fade in since ix will kick in faster than you will actually see the object it affects)

Thanks! That makes a ton more sense, don’t know why I’ve never thought of interactions that way.

The extended vh is to allow the text to sit below the line of the stripes.