Streaming live at 10am (PST)

Blog header while-scrolling animation like an InVision blog article


#1

I’m creating a while-scrolling animation on the header (hero) section of the site, similar to the way it works on an article like this one on the InVision blog.

When the page loads, the interaction is acting like it’s already scrolled down the page a bit (notice the jump from the 100% start positions on load).

Anyone have thoughts on why this is happening?

Here is my site read-only link: https://preview.webflow.com/preview/nauto-blog?preview=fafba2455aee344ab3ae524cbb5ca645

Many thanks!


#3

Thanks so much for the thought @cyberdave, but that’s really not an elegant or sustainable solution (see the jerky movements?) I’m looking a setting or adjustment that tells the elements to be at their 0% when the page is scrolled up to the top of the trigger element, and the official Triggers & Animations tutorial isn’t really what I’m looking for either since this is for blog post headers and pages content dictates page height, and I want the animation to end right when the header scrolls off the page, which is why I made it an element-based while-scrolling interaction.

Really my question is: why is it acting like it’s scrolled partway down the page?


#5

Hm, maybe we’re not seeing the same thing.

(If the video below doesn’t play, click here to view it in Dropbox)

And my current settings:

(Same here: If the video below doesn’t play, click here to view it in Dropbox)


#6

Basically, it should function very similarly to InVision blog articles, like https://www.invisionapp.com/blog/inside-design-amplitude/ :nerd_face:


#7

@cyberdave, regarding

It’s actually not what’s happening, but it’s what SHOULD be happening. That’s the problem. :confused:


#8

Hi @jonreese, thanks for the info, I will take another look, thanks in advance, I really appreciate it.


#9

Hi @jonreese, I was looking at the example and I noticed some differences, i.e. the hero section is fixed, while in your example the section was not fixed. I created a sample site to reproduce the effect, you can see my result here: https://webflow.com/website/Scale-and-Fade-Fixed-Hero-Example

Can you check on my example if the page opens with the same kind of behavior? http://scale-fade-fixed-hero.webflow.io/


#10

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.