Fade in only working once

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
00:00 - set initial opacity 0%
00:00 - hide other team members x4
00:00 - set hide/show to shown
00:00 - set opacity 100% (0.5s duration)

Any ideas how I can improve this?


Here is my public share link: Chroma Trading | Team

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.

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

I will give your solution a try.

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

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

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.

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.