Sometimes x-intersect does not work

[nsursock]

https://nicolas-sursock-webdev.netlify.app/
I have a landing page to sell my webdev skills. I'm using the intersect plugin to animate sections and lazy load the portfolio images. Sometimes everything works correctly and sometimes it doesn't:

• Scrolling down skips a section, and you have to go up to see the section appear. Sometimes you have to go up and down,
• Sometimes the first image from the carousel of the first project (portfolio section) doesn't load even though it's in the viewport. If you go to the next image, it loads and intersect works correctly.

The key word here is "sometimes". I'm not able to find the logic.

[lestertarranza]

Were you able to find the solution? Im having the same issues about scrolling down skips a section and I had to go down further and go back up to see the transition coming in for that specific skipped section.

I was thinking it might have something to do about a fixed nav or element on top of the page.

[SimoTod]

Can you try using x-intersect:enter="..." and see if it solves the issue? They are basically the same thing but it uses a slightly different implementation.

[lestertarranza]

Tried it on the 2nd section but it shows up at the same time as the 1st section even though its not within the viewport.

[SimoTod]

That link shows a broken page with just a menu and no content. Can you create a codepen or something similar?

[lestertarranza]

@SimoTod sorry for that. here's the main content area on codepen: https://codepen.io/dplgngr/pen/MWorxvr

[SimoTod]

no worries. the example is a bit messy (you forgot to import tailwind and alpine, there are PHP snippets in it, there's also a lot of noise).
You could probably start from a simple working prototype and then add more classes to it.

In general, this is how intersect works: https://codepen.io/SimoTod/pen/gORvbbg

[markjaquith]

#2557 was merged and fixes this issue.