[class^=\"scroll-trigger-\"] {\n view-timeline-axis: x;\n view-timeline-direction: backwards; \/* <-- this is speculative. do not use! *\/\n}<\/code><\/pre>\n\n\n\nWith an API like that allowing the swipe-right scroll trigger to behave the way I originally imagined, the Spider Pig swiper would not require hacking.<\/p>\n\n\n\n
I dream of wider browser support for scroll-driven animations. But I hope to see the spec evolve to give us more flexibility to encourage designers to build nonlinear storytelling into the experiences they create. If not, once animation timelines land in more browsers, it might be time to make Web-Slinger.css more complete and production-ready, to make the more advanced scrolling use cases accessible to the average CSS user.<\/p>\n","protected":false},"excerpt":{"rendered":"
Lee Meyer with a super clever idea using scroll-driven animations as an interaction to “like” or “dislike” something.<\/p>\n","protected":false},"author":282319,"featured_media":383545,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"1","_share_on_mastodon_status":"Lee Meyer with a super clever idea using scroll-driven animations as an interaction to \"like\" or \"dislike\" something. %permalink%"},"categories":[4],"tags":[18954],"class_list":["post-383533","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-scroll-driven-animation"],"acf":{"show_toc":"Yes"},"share_on_mastodon":{"url":"https:\/\/mastodon.social\/@csstricks\/113832978441771889","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/01\/swipe-direction.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":382156,"url":"https:\/\/css-tricks.com\/web-slinger-css-like-wow-js-but-with-css-y-scroll-animations\/","url_meta":{"origin":383533,"position":0},"title":"Web-Slinger.css: Like Wow.js But With CSS-y Scroll Animations","author":"Lee Meyer","date":"November 1, 2024","format":false,"excerpt":"Can we recreate a JavaScript library for scrolling animations with a modern CSS approach using CSS Scroll-Driven Animations? Yes. Yes, we can.","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/10\/web-slinger-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/10\/web-slinger-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/10\/web-slinger-css.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/10\/web-slinger-css.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/10\/web-slinger-css.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":242456,"url":"https:\/\/css-tricks.com\/aos-css-driven-scroll-animation-library\/","url_meta":{"origin":383533,"position":1},"title":"AOS: CSS-Driven “On Scroll” Animation Library","author":"Micha\u0142 Sajn\u00f3g","date":"June 6, 2016","format":false,"excerpt":"The following is a guest post by Micha\u0142 Sajn\u00f3g, a front end developer at Netguru. Micha\u0142 has created one of those \"when you scroll to here, trigger this animation\" libraries. One of the things I like about it is that it leaves as much as it can to CSS for\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":355060,"url":"https:\/\/css-tricks.com\/scroll-linked-animations-with-the-web-animations-api-waapi-and-scrolltimeline\/","url_meta":{"origin":383533,"position":2},"title":"Scroll-Linked Animations With the Web Animations API (WAAPI) and ScrollTimeline","author":"Bramus","date":"November 4, 2021","format":false,"excerpt":"The Scroll-linked Animations specification is an upcoming and experimental addition that allows us to link animation-progress to scroll-progress: as you scroll up and down a scroll container, a linked animation also advances or rewinds accordingly. We covered some use cases in a previous piece here on CSS-Tricks, all driven by\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/scroll-position.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/scroll-position.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/scroll-position.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/scroll-position.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/scroll-position.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":387862,"url":"https:\/\/css-tricks.com\/how-to-discover-a-css-trick\/","url_meta":{"origin":383533,"position":3},"title":"How to Discover a CSS Trick","author":"Lee Meyer","date":"July 25, 2025","format":false,"excerpt":"Do we invent or discover CSS tricks? Lee Meyer discusses how creative limitations, recursive thinking, and unexpected combinations lead to his most interesting ideas.","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/Untitled_Artwork-scaled.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/Untitled_Artwork-scaled.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/Untitled_Artwork-scaled.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/Untitled_Artwork-scaled.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/Untitled_Artwork-scaled.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":381191,"url":"https:\/\/css-tricks.com\/slide-through-unlimited-dimensions-with-css-scroll-timelines\/","url_meta":{"origin":383533,"position":4},"title":"Slide Through Unlimited Dimensions With CSS Scroll Timelines","author":"Lee Meyer","date":"September 27, 2024","format":false,"excerpt":"The creator of CSS\u00a0has said\u00a0he originally envisaged CSS as the main web technology to control behavior on web pages, with scripting as a fallback when things weren\u2019t possible declaratively in CSS. The rationale for a CSS-first approach was that\u00a0\u201cscripting\u00a0is programming and programming is hard.\u201d\u00a0Since introducing\u00a0the\u00a0:hover\u00a0pseudo-class, CSS has been standardizing patterns\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/09\/scroll-timeline-x-wing.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/09\/scroll-timeline-x-wing.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/09\/scroll-timeline-x-wing.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/09\/scroll-timeline-x-wing.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/09\/scroll-timeline-x-wing.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":387868,"url":"https:\/\/css-tricks.com\/bringing-back-parallax-with-scroll-driven-css-animations\/","url_meta":{"origin":383533,"position":5},"title":"Bringing Back Parallax With Scroll-Driven CSS Animations","author":"Blake Lundquist","date":"August 6, 2025","format":false,"excerpt":"Parallax is a pattern in which different elements of a webpage move at varying speeds as the user scrolls, creating a three-dimensional, layered appearance. It once required JavaScript. Now we have scroll-driven animations in CSS, which is free from the main-thread blocking that can plague JavaScript animations.","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/smooth-scroll.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/smooth-scroll.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/smooth-scroll.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/smooth-scroll.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/smooth-scroll.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/383533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/282319"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=383533"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/383533\/revisions"}],"predecessor-version":[{"id":383812,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/383533\/revisions\/383812"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/383545"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=383533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=383533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=383533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}