Car Animation – Timeline<\/title>\n\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;700&display=swap\" rel=\"stylesheet\">\n\n \n <style>\n .h-100 {\n height: 80px;\n }\n .unvisible {\n visibility: hidden;\n }\n .timeline {\n position: relative;\n max-width: 800px;\n margin: 0 auto;\n }\n .timeline::after {\n content: '';\n position: absolute;\n width: 5px;\n background: #2FAE3E;\n top: 0;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n }\n .timeline-item {\n position: relative;\n left: 0;\n width: 50%;\n padding: 0 20px;\n margin: 0;\n box-sizing: border-box;\n }\n \/*.timeline-item:nth-child(odd) {\n left: 0;\n }\n .timeline-item:nth-child(even) {\n left: 50%;\n }*\/\n .timeline-item-right {\n position: relative;\n left: 50%;\n width: 50%;\n padding: 0 20px;\n margin: 50px 0;\n box-sizing: border-box;\n color: #000;\n font-weight: bold;\n }\n .timeline-item-next {\n width: 50%;\n position: absolute;\n left: 100%;\n top: 0;\n font-weight: bold;\n color: #000;\n margin-left: 20px;\n }\n .timeline-item-next::before, .timeline-item-right::before {\n content: '';\n height: 3px;\n background-color: #2fae3e;\n width: 15px;\n display: block;\n left: -20px;\n position: relative;\n top: 0;\n }\n .timeline-item-next span, .timeline-item-right span {\n position: relative;\n top: -15px;\n display: inline-flex;\n }\n .timeline-item-next span i, .timeline-item-right span i {\n font-style: normal;\n }\n .timeline-img {\n width: 80px;\n height: 80px;\n overflow: hidden;\n border-radius: 50%;\n border: 4px solid #fff;\n box-shadow: 0 0 10px rgba(0,0,0,0.2);\n position: absolute;\n top: 20px;\n right: -40px;\n background: #fff;\n }\n .timeline-item:nth-child(even) .timeline-img {\n left: -40px;\n right: auto;\n }\n .timeline-img img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n .timeline-content {\n padding: 0 12px 12px 12px;\n border-radius: 5px;\n position: relative;\n background-color: #fff;\n \/*box-shadow: 0px 10px 11px rgba(0, 0, 0, 0.03);*\/\n }\n .timeline-content h3 {\n margin-top: 0;\n font-size: 20px;\n color: #333;\n }\n .timeline-content p {\n margin: 0;\n color: #555;\n }\n .timeline-box {\n background: #2FAE3E;\n color: #fff;\n padding: 8px;\n position: relative;\n }\n .timeline-background {\n position: relative;\n width: 100%;\n background-image: url('https:\/\/www.corsafacile.it\/wp-content\/uploads\/2025\/06\/us-ny.jpg');\n }\n .badge {\n color: #fff;\n background-color: #e78169;\n box-shadow: 1px 1px 3px 1px #e78169;\n margin: 3px 0 0 8px;\n padding: 3px;\n font-weight: 400;\n font-size: 14px;\n height: 20px;\n align-items: center;\n display: flex;\n }\n .badge-unlocked {\n color: #fff;\n background-color: #deb71d;\n box-shadow: 1px 1px 3px 1px #deb71d;\n margin: 3px 0 0 8px;\n padding: 3px;\n font-weight: 400;\n font-size: 14px;\n height: 20px;\n align-items: center;\n display: flex;\n }\n\n \/*table css*\/\n .custom-table {\n width: 180px;\n border-collapse: collapse;\n text-align: left;\n color: #333;\n border: 1px solid #555;\n }\n .custom-table th,\n .custom-table td {\n padding: 0;\n font-weight: 400;\n border: 0;\n font-size: 14px;\n }\n .custom-table thead tr {\n background: #333;\n }\n\n @media screen and (max-width: 768px) {\n .timeline::after {\n left: 20px;\n }\n .timeline-item {\n width: 100%;\n padding-left: 60px;\n padding-right: 20px;\n margin-bottom: 20px;\n }\n .timeline-item:nth-child(even) {\n left: 0;\n }\n .timeline-img {\n top: 0;\n left: 0;\n right: auto;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"timeline\">\n <div class=\"timeline-item\">\n \n <div class=\"timeline-content\">\n <div class=\"timeline-box\">\n \n <div class=\"timeline-background\">\n \n <svg id=\"mapSVG\" viewbox=\"0 0 260 300\" width=\"100%\" height=\"300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill:url(#img01);>\n \n <rect width=\"260\" height=\"300\" fill=\"none\" \/>\n \n \n <path id=\"carPath\" d=\"M 50 65 L 35 50\" stroke=\"none\" fill=\"none\" \/>\n \n \n <image id=\"car\" href=\"https:\/\/www.corsafacile.it\/wp-content\/uploads\/2025\/06\/carNew.svg\" width=\"30\" height=\"15\" \/>\n <\/svg>\n <\/div>\n\n \n \n <\/div>\n <\/div>\n <div class=\"timeline-item-next\">\n <span>6:12 A.M. <i class=\"badge\">LOCKED<\/i><\/span>\n <table class=\"custom-table\">\n <tbody>\n <tr>\n <td>Total Earned<\/td>\n <td>$0.00<\/td>\n <\/tr>\n <tr>\n <td>Hours on Road<\/td>\n <td>0H 0M<\/td>\n <\/tr>\n <tr>\n <td>Hourly Rate<\/td>\n <td>$0.00<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <p>As Mohamed leaves his home in New York for the day, he is locked out of Uber and Lyft for more than an hour.<\/p>\n <\/div>\n <div class=\"timeline-item-next\">\n <span>6:30<\/span>\n <\/div>\n <\/div>\n\n <div class=\"timeline-item-right h-100\">\n <span>7:00<\/span>\n <\/div>\n\n <div class=\"timeline-item-right h-100\">\n <span>7:30<\/span>\n <\/div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <div class=\"timeline-box\">\n \n <div class=\"timeline-background\">\n <svg id=\"mapSVG\" viewbox=\"0 0 195 200\" width=\"100%\" height=\"200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill:url(#img01);>\n \n <rect width=\"195\" height=\"300\" fill=\"none\" \/>\n \n <path id=\"carPath\" d=\"m32 81l-19-5 3-17-16-11 10-19-5-4 2-24 8-1c0 0 41.9 32.5 40 41z\" style=\"fill: none; stroke: #000; paint-order:stroke fill markers; stroke-linejoin: round; stroke-width: 2;\" \/>\n <path id=\"carRoad\" d=\"m32 81l-19-5 3-17-16-11 10-19-5-4 2-24 8-1c0 0 41.9 32.5 40 41z\" stroke=\"none\" fill=\"none\" \/>\n \n <image id=\"car2\" href=\"https:\/\/www.corsafacile.it\/wp-content\/uploads\/2025\/06\/carNew.svg\" width=\"30\" height=\"15\" \/>\n <\/svg>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"timeline-item-next h-100\">\n <span>7:37 A.M. <i class=\"badge-unlocked\">UNLOCKED<\/i><\/span>\n <table class=\"custom-table\">\n <tbody>\n <tr>\n <td>Total Earned<\/td>\n <td>$0.00<\/td>\n <\/tr>\n <tr>\n <td>Hours on Road<\/td>\n <td>0H 0M<\/td>\n <\/tr>\n <tr>\n <td>Hourly Rate<\/td>\n <td>$0.00<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <p>He gets unlocked by Uber, completes a ride in New York and gets locked out again.<\/p>\n <\/div>\n <div class=\"timeline-item-next\">\n <span>7:47 <i class=\"badge\">LOCKED<\/i><\/span>\n <\/div>\n <\/div>\n\n <div class=\"timeline-item-right\">\n <span>7:54 <i class=\"badge-unlocked\">UNLOCKED<\/i><\/span>\n <\/div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <p>After getting unlocked by Uber, he starts a ride from New York to Manhattan.<\/p>\n <\/div>\n <div class=\"timeline-item-next h-100\">\n <span>8:00<\/span>\n <\/div>\n <\/div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <div class=\"timeline-box\">\n \n <div class=\"timeline-background\">\n <svg id=\"mapSVG\" viewbox=\"0 0 235 435\" width=\"100%\" height=\"435\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill:url(#img01);>\n \n <rect width=\"235\" height=\"435\" fill=\"none\" \/>\n \n \n <path id=\"carPath\" d=\"m-12 400l26-40v-16c0 0 30.6-73.2 38-73 0 0 15.2-29.5 38-27 0 0 22.2-6.8 30 5l17 20c0 0 3.3 1.8-1 8l-8 32c0 0-2.7 11.2 2 16 0 0 8.3 15.8-10 24l-14 10-9 10c0 0-5.8 8.2-19 12 0 0-12.1 4.5-16 13 0 0-10.4 15.8-21 23 0 0-15.1 13.8-25 0 0 0-15.1-14.8-28-17z\" style=\"fill: none; stroke: #000; paint-order:stroke fill markers; stroke-linejoin: round; stroke-width: 2;\" \/>\n <path id=\"carTrack\" d=\"m-12 400l26-40v-16c0 0 30.6-73.2 38-73 0 0 15.2-29.5 38-27 0 0 22.2-6.8 30 5l17 20c0 0 3.3 1.8-1 8l-8 32c0 0-2.7 11.2 2 16 0 0 8.3 15.8-10 24l-14 10-9 10c0 0-5.8 8.2-19 12 0 0-12.1 4.5-16 13 0 0-10.4 15.8-21 23 0 0-15.1 13.8-25 0 0 0-15.1-14.8-28-17z\" stroke=\"none\" fill=\"none\" \/>\n \n <image id=\"car3\" href=\"https:\/\/www.corsafacile.it\/wp-content\/uploads\/2025\/06\/carNew.svg\" width=\"30\" height=\"15\" \/>\n <\/svg>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"timeline-item-next h-100\">\n <span>8:30<\/span>\n <\/div>\n <\/div>\n\n <div class=\"timeline-item-right h-100\">\n <table class=\"custom-table\" style=\"position: relative; top: -2px; margin-top: 0;\">\n <tbody>\n <tr>\n <td>Total Earned<\/td>\n <td>$0.00<\/td>\n <\/tr>\n <tr>\n <td>Hours on Road<\/td>\n <td>0H 0M<\/td>\n <\/tr>\n <tr>\n <td>Hourly Rate<\/td>\n <td>$0.00<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <div class=\"timeline-box\">\n \n <div class=\"timeline-background\">\n <svg id=\"mapSVG\" viewbox=\"0 0 175 150\" width=\"100%\" height=\"150\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill:url(#img01);>\n \n \n <rect width=\"175\" height=\"150\" fill=\"none\" \/>\n\n \n <path id=\"carNoTrack\" d=\"M 125 115 L 115 110\" stroke=\"red\" fill=\"none\" \/>\n\n \n <image id=\"car4\" href=\"https:\/\/www.corsafacile.it\/wp-content\/uploads\/2025\/06\/carNew.svg\" width=\"30\" height=\"15\" \/>\n <\/svg>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"timeline-item-next\">\n <span>9:13 <i class=\"badge\">LOCKED<\/i><\/span>\n <\/div>\n <\/div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <p>After the ride, he gets locked out again. \u201cThis is like every day,\u201d he says. Uber tells him the next time he can go online is 5 p.m.<\/p>\n <\/div>\n <div class=\"timeline-item-next\">\n <span>9:30<\/span>\n <\/div>\n <\/div>\n<\/div>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/MotionPathPlugin.min.js\"><\/script>\n\n<script>\n gsap.registerPlugin(MotionPathPlugin, ScrollTrigger);\n\n \/\/ Example for first car\n gsap.to(\"#car\", {\n duration: 3,\n repeat: 0,\n ease: \"power1.inOut\",\n motionPath: {\n path: \"#carPath\",\n align: \"#carPath\",\n alignOrigin: [0.5, 0.5],\n autoRotate: true,\n start: 1,\n end: 0\n },\n scrollTrigger: {\n trigger: \"#car\", \/\/ You can also use a parent container if you want\n start: \"top 80%\", \/\/ when top of trigger hits 80% from top of viewport\n toggleActions: \"play none none none\" \/\/ play on enter\n }\n });\n\n \/\/ Example for second car\n gsap.to(\"#car2\", {\n duration: 6,\n repeat: 0,\n ease: \"power1.inOut\",\n motionPath: {\n path: \"#carRoad\",\n align: \"#carRoad\",\n alignOrigin: [0.5, 0.5],\n autoRotate: true,\n start: 1,\n end: 0\n },\n scrollTrigger: {\n trigger: \"#car2\",\n start: \"top 80%\",\n toggleActions: \"play none none none\"\n }\n });\n\n \/\/ Example for third car\n gsap.to(\"#car3\", {\n duration: 6,\n repeat: 0,\n ease: \"power1.inOut\",\n motionPath: {\n path: \"#carTrack\",\n align: \"#carTrack\",\n alignOrigin: [0.5, 0.5],\n autoRotate: true,\n start: 1,\n end: 0\n },\n scrollTrigger: {\n trigger: \"#car3\",\n start: \"top 80%\",\n toggleActions: \"play none none none\"\n }\n });\n\n \/\/ Example for fourth car\n gsap.to(\"#car4\", {\n duration: 3,\n repeat: 0,\n ease: \"power1.inOut\",\n motionPath: {\n path: \"#carNoTrack\",\n align: \"#carNoTrack\",\n alignOrigin: [0.5, 0.5],\n autoRotate: true,\n start: 1,\n end: 0\n },\n scrollTrigger: {\n trigger: \"#car4\",\n start: \"top 80%\",\n toggleActions: \"play none none none\"\n }\n });\n<\/script>\n<\/body>\n<\/html>\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Car Animation – Timeline 6:12 A.M. LOCKED Total Earned $0.00 Hours on Road 0H 0M Hourly Rate $0.00 As Mohamed […]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2008","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"jayeshcspl","author_link":"https:\/\/www.corsafacile.it\/en\/author\/jayeshcspl\/"},"uagb_comment_info":0,"uagb_excerpt":"Car Animation – Timeline 6:12 A.M. LOCKED Total Earned $0.00 Hours on Road 0H 0M Hourly Rate $0.00 As Mohamed […]","_links":{"self":[{"href":"https:\/\/www.corsafacile.it\/en\/wp-json\/wp\/v2\/posts\/2008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.corsafacile.it\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.corsafacile.it\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.corsafacile.it\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.corsafacile.it\/en\/wp-json\/wp\/v2\/comments?post=2008"}],"version-history":[{"count":108,"href":"https:\/\/www.corsafacile.it\/en\/wp-json\/wp\/v2\/posts\/2008\/revisions"}],"predecessor-version":[{"id":2200,"href":"https:\/\/www.corsafacile.it\/en\/wp-json\/wp\/v2\/posts\/2008\/revisions\/2200"}],"wp:attachment":[{"href":"https:\/\/www.corsafacile.it\/en\/wp-json\/wp\/v2\/media?parent=2008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.corsafacile.it\/en\/wp-json\/wp\/v2\/categories?post=2008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.corsafacile.it\/en\/wp-json\/wp\/v2\/tags?post=2008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n\n \n \n Car Animation – Timeline<\/title>\n\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;700&display=swap\" rel=\"stylesheet\">\n\n \n <style>\n .h-100 {\n height: 80px;\n }\n .unvisible {\n visibility: hidden;\n }\n .timeline {\n position: relative;\n max-width: 800px;\n margin: 0 auto;\n }\n .timeline::after {\n content: '';\n position: absolute;\n width: 5px;\n background: #2FAE3E;\n top: 0;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n }\n .timeline-item {\n position: relative;\n left: 0;\n width: 50%;\n padding: 0 20px;\n margin: 0;\n box-sizing: border-box;\n }\n \/*.timeline-item:nth-child(odd) {\n left: 0;\n }\n .timeline-item:nth-child(even) {\n left: 50%;\n }*\/\n .timeline-item-right {\n position: relative;\n left: 50%;\n width: 50%;\n padding: 0 20px;\n margin: 50px 0;\n box-sizing: border-box;\n color: #000;\n font-weight: bold;\n }\n .timeline-item-next {\n width: 50%;\n position: absolute;\n left: 100%;\n top: 0;\n font-weight: bold;\n color: #000;\n margin-left: 20px;\n }\n .timeline-item-next::before, .timeline-item-right::before {\n content: '';\n height: 3px;\n background-color: #2fae3e;\n width: 15px;\n display: block;\n left: -20px;\n position: relative;\n top: 0;\n }\n .timeline-item-next span, .timeline-item-right span {\n position: relative;\n top: -15px;\n display: inline-flex;\n }\n .timeline-item-next span i, .timeline-item-right span i {\n font-style: normal;\n }\n .timeline-img {\n width: 80px;\n height: 80px;\n overflow: hidden;\n border-radius: 50%;\n border: 4px solid #fff;\n box-shadow: 0 0 10px rgba(0,0,0,0.2);\n position: absolute;\n top: 20px;\n right: -40px;\n background: #fff;\n }\n .timeline-item:nth-child(even) .timeline-img {\n left: -40px;\n right: auto;\n }\n .timeline-img img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n .timeline-content {\n padding: 0 12px 12px 12px;\n border-radius: 5px;\n position: relative;\n background-color: #fff;\n \/*box-shadow: 0px 10px 11px rgba(0, 0, 0, 0.03);*\/\n }\n .timeline-content h3 {\n margin-top: 0;\n font-size: 20px;\n color: #333;\n }\n .timeline-content p {\n margin: 0;\n color: #555;\n }\n .timeline-box {\n background: #2FAE3E;\n color: #fff;\n padding: 8px;\n position: relative;\n }\n .timeline-background {\n position: relative;\n width: 100%;\n background-image: url('https:\/\/www.corsafacile.it\/wp-content\/uploads\/2025\/06\/us-ny.jpg');\n }\n .badge {\n color: #fff;\n background-color: #e78169;\n box-shadow: 1px 1px 3px 1px #e78169;\n margin: 3px 0 0 8px;\n padding: 3px;\n font-weight: 400;\n font-size: 14px;\n height: 20px;\n align-items: center;\n display: flex;\n }\n .badge-unlocked {\n color: #fff;\n background-color: #deb71d;\n box-shadow: 1px 1px 3px 1px #deb71d;\n margin: 3px 0 0 8px;\n padding: 3px;\n font-weight: 400;\n font-size: 14px;\n height: 20px;\n align-items: center;\n display: flex;\n }\n\n \/*table css*\/\n .custom-table {\n width: 180px;\n border-collapse: collapse;\n text-align: left;\n color: #333;\n border: 1px solid #555;\n }\n .custom-table th,\n .custom-table td {\n padding: 0;\n font-weight: 400;\n border: 0;\n font-size: 14px;\n }\n .custom-table thead tr {\n background: #333;\n }\n\n @media screen and (max-width: 768px) {\n .timeline::after {\n left: 20px;\n }\n .timeline-item {\n width: 100%;\n padding-left: 60px;\n padding-right: 20px;\n margin-bottom: 20px;\n }\n .timeline-item:nth-child(even) {\n left: 0;\n }\n .timeline-img {\n top: 0;\n left: 0;\n right: auto;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"timeline\">\n <div class=\"timeline-item\">\n \n <div class=\"timeline-content\">\n <div class=\"timeline-box\">\n \n <div class=\"timeline-background\">\n \n <svg id=\"mapSVG\" viewbox=\"0 0 260 300\" width=\"100%\" height=\"300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill:url(#img01);>\n \n <rect width=\"260\" height=\"300\" fill=\"none\" \/>\n \n \n <path id=\"carPath\" d=\"M 50 65 L 35 50\" stroke=\"none\" fill=\"none\" \/>\n \n \n <image id=\"car\" href=\"https:\/\/www.corsafacile.it\/wp-content\/uploads\/2025\/06\/carNew.svg\" width=\"30\" height=\"15\" \/>\n <\/svg>\n <\/div>\n\n \n \n <\/div>\n <\/div>\n <div class=\"timeline-item-next\">\n <span>6:12 A.M. <i class=\"badge\">LOCKED<\/i><\/span>\n <table class=\"custom-table\">\n <tbody>\n <tr>\n <td>Total Earned<\/td>\n <td>$0.00<\/td>\n <\/tr>\n <tr>\n <td>Hours on Road<\/td>\n <td>0H 0M<\/td>\n <\/tr>\n <tr>\n <td>Hourly Rate<\/td>\n <td>$0.00<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <p>As Mohamed leaves his home in New York for the day, he is locked out of Uber and Lyft for more than an hour.<\/p>\n <\/div>\n <div class=\"timeline-item-next\">\n <span>6:30<\/span>\n <\/div>\n <\/div>\n\n <div class=\"timeline-item-right h-100\">\n <span>7:00<\/span>\n <\/div>\n\n <div class=\"timeline-item-right h-100\">\n <span>7:30<\/span>\n <\/div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <div class=\"timeline-box\">\n \n <div class=\"timeline-background\">\n <svg id=\"mapSVG\" viewbox=\"0 0 195 200\" width=\"100%\" height=\"200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill:url(#img01);>\n \n <rect width=\"195\" height=\"300\" fill=\"none\" \/>\n \n <path id=\"carPath\" d=\"m32 81l-19-5 3-17-16-11 10-19-5-4 2-24 8-1c0 0 41.9 32.5 40 41z\" style=\"fill: none; stroke: #000; paint-order:stroke fill markers; stroke-linejoin: round; stroke-width: 2;\" \/>\n <path id=\"carRoad\" d=\"m32 81l-19-5 3-17-16-11 10-19-5-4 2-24 8-1c0 0 41.9 32.5 40 41z\" stroke=\"none\" fill=\"none\" \/>\n \n <image id=\"car2\" href=\"https:\/\/www.corsafacile.it\/wp-content\/uploads\/2025\/06\/carNew.svg\" width=\"30\" height=\"15\" \/>\n <\/svg>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"timeline-item-next h-100\">\n <span>7:37 A.M. <i class=\"badge-unlocked\">UNLOCKED<\/i><\/span>\n <table class=\"custom-table\">\n <tbody>\n <tr>\n <td>Total Earned<\/td>\n <td>$0.00<\/td>\n <\/tr>\n <tr>\n <td>Hours on Road<\/td>\n <td>0H 0M<\/td>\n <\/tr>\n <tr>\n <td>Hourly Rate<\/td>\n <td>$0.00<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <p>He gets unlocked by Uber, completes a ride in New York and gets locked out again.<\/p>\n <\/div>\n <div class=\"timeline-item-next\">\n <span>7:47 <i class=\"badge\">LOCKED<\/i><\/span>\n <\/div>\n <\/div>\n\n <div class=\"timeline-item-right\">\n <span>7:54 <i class=\"badge-unlocked\">UNLOCKED<\/i><\/span>\n <\/div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <p>After getting unlocked by Uber, he starts a ride from New York to Manhattan.<\/p>\n <\/div>\n <div class=\"timeline-item-next h-100\">\n <span>8:00<\/span>\n <\/div>\n <\/div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <div class=\"timeline-box\">\n \n <div class=\"timeline-background\">\n <svg id=\"mapSVG\" viewbox=\"0 0 235 435\" width=\"100%\" height=\"435\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill:url(#img01);>\n \n <rect width=\"235\" height=\"435\" fill=\"none\" \/>\n \n \n <path id=\"carPath\" d=\"m-12 400l26-40v-16c0 0 30.6-73.2 38-73 0 0 15.2-29.5 38-27 0 0 22.2-6.8 30 5l17 20c0 0 3.3 1.8-1 8l-8 32c0 0-2.7 11.2 2 16 0 0 8.3 15.8-10 24l-14 10-9 10c0 0-5.8 8.2-19 12 0 0-12.1 4.5-16 13 0 0-10.4 15.8-21 23 0 0-15.1 13.8-25 0 0 0-15.1-14.8-28-17z\" style=\"fill: none; stroke: #000; paint-order:stroke fill markers; stroke-linejoin: round; stroke-width: 2;\" \/>\n <path id=\"carTrack\" d=\"m-12 400l26-40v-16c0 0 30.6-73.2 38-73 0 0 15.2-29.5 38-27 0 0 22.2-6.8 30 5l17 20c0 0 3.3 1.8-1 8l-8 32c0 0-2.7 11.2 2 16 0 0 8.3 15.8-10 24l-14 10-9 10c0 0-5.8 8.2-19 12 0 0-12.1 4.5-16 13 0 0-10.4 15.8-21 23 0 0-15.1 13.8-25 0 0 0-15.1-14.8-28-17z\" stroke=\"none\" fill=\"none\" \/>\n \n <image id=\"car3\" href=\"https:\/\/www.corsafacile.it\/wp-content\/uploads\/2025\/06\/carNew.svg\" width=\"30\" height=\"15\" \/>\n <\/svg>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"timeline-item-next h-100\">\n <span>8:30<\/span>\n <\/div>\n <\/div>\n\n <div class=\"timeline-item-right h-100\">\n <table class=\"custom-table\" style=\"position: relative; top: -2px; margin-top: 0;\">\n <tbody>\n <tr>\n <td>Total Earned<\/td>\n <td>$0.00<\/td>\n <\/tr>\n <tr>\n <td>Hours on Road<\/td>\n <td>0H 0M<\/td>\n <\/tr>\n <tr>\n <td>Hourly Rate<\/td>\n <td>$0.00<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <div class=\"timeline-box\">\n \n <div class=\"timeline-background\">\n <svg id=\"mapSVG\" viewbox=\"0 0 175 150\" width=\"100%\" height=\"150\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill:url(#img01);>\n \n \n <rect width=\"175\" height=\"150\" fill=\"none\" \/>\n\n \n <path id=\"carNoTrack\" d=\"M 125 115 L 115 110\" stroke=\"red\" fill=\"none\" \/>\n\n \n <image id=\"car4\" href=\"https:\/\/www.corsafacile.it\/wp-content\/uploads\/2025\/06\/carNew.svg\" width=\"30\" height=\"15\" \/>\n <\/svg>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"timeline-item-next\">\n <span>9:13 <i class=\"badge\">LOCKED<\/i><\/span>\n <\/div>\n <\/div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-content\">\n <p>After the ride, he gets locked out again. \u201cThis is like every day,\u201d he says. Uber tells him the next time he can go online is 5 p.m.<\/p>\n <\/div>\n <div class=\"timeline-item-next\">\n <span>9:30<\/span>\n <\/div>\n <\/div>\n<\/div>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/MotionPathPlugin.min.js\"><\/script>\n\n<script>\n gsap.registerPlugin(MotionPathPlugin, ScrollTrigger);\n\n \/\/ Example for first car\n gsap.to(\"#car\", {\n duration: 3,\n repeat: 0,\n ease: \"power1.inOut\",\n motionPath: {\n path: \"#carPath\",\n align: \"#carPath\",\n alignOrigin: [0.5, 0.5],\n autoRotate: true,\n start: 1,\n end: 0\n },\n scrollTrigger: {\n trigger: \"#car\", \/\/ You can also use a parent container if you want\n start: \"top 80%\", \/\/ when top of trigger hits 80% from top of viewport\n toggleActions: \"play none none none\" \/\/ play on enter\n }\n });\n\n \/\/ Example for second car\n gsap.to(\"#car2\", {\n duration: 6,\n repeat: 0,\n ease: \"power1.inOut\",\n motionPath: {\n path: \"#carRoad\",\n align: \"#carRoad\",\n alignOrigin: [0.5, 0.5],\n autoRotate: true,\n start: 1,\n end: 0\n },\n scrollTrigger: {\n trigger: \"#car2\",\n start: \"top 80%\",\n toggleActions: \"play none none none\"\n }\n });\n\n \/\/ Example for third car\n gsap.to(\"#car3\", {\n duration: 6,\n repeat: 0,\n ease: \"power1.inOut\",\n motionPath: {\n path: \"#carTrack\",\n align: \"#carTrack\",\n alignOrigin: [0.5, 0.5],\n autoRotate: true,\n start: 1,\n end: 0\n },\n scrollTrigger: {\n trigger: \"#car3\",\n start: \"top 80%\",\n toggleActions: \"play none none none\"\n }\n });\n\n \/\/ Example for fourth car\n gsap.to(\"#car4\", {\n duration: 3,\n repeat: 0,\n ease: \"power1.inOut\",\n motionPath: {\n path: \"#carNoTrack\",\n align: \"#carNoTrack\",\n alignOrigin: [0.5, 0.5],\n autoRotate: true,\n start: 1,\n end: 0\n },\n scrollTrigger: {\n trigger: \"#car4\",\n start: \"top 80%\",\n toggleActions: \"play none none none\"\n }\n });\n<\/script>\n<\/body>\n<\/html>\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Car Animation – Timeline 6:12 A.M. LOCKED Total Earned $0.00 Hours on Road 0H 0M Hourly Rate $0.00 As Mohamed […]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2008","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"jayeshcspl","author_link":"https:\/\/www.corsafacile.it\/en\/author\/jayeshcspl\/"},"uagb_comment_info":0,"uagb_excerpt":"Car Animation – Timeline 6:12 A.M. LOCKED Total Earned $0.00 Hours on Road 0H 0M Hourly Rate $0.00 As Mohamed […]","_links":{"self":[{"href":"https:\/\/www.corsafacile.it\/en\/wp-json\/wp\/v2\/posts\/2008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.corsafacile.it\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.corsafacile.it\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.corsafacile.it\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.corsafacile.it\/en\/wp-json\/wp\/v2\/comments?post=2008"}],"version-history":[{"count":108,"href":"https:\/\/www.corsafacile.it\/en\/wp-json\/wp\/v2\/posts\/2008\/revisions"}],"predecessor-version":[{"id":2200,"href":"https:\/\/www.corsafacile.it\/en\/wp-json\/wp\/v2\/posts\/2008\/revisions\/2200"}],"wp:attachment":[{"href":"https:\/\/www.corsafacile.it\/en\/wp-json\/wp\/v2\/media?parent=2008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.corsafacile.it\/en\/wp-json\/wp\/v2\/categories?post=2008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.corsafacile.it\/en\/wp-json\/wp\/v2\/tags?post=2008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}