Streaming live at 10am (PST)

Have a challenge with dropdown animation

Hi there. Maybe it’s simple but I try to realize it for 6-7 hours and it doesn’t work as I want. First time I used review block in the same div that name and icon of use case but it moved it. so I made another row for reviews. but when I do animation for 1 element in the class it works and when on next it becomes broken :frowning:

Help me please to find the right way.

Hi @Mariia_Kulida,

Not sure I understand what you trying to achieve. In your project, the interraction seems to be missing its target. Do you have a website example to show us, which would demonstrate the type of reveal effect you’re looking for ?

@anthonysalamin thank you a lot for feedback!

I want this block works in such way

I added additional row for reviews and made the animation for it on use-case hover

and made 2 and 3 review invisible. I used combo classes for reviews (1,2,3) and for use-case (wed, estate). when I use such animation for just 1st use-case WED it works. when I add 2 use-case ESTATE it’s broken and 1 review becomes invisible.

is it right way to layout such design at all? or I need to use different html structure?

thank you!

Thank you for the clarifications. I believe your structure might be the issue.

From a pure UX point of view, I think you might want to rethink the way you wish to showcase the review specific to each of your highlights. As a UI/UX designer, or simply a user interested in your services, it would be way more convenient to quickly be able to read your highlights within three or four lines - no need to hide what is important.

Also, your actual review seems a litttle bit long to read for something that pops up on hover. Why not try be as concise as possible, focus on what matters most?

If you still wish to showcase more info on hover, you might want to do it differently as for now, the entire layout gets pushed down rather quickly. Then comes the mobile design, how is you animation going to look like / trigger on smartphones ? At the moment none of the blocks are responsive. Of course I understand the screendesign is still in developement but this is something you might want to consider :slight_smile: I’ve been there before.


I have rebuilt a quick interraction prototype for you to have a look at.

Read-only link
Youtube screen recording

Maybe that helps ?

1 Like

@anthonysalamin Thank you very much!

Thanks to you, my client has heeded the advice not to make reviews hidden. Thanks a lot!

About the way of displaying and the structure of the blocks, I used this method earlier, but then the task was complicated by the fact that it was necessary for the review to be wider than the column, and the blocks did not disperse. That was the challenge. But thanks to you. I don’t need to find the solution for it more.