Jumping / flickering images

The images on my homepage are jumping around.

Try scrolling slowly down the page - on Safari, Chrome and Firefox, on my MacBook and iMac, and on my iPad, the images jump/flicker 2, 3, 4 or even 5 times.

My iPhone X is the only device it works on.

Lazy loading is off, and no matter what I do - or don’t - ‘minify’ nothing changes.

(It’s made with Blocs 2 as the smooth toggling I need doesn’t work on Blocs 3.)*

Any ideas?

Thanks.

*Just found this, is it a solution to smooth toggling on Blocs 3? It’s way beyond my ability to decide That’s why I use Blocs.

So, I’ve done a slo-mo screen recording which clearly shows the brick building jumping up and down, once at the beginning and once at the end of the clip.

Anybody any ideas why?

https://vimeo.com/325002112/72fd6b5f57

Exported it to Blocs 3.

Same thing.

I’d really appreciate some advice on this please @Norm.

I don’t think I’m trying to do anything too radical!

Scroll down slowly and you’ll see the flickering - Blocs 3 version (complete with smooooooth toggling on containers). http://www.poulson.info/3/

Thanks.

Hello @Ian

Try remove the animate “Fade In Up” on the text fields.
It seems that when they have been loaded and animated the flickering is gone.
But as soon as you reload the page it’s all reseted again.

Hope it helps.

Cheers / Johny

As a general comment I would say you have too much animation going on all over the place and this can lead to jumpy issues that will be worse on low powered devices.

1 Like

Thanks, looking at it, really didn’t think such simple anims could cause such problems!

Thanks @webdeersign and @Jakerlund

Well I’ll be durned.

I’ve substituted scrolls for animations (which I would have thought would be more problematic) and it works fine.

Looks nicer too IMHO.

See the first few images here… http://www.poulson.info/3/3/

Is it working smoothly on your devices?

Thanks.

Hi @Ian

Personally I’d pretty much skip all animations.
I get tired quickly coming to sites and things animates.
For me it doesn’t add any value.
I’m ok when one logo on the start page fades in or something.

I noticed on mobile that the round image doesn’t show until you start to scroll (pic 1).
And it’s the same with other text content (pic 2).
The text slide up animation and image flicker is still present on mobile.

I would just leave the text static and not animate them.
Cheers / Johny

4 Likes

Agreed, a little animation goes a long way… sometimes I feel it distracts from the site and actually when done wrong makes the site look unprofessional.

Casey

3 Likes

Yes, ignore the finer points, it’s new import to Blocs 3 and hasn’t been fettled yet.

I was having to stick to Blocs 2 for the smooth toggling, but found a way to do it in 3.

2 Likes

Too much animation can bring negative impact on the user experience. Try to keep things simple unless its highly followed across the sites in the niche.

1 Like