{"id":362893,"date":"2022-02-02T13:11:55","date_gmt":"2022-02-02T21:11:55","guid":{"rendered":"https:\/\/css-tricks.com\/?p=362893"},"modified":"2022-02-02T13:11:57","modified_gmt":"2022-02-02T21:11:57","slug":"building-a-scrollable-and-draggable-timeline-with-gsap","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/building-a-scrollable-and-draggable-timeline-with-gsap\/","title":{"rendered":"Building a Scrollable and Draggable Timeline with GSAP"},"content":{"rendered":"\n<p>Here&#8217;s a <a href=\"https:\/\/tympanus.net\/codrops\/2022\/01\/03\/building-a-scrollable-and-draggable-timeline-with-gsap\/\" rel=\"noopener\">super classy demo from Michelle Barker<\/a> over on Codrops that shows how to build a scrollable and draggable timeline with GSAP. It&#8217;s an interesting challenge to have two different interactions (vertical scrolling and horizontal dragging) be tied together and react to each other. I love seeing it all done with nice semantic markup, code that&#8217;s easy to follow, clear abstractions, and accessibility considered all the way through.<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_597a468071d4dce3f7bf0ce80d6cb8d3\" src=\"\/\/codepen.io\/anon\/embed\/597a468071d4dce3f7bf0ce80d6cb8d3?height=750&amp;theme-id=1&amp;slug-hash=597a468071d4dce3f7bf0ce80d6cb8d3&amp;default-tab=result\" height=\"750\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 597a468071d4dce3f7bf0ce80d6cb8d3\" title=\"CodePen Embed 597a468071d4dce3f7bf0ce80d6cb8d3\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s a super classy demo from Michelle Barker over on Codrops that shows how to build a scrollable and draggable timeline with GSAP. It&#8217;s an interesting challenge to have two different interactions (vertical scrolling and horizontal dragging) be tied together and react to each other. I love seeing it all done with nice semantic markup, [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":362967,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_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,"sig_custom_text":"Michelle Barker: Building a Scrollable and Draggable Timeline with GSAP","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[612,505,600],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-31-at-11.23.01-AM.png?fit=2366%2C1322&ssl=1","jetpack-related-posts":[{"id":305916,"url":"https:\/\/css-tricks.com\/tips-for-writing-animation-code-efficiently\/","url_meta":{"origin":362893,"position":0},"title":"Tips for Writing Animation Code Efficiently","date":"April 10, 2020","format":false,"excerpt":"I\u2019ve been coding web animations and helping others do the same for years now. However, I have yet to see a concise list of tips focused on how to efficiently build animations, so here you go! I will be using the GreenSock Animation Platform (GSAP). It provides a simple, readable\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/Untitled_Artwork.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":260146,"url":"https:\/\/css-tricks.com\/writing-smarter-animation-code\/","url_meta":{"origin":362893,"position":1},"title":"Writing Smarter Animation Code","date":"October 13, 2017","format":false,"excerpt":"If you've ever coded an animation that's longer than 10 seconds with dozens or even hundreds of choreographed elements, you know how challenging it can be to avoid the dreaded \"wall of code\". Worse yet, editing an animation that was built by someone else (or even yourself 2 months ago)\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":250106,"url":"https:\/\/css-tricks.com\/using-gsap-animate-game-ui-canvas\/","url_meta":{"origin":362893,"position":2},"title":"Using GSAP to Animate Game UI with Canvas","date":"January 23, 2017","format":false,"excerpt":"The year was 1995; Toy Story hit the theaters, kids were obsessively collecting little cardboard circles and Kiss From a Rose was being badly sung by everyone. I was a gangly ten-year-old, and like any other relatively tall kid I was often addressed to by \"you must be so good\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/01\/canvas.png?fit=400%2C219&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":193135,"url":"https:\/\/css-tricks.com\/weighing-svg-animation-techniques-benchmarks\/","url_meta":{"origin":362893,"position":3},"title":"Weighing SVG Animation Techniques (with Benchmarks)","date":"January 27, 2015","format":false,"excerpt":"The following is a guest post by Sarah Drasner (@sarah_edo). Sarah has been researching and giving talks about animation lately. I jumped at the chance to have her share some of that research here, this time focusing on SVG animation and the different tech choices you can make to do\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":366509,"url":"https:\/\/css-tricks.com\/choosing-an-animation-library-for-solitaire\/","url_meta":{"origin":362893,"position":4},"title":"How I Chose an Animation Library for My Solitaire Game","date":"June 29, 2022","format":false,"excerpt":"There is an abundance of both CSS and JavaScript libraries for animation libraries out there. So many, in fact, that choosing the right one for your project can seem impossible. That's the situation I faced when I decided to build an online Solitaire game. I knew I'd need an animation\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/solitaire-anime-gsap.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":301006,"url":"https:\/\/css-tricks.com\/how-to-animate-on-the-web-with-greensock\/","url_meta":{"origin":362893,"position":5},"title":"How to Animate on the Web With GreenSock","date":"January 13, 2020","format":false,"excerpt":"There are truly thousands of ways to animate on the web. We\u2019ve covered a comparison of different animation technologies here before. Today, we\u2019re going to dive into a step-by-step guide of one of my favorite ways to get it done: using GreenSock. (They don\u2019t pay me or anything, I just\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/greensock.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/362893"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=362893"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/362893\/revisions"}],"predecessor-version":[{"id":362966,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/362893\/revisions\/362966"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/362967"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=362893"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=362893"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=362893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}