Fade in only working once

Design help Animations & Interactions
#1

Hey guys,

I have a team section on my site where I want clicking on the team member’s name to reveal their bio. I want this effect to fade in rather than just appear.

My solution seems to work, but only the first time - i.e. the first time that team member is clicked.

Here’s how I set it up.

00:00 - set initial state hidden
AND
00:00 - set initial opacity 0%
THEN
00:00 - hide other team members x4
THEN
00:00 - set hide/show to shown
AND
00:00 - set opacity 100% (0.5s duration)

Any ideas how I can improve this?

Cheers

Here is my public share link: Chroma Trading | Team

#2

It would be more helpful to check the implementation on your project.

Anyway, I tested myself and adding opacity: 0% should make it work. Because technically after the block appears it remains on opacity: 100%, so you’ve to set if back to opacity: 0 to have that fade effect.

Add opacity: 0 with your third step 00:00 - hide other team members x4

Check that and let me know if there is anything.

#3

Thanks Abi, how can I share the implementation of my project?

I will give your solution a try.

#4

Check this link below to see how you can share your project.

#5

By the way, did you try my suggestion above??

#6

Thanks Abi!

Yes this seems to have fixed the issue - I now have a nice smooth transition on all the cards.

This should be the read-only link.
https://preview.webflow.com/preview/chroma-27e966?utm_medium=preview_link&utm_source=dashboard&utm_content=chroma-27e966&preview=622c4157dfd11d34a4a94027525377d0&workflow=preview

#7

Oh great then

You link doesn’t seems to be public but if your issue is solved, please mark this topic and solved as well.