Streaming live at 10am (PST)

Tab Change and Interactions

Hello everyone !

There’s something strange going on on my project :
Whenever I click on a tab button to change tab, if the image above (which is animated) is on the screen, there is a jump.
If I click on the same tab button, but after scrolling down enough to hide the image above, no jump.
If I deactivate the interaction on the image, everything works great.

Any idea how I could fix that ?

Thanks a lot

Ok here is the bug in video.

So far, here is the info I have :

  • I can’t reproduce the bug while Chrome’s web inspector is opened.
  • As long as there is even a little of the image preceding the tabs on the screen, the bug happens.

I can’t understand what is happening, there is no id in the project (so no “jump to this”).
My best guess is that when I change the tab, the image’s interaction (the fade-in on apparition) is somehow triggered again and stopped just after. But that doesn’t explain why the bug is not happening every time.

I’m at a point where I don’t know what to do. Any help would be greatly appreciated !

Hi @Thomas_Meyers, thanks for the post and updates.

I checked the behavior and was able to observe that as you have reported, thanks for that.

I think it is related to the fade in MOVE transition and the interaction set to Scroll Into View.

Somehow the top offset is not recalculated for the tabs widget where normally that opens to the bottom of the tab menu, so the tab appears to be opening at that point prior to the images fading in.

I am helping to check further, in the meantime, if you remove the MOVE action in the Fadein timed animation, the tab should work ok, but the image will not move, only do an opacity change.

It could be that since the image is also set as the trigger element, like you say, if the image is still in view, that could be conflicting, you might also try to set another element as the trigger element, and target the image by class to see if the behavior changes.

When I have further info, I will share that info here.

Thanks for your help !

It seems to work when I disable the MOVE transition, that will do for now, thanks a lot !
I’m interested to see if you find anything else (at least to know what to avoid in the future).
(Thanks too for the idea of changing the trigger, but since it’s my first project, I try to avoid “workarounds” : my project is already messy enough :smiley: )

1 Like