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

Design help Animations & Interactions
1

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: http://signalux.webflow.io/
Webflow link: https://preview.webflow.com/preview/signalux?preview=7c51c587c91a3cfcdb270dc46fa1fbec

1 Like
2

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.

3

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?

4

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.

5

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:

6

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.

7

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.

8

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

thanks in advance :slight_smile:

1 Like
9

Here’s mine: https://preview.webflow.com/preview/three-sixty?preview=34a19123c4953f1f14b7c682cbfd6c97

You can see the issue on this page: http://three-sixty.webflow.io/contact-us

The fade in interaction is on the container class

10

@PixelGeek Any luck?

12

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

13

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.

14

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:

<script>
  function init() {
      window.scrollTo(0, 1);
      window.scrollTo(0, -1);
  }
  init()
</script>

Hope it helps.

7 Likes
15

Im having the same issue.

I need a banner at the top of my page to start since it the view port.
Yes, I could put the action on load, but I need the action to be attached to the element not to the page, for multiple placements and scalability reasons.

16

Agree. Webflow team, this is a clear bug – are you going to fix this?

The “Scroll into view” trigger needs to be automatically evaluated by Webflow on page load, and trigger any of the associated animations that are already in view.

4 Likes
17

Same issue here, would love to get a fix for this without any javascript hack or removing animation from first couple of objects.

1 Like
18

I’d love to see it implemented like that (with ix in view being triggered on load rather than after some scroll action)

19

Any updates on this? @kylecraven did you get yours working?

I have a simple fade-in applied to a class so all the corresponding headers appear on scroll. However, as others have said, if the user should load the page while already scrolled partially, the items with the animation class do not appear until there is a scroll.

The main use cases:

  1. I have an animation applied to a class that is above the fold.
  2. Anchor links.
  3. I imagine it’s much less common for people to refresh a page afters scrolling down halfway; but you never know :slight_smile:
1 Like
20

This solved the issue for me. Thank you so much for the solution! :+1: :clap:

1 Like
21

When will Webflow fix this bug? It’s been almost 2 years. The "scroll into view” trigger needs to be automatically triggered if any of the elements are loaded already in view.

5 Likes