Streaming live at 10am (PST)

IX 2.0 - Scroll into view not activating until the page is scrolled a bit


I am trying to do a simple “scroll into view” animation on my content but if the content is in the viewport when the page loads the animation doesn’t run until I scroll a bit. A good example is on the “resources” page where the bottom content doesn’t load until you scroll a bit.

With IX1 the content would load without having to scroll first. Am I doing something wrong? Should I use a different type of interation with IX2?

And I know that I could just use the IX1 “scroll into view” interaction to solve the problem but I have had issues with using IX1 and IX2 at the same time, so I am trying to use only IX2 on this project.

Website link:
Webflow link:


I’m currently having the same issue. What I would do is remove the scroll interaction from the first “blog” div portion and instead use a page load interaction. Only for that portion. the rest can be scroll interactions. You’ll have to duplicate the classes for for that first blog div so that it is independent of the rest, allowing you to give it a page load interaction.


Thanks for the reply,

That is a partial solution but the issue with is that depending on the screen size the user will see varying amounts of content above the fold. The amount of visible elements above the fold is different on a large display or phone or even a small laptop. If I put a page load interaction on everything visible above the fold on a large display then users with smaller displays won’t be able to see the animation and when they scroll down the element will already be loaded. This isn’t a huge deal but it is a bit sloppy.

Do you think that the scroll into view issue is a bug or expected behaviour?


That’s a great point, never thought of that. @PixelGeek any input? I would hope that scroll interactions would be triggered by the element being in the viewport rather than when scrolling begins.


Don’t mean to pry, so just wanted to add. Remember the size of the div/section matters and then the offset (newly added) can be misleading. In my experience the smaller (less height) makes the interaction behave somewhat erratic, in my opinion. The taller the section, things seem to function more smoothly for Scrol Into View with IX2. Just another pair of eyes to help. :grinning:


Has anyone got a fix for this? I’m currently running into the same issue. I’d like my masonry grid to grow when the content is in the field of view. Whether that is on page load or while scrolling into the window.


I need help with this too.

I have a class called ‘fadeIn’ on my sections. The default state is opactiy: 0;

The issue is the first section of every page is invisible until the user scrolls. I need it to trigger the interaction by the section being in view.


Hi @Aaronru1 Can you please republish your URL so I can test this out and investigate?

thanks in advance :slight_smile:


Here’s mine:

You can see the issue on this page:

The fade in interaction is on the container class


@PixelGeek Any luck?


Hi @PixelGeek Any updates regarding this? I am having the same issue


I think one way this can be fixed it to check after page load, if there are any items in the viewport that have a trigger “enter view port” and then do the trigger automatically. not sure how much work this would be for the you guys though. but this would be a really nice addition.


You can make javascript scroll your website 1px down and 1px back up to get the effects?

Put something like this in your custom code:

  function init() {
      window.scrollTo(0, 1);
      window.scrollTo(0, -1);

Hope it helps.