# Scroll based animation - css

**URL:** <https://forums.realmacsoftware.com/t/scroll-based-animation-css/56459>\
**Category:** Elements API\
**Created:** [June 1, 2026, 5:02pm UTC](https://forums.realmacsoftware.com/t/scroll-based-animation-css/56459 "2026-06-01T17:02:02Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [June 1, 2026, 5:02pm UTC](https://forums.realmacsoftware.com/t/scroll-based-animation-css/56459/1 "2026-06-01T17:02:02Z")

</div>

only just got around to this scroll animations css only, trying some more complex ones at the moment, not sure how good this is yet

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [June 1, 2026, 6:38pm UTC](https://forums.realmacsoftware.com/t/scroll-based-animation-css/56459/2 "2026-06-01T18:38:56Z")

</div>

Oh that looks nifty, nice work 👏

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [June 2, 2026, 5:49pm UTC](https://forums.realmacsoftware.com/t/scroll-based-animation-css/56459/3 "2026-06-02T17:49:59Z")

</div>

All css only - ok this does not work in all browsers yet, in Firefox it needs to be turned on, so just for fun, or you could use. I will delete tomorrow.

project- [elementsapp://downloadDocument/4jqScQyOW1xC](elementsapp://downloadDocument/4jqScQyOW1xC)

ok more complex took me a while to put in keyframes, left and right ok, the center animation not so good, 3 dropzones, need to work on option to add own paths

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [June 2, 2026, 8:44pm UTC](https://forums.realmacsoftware.com/t/scroll-based-animation-css/56459/4 "2026-06-02T20:44:04Z")

</div>

Those are additions are pretty cool, keep up the good work 🙂