Jump to content
Search Community

looking for scrolltrigger animation + any additional animation is welcome

kingsloi test
Moderator Tag

Recommended Posts



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: 

See the Pen rNwyBRe by kingsloi (@kingsloi) on CodePen


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!







  • Like 1
Link to comment
Share on other sites

  • kingsloi changed the title to looking for scrolltrigger animation + any additional animation is welcome

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...