kingsloi

Hi, For anyone familiar with Beads of Courage, it's a way to track a child's medical journey. I've digitised my little girls, and I am in the process of documenting her entire journey. Here's a quick codepen: https://codepen.io/kingsloi/pen/rNwyBRe The beads are 33ft long. It's a very long site, I understand the complications/limiations. I've split the images into more manageable chucks, and then further split it so I can add text at certain points - it this text I want to animate. I want to animate it so as you scroll, the text is made visible, and animates. If you scroll up, they disappear. `fullsize__image` contains the full 33ft of beads, split into 10 images. it's these images that I actually display to the user. I do this because the images in `timeline__image` are NOT the same size, and do not align correctly. This was the only way I could achieve the desired effect of having the beads scroll in their entirety, but also show certain text at certain points. These do not need to be animated. `.timeline__image-holder .timeline__image` contains the image - it is hidden (`visibility: hidden, opacity: 0`), but not `display: none`, I've done this to retain the height of the image, so I can add a little bit of text at that point in the journey. So, when a user scrolls past that point in the beads, I want the text to show/animate. `.timeline__description` is what I want to show/hide animate. I would normally spend my time figuring out how to animate, but unfortunately, I've ran out of time and just trying my hardest to get this site up and ready by the 12th. I would also love some additional animation, I'm not sure where, but open to creativity. I do not have a budget in mind - I am happy to pay whatever! Please let me know of any questions you have! Cheers, Kingsley