This is a fairly new experimental animation needing a polyfill (https://rawcdn.githack.com/flackr/scroll-timeline/55c54c10ccf3308f36c09cbca4935286fe99f14f/dist/scroll-timeline.js), but according to Bram.us will be coming soon to browsers. I don't want to use GreenSock's ScrollTrigger. I have one item animating but I don't see why the rest won't animate. Each piece of armor is a separate element that I want to come in one at a time with scrolling and then each come back off on reverse scrolling.
See at: https://armor.byuiwebdev.com
Bram.us has a cactus example in his scroll-driven collection on codepen that does a similar thing but I also could not get that code to work either. All items come in at the same time with that example.
The cactus example you are referring to is using the old
@scroll-timelinesyntax.Since creating that demo, the Scroll-Linked Animations Specification and its proposed syntax have undergone a major rewrite, so the example is no longer syntactically valid. This notice is also included in the demo itself.
Note that the concept of a Scroll-Linked Animation still stands, it’s only the syntax that has changed since creating the demo.
To learn about the new syntax, please refer to these resources: