fullPage.js fadingEffect feels glitch-y


Been working on a fullPage slider and added the fading effect, but it seems to ‘break’ halfway through, so it doesn’t feel very smooth. Any way to solve this?

Find a live example here and my read-only below


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

@Alvaro_Trigo any thoughts on this perhaps? Mobile seems to work fine

Not sure how you are playing the videos, but you might want to play the videos on “onLeave” or on “beforeLeave” instead of on “afterLoad”.

Probably that’s what’s causing the weird behaviour in your case?

Seems the video pauses onLeave and the next one plays afterLoad, although I used whatever standard setting they work in so I’m not sure. But I don’t think it’s got anything to do with how the video’s play tbh…

Try using data-keepplaying as detailed on the fullPage.js docs

Tried but the video’s wouldn’t play at all when using data-keepplaying so went back to data-autoplay. Glitch was still there anyway so honestly I don’t think it has anything to do with the video embed. Any other suggestions?

I didn’t say “replace” :wink:

Keep both.

Ah right, just did that. Glitch is still there…

The easing slightly bounces back half way for some reason.

Your videos are not autoplaying on page load, that’s probably the issue. Notice how the glitch won’t happen once you scroll all sections and you scroll them a second time.

Just make sure to add autoplay and remove data-autoplay from your videos.

So basically:

<video src="YOUR_VIDEO" loop="" muted=""  autoplay data-keepplaying="" playsinline="" preload="metadata" type="video/mp4"></video>

Ok set it up like this but the glitch is still there (also after scrolling a second time). Not sure if you’re noticing this? Using safari + chrome for testing

I don’t see any issue in neither Chrome or Safari.

Starting to wonder if you’re referring to the grey area before a video starts playing, because that’s not what I mean. I’m talking about the transition between slides. It sort of breaks up the easing with a glitch. Tried to visualize it below lols