Hello,
The cards on my Home page disappears with Firefox after the mouse over them and don’t reappears.
All works well with Chrome and Edge.
I tested your page in Firefox and it works ok for me. I would try to “Clear History” “about:preferences#privacy” in Firefox and see if that helps. It is possible the issue is only happening on your own computer. Firefox has a list of troubleshooting steps on this page. Hope this helps.
I made a relocation of firefox. the problem is the same.
Which firefox version do you have ?
I’m on version 88.0 of Firefox. I believe most people get updated to the latest version automatically.
hi @karle your problem is in animation. When you add scroll to view action move scroll up 2 to grid containers Grid card spe 3t 4 (instead to each card element) problem disappear. At least for me.
Hi Stan
Sorry but I don’t understand, what I must to do exactelly ?
I would like to add something: for well see the problem you have to move the mouse over the cards several time.
yes I know that as I have spend some time to find where your problem is. Sorry that my explanation wasn’t formulated the way you will understand. So I try it again. 
At this time you have animation triggered by scroll to view there is nothing wrong but your animation called move scroll up 2 is applied to each card element . All you have to do is to remove this animation from card element and assign it ⚡ on its parent element that is called Grid card spe 3t 4. This mean that move will be applied on whole row.
1 Like
Yes it’s works well now apparently.
The effect should work on the three rows one by one as they appear on the screen. It works well when I fill the class with “only children with this class” and “Only parents with this class”.
I would like to understand why there is no difference between both?
In order to improve my knowledge on these four possible choices, could you explain to me or direct me to a tutorial that explains these settings well?
hi @karle to understand these choices you can google cascading, inheritance and difference between children and siblings. All of these terms are related to CSS. Here are some links but feel free to use any search engine to find more articles about this topic.
Hi Stan,
Trigger and target are the same. So target can’t be a child, a sibling or parents.
For me that should be works when I fill the class with "all elements with this class. But When I do that the 3 grids appears at the same time.
Where I do a mistake ?
hi @karle of course they will move at same time because your animation is triggered while scroll into view but they are already in view. You can use offset trigger animation later.
you have to zoom inside the page to see them appear one by one. but it doesn’t work with “all elements with this class”. On the other hand it works
well with “all children …” or “all parents …”. I don’t understand that. you can try to compar.
hi @karle here is one way you can solve your issue but I will recommend to spend some time with animations for better understanding what, how and when to use.
1 Like
Hi Stan,
Thanks for your explanation
1 Like
Hi Stan, wonderful explanation. How does your solution work at smaller screen sizes when there are only two or one items in each row?
Hi @britishchap what do you mean? Animation is applied to row so it doesn’t mother how many items are in row. If you mean when each image will be in column (under each other) and you want to have animation on each item when entering browser window then I will use when scroll into view. Or did you meant something else?
I was just clarifying that each row would animate all items in the row when there are a different number of items in each row. Thanks for the update. Awesome solution!
1 Like
hi @britishchap animation moving row it self so elements inside are moving with row. Hope that is more clear now.
1 Like