search

tjikko-studio / components

Component library for Tjikko Studio apps
0 stars 0 forks source link

Adjust FeaturesShow feel for different amount of popups #241

Closed shawninder closed 2 years ago

shawninder commented 2 years ago

@ktryndchrs Peux-tu essayer les FeaturesShow dans Storybook/backend/frontend sur cette branche et confirmer que c'est mieux que ce qu'il y a sur main au niveau UX?

Je réagit entre-autre au commentaire de Tim dans son email qui me disait:

Scroll issue on Real Estate page

When you scroll through the page it gets stuck on each image pop up. If you are using the wheel on your mouse you have to scroll down too much to get to the next image. You will see the side scroll moving but the page will not scroll

Je crois avoir trouvé un meilleur moyen de faire ça mais j'aimerais une autre opinion sur le rendu avant de merger

shawninder commented 2 years ago

I left some comments on your changes @ktryndchrs , most importantly it's now possible to scroll past the popups without ever seeing them!

ktryndchrs commented 2 years ago

I commented and some updated will follow

ktryndchrs commented 2 years ago

@shawninder Je penses en toute honnêteté que mon approche pour l'animation avec le css fait du sens. Je comprends que le code est un pu cryptique, alors je vais l'ajuster. Cependant il y a un problème qui demeure présent avec ou sans animations: Le "Scroll gap" que j'explique dans cette vidéo:

https://user-images.githubusercontent.com/416462/143719098-bb97b5d5-4337-4013-820f-4573284db30b.mp4

shawninder commented 2 years ago

Je comprends ce que fais ton code @ktryndchrs , merci. J'arrive pas à filmer le problème des transitions CSS car lorsque je fais un screen recording, ça ralenti tout au point où les images n'apparaissent pas assez vite pour reproduire le problème, mais j'arrive à reproduire le problème facilement lorsque je n'enregistre pas: Il suffit sur la page real-estate et de défiler jusqu'en bas rapidement. Si tu défiles assez rapidement, tu peux passer une image au complet et ne pas voir qu'il y a des popups puisqu'ils n'auront pas eu le temps de s'afficher avant qu'on leur redemande de disparaître… C'est pour cette raison que j'avais retirer la transition CSS. En effet, avec un affichage des popups directement relié au scroll, impossible de scroller trop vite, on voit toujours le popup apparaître.

Es-tu capable de reproduire ce problème et voir si tu trouve ça très dérangeant?

À part cela, j'aime bien l'extra transition que tu apportes, bien que le code mérite un peu de ménage pour être plus facile à lire ;)

shawninder commented 2 years ago

En ce qui a trait au "gap", c'est justement ce que Tim n'aimait pas: dans le cas où un seul popup était défini sur une page, le "gap" était trop long et on défilait sans résultat trop longtemps. Avec la solution actuelle, le "gap" est défini par la hauteur assignées aux popups originaux (ceux qui scroll avec la page et qu'on ne voit pas), 50vh si je me souviens bien. Un avantage par rapport à la technique précédente c'est qu'on a toujours le même "gap", peu importe le nombre de popup (on peut donc avoir 150 popups sur une seule image, sans problème, si c'est ce qui est désiré). Et on peut ajuster ce "gap" en changeant de 50vh à autre chose.