[{"data":1,"prerenderedAt":592},["ShallowReactive",2],{"article-0050_dummy_article":3,"surround-\u002Farticle\u002F0050_dummy_article":586},{"id":4,"title":5,"body":6,"date":563,"description":564,"extension":565,"images":566,"meta":571,"navigation":572,"path":573,"seo":574,"stem":575,"tags":576,"thumbnail":32,"tools":581,"__hash__":585},"articles\u002Farticle\u002F0050_dummy_article.md","From Motion Graphics to JavaScript",{"type":7,"value":8,"toc":558},"minimark",[9,13,18,26,104,107,321,324,328,335,440,446,544,547,551,554],[10,11,12],"p",{},"A lot of the most interesting animation happening right now isn't in video — it's in browsers. Scroll-triggered reveals, type that follows the cursor, interactive data viz. Same goal as motion work, totally different pipeline.",[14,15,17],"h2",{"id":16},"what-carries-over","What carries over",[10,19,20,21,25],{},"Easing vocabulary is identical. ",[22,23,24],"code",{},"ease-in-out",", bezier curves — same model as After Effects, different syntax:",[27,28,33],"pre",{"className":29,"code":30,"language":31,"meta":32,"style":32},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".box {\n  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n","css","",[22,34,35,51,98],{"__ignoreMap":32},[36,37,40,44,48],"span",{"class":38,"line":39},"line",1,[36,41,43],{"class":42},"sMK4o",".",[36,45,47],{"class":46},"sBMFI","box",[36,49,50],{"class":42}," {\n",[36,52,54,58,61,65,69,73,76,79,82,85,87,90,92,95],{"class":38,"line":53},2,[36,55,57],{"class":56},"sqsOY","  transition",[36,59,60],{"class":42},":",[36,62,64],{"class":63},"sTEyZ"," transform ",[36,66,68],{"class":67},"sbssI","0.4s",[36,70,72],{"class":71},"s2Zo4"," cubic-bezier",[36,74,75],{"class":42},"(",[36,77,78],{"class":67},"0.25",[36,80,81],{"class":42},",",[36,83,84],{"class":67}," 0.1",[36,86,81],{"class":42},[36,88,89],{"class":67}," 0.25",[36,91,81],{"class":42},[36,93,94],{"class":67}," 1",[36,96,97],{"class":42},");\n",[36,99,101],{"class":38,"line":100},3,[36,102,103],{"class":42},"}\n",[10,105,106],{},"And GSAP's timeline API maps almost directly to how you already think:",[27,108,112],{"className":109,"code":110,"language":111,"meta":32,"style":32},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","gsap.timeline()\n  .from(\".headline\", { opacity: 0, y: 40, duration: 0.6, ease: \"power2.out\" })\n  .from(\".subhead\",  { opacity: 0, y: 20, duration: 0.4, ease: \"power2.out\" }, \"-=0.2\")\n  .from(\".body\",     { opacity: 0,         duration: 0.3 }, \"-=0.1\");\n","js",[22,113,114,127,201,269],{"__ignoreMap":32},[36,115,116,119,121,124],{"class":38,"line":39},[36,117,118],{"class":63},"gsap",[36,120,43],{"class":42},[36,122,123],{"class":71},"timeline",[36,125,126],{"class":63},"()\n",[36,128,129,132,135,137,140,144,146,148,151,155,157,160,162,165,167,170,172,175,177,180,182,185,187,190,193,195,198],{"class":38,"line":53},[36,130,131],{"class":42},"  .",[36,133,134],{"class":71},"from",[36,136,75],{"class":63},[36,138,139],{"class":42},"\"",[36,141,143],{"class":142},"sfazB",".headline",[36,145,139],{"class":42},[36,147,81],{"class":42},[36,149,150],{"class":42}," {",[36,152,154],{"class":153},"swJcz"," opacity",[36,156,60],{"class":42},[36,158,159],{"class":67}," 0",[36,161,81],{"class":42},[36,163,164],{"class":153}," y",[36,166,60],{"class":42},[36,168,169],{"class":67}," 40",[36,171,81],{"class":42},[36,173,174],{"class":153}," duration",[36,176,60],{"class":42},[36,178,179],{"class":67}," 0.6",[36,181,81],{"class":42},[36,183,184],{"class":153}," ease",[36,186,60],{"class":42},[36,188,189],{"class":42}," \"",[36,191,192],{"class":142},"power2.out",[36,194,139],{"class":42},[36,196,197],{"class":42}," }",[36,199,200],{"class":63},")\n",[36,202,203,205,207,209,211,214,216,218,221,223,225,227,229,231,233,236,238,240,242,245,247,249,251,253,255,257,260,262,265,267],{"class":38,"line":100},[36,204,131],{"class":42},[36,206,134],{"class":71},[36,208,75],{"class":63},[36,210,139],{"class":42},[36,212,213],{"class":142},".subhead",[36,215,139],{"class":42},[36,217,81],{"class":42},[36,219,220],{"class":42},"  {",[36,222,154],{"class":153},[36,224,60],{"class":42},[36,226,159],{"class":67},[36,228,81],{"class":42},[36,230,164],{"class":153},[36,232,60],{"class":42},[36,234,235],{"class":67}," 20",[36,237,81],{"class":42},[36,239,174],{"class":153},[36,241,60],{"class":42},[36,243,244],{"class":67}," 0.4",[36,246,81],{"class":42},[36,248,184],{"class":153},[36,250,60],{"class":42},[36,252,189],{"class":42},[36,254,192],{"class":142},[36,256,139],{"class":42},[36,258,259],{"class":42}," },",[36,261,189],{"class":42},[36,263,264],{"class":142},"-=0.2",[36,266,139],{"class":42},[36,268,200],{"class":63},[36,270,272,274,276,278,280,283,285,287,290,292,294,296,298,301,303,306,308,310,313,315,318],{"class":38,"line":271},4,[36,273,131],{"class":42},[36,275,134],{"class":71},[36,277,75],{"class":63},[36,279,139],{"class":42},[36,281,282],{"class":142},".body",[36,284,139],{"class":42},[36,286,81],{"class":42},[36,288,289],{"class":42},"     {",[36,291,154],{"class":153},[36,293,60],{"class":42},[36,295,159],{"class":67},[36,297,81],{"class":42},[36,299,300],{"class":153},"         duration",[36,302,60],{"class":42},[36,304,305],{"class":67}," 0.3",[36,307,259],{"class":42},[36,309,189],{"class":42},[36,311,312],{"class":142},"-=0.1",[36,314,139],{"class":42},[36,316,317],{"class":63},")",[36,319,320],{"class":42},";\n",[10,322,323],{},"Tweens, sequencing, overlap offsets — same mental model.",[14,325,327],{"id":326},"whats-new","What's new",[10,329,330,334],{},[331,332,333],"strong",{},"Events"," replace the render button. Animation responds to what the user does:",[27,336,338],{"className":109,"code":337,"language":111,"meta":32,"style":32},"document.querySelector(\".btn\").addEventListener(\"mouseenter\", () => {\n  gsap.to(\".btn\", { scale: 1.05, duration: 0.2 });\n});\n",[22,339,340,386,431],{"__ignoreMap":32},[36,341,342,345,347,350,352,354,357,359,361,363,366,368,370,373,375,377,380,384],{"class":38,"line":39},[36,343,344],{"class":63},"document",[36,346,43],{"class":42},[36,348,349],{"class":71},"querySelector",[36,351,75],{"class":63},[36,353,139],{"class":42},[36,355,356],{"class":142},".btn",[36,358,139],{"class":42},[36,360,317],{"class":63},[36,362,43],{"class":42},[36,364,365],{"class":71},"addEventListener",[36,367,75],{"class":63},[36,369,139],{"class":42},[36,371,372],{"class":142},"mouseenter",[36,374,139],{"class":42},[36,376,81],{"class":42},[36,378,379],{"class":42}," ()",[36,381,383],{"class":382},"spNyl"," =>",[36,385,50],{"class":42},[36,387,388,391,393,396,398,400,402,404,406,408,411,413,416,418,420,422,425,427,429],{"class":38,"line":53},[36,389,390],{"class":63},"  gsap",[36,392,43],{"class":42},[36,394,395],{"class":71},"to",[36,397,75],{"class":153},[36,399,139],{"class":42},[36,401,356],{"class":142},[36,403,139],{"class":42},[36,405,81],{"class":42},[36,407,150],{"class":42},[36,409,410],{"class":153}," scale",[36,412,60],{"class":42},[36,414,415],{"class":67}," 1.05",[36,417,81],{"class":42},[36,419,174],{"class":153},[36,421,60],{"class":42},[36,423,424],{"class":67}," 0.2",[36,426,197],{"class":42},[36,428,317],{"class":153},[36,430,320],{"class":42},[36,432,433,436,438],{"class":38,"line":100},[36,434,435],{"class":42},"}",[36,437,317],{"class":63},[36,439,320],{"class":42},[10,441,442,445],{},[331,443,444],{},"ScrollTrigger"," is where things get fun:",[27,447,449],{"className":109,"code":448,"language":111,"meta":32,"style":32},"gsap.from(\".panel\", {\n  scrollTrigger: { trigger: \".panel\", start: \"top 80%\" },\n  opacity: 0, y: 60, duration: 0.8\n});\n",[22,450,451,472,509,536],{"__ignoreMap":32},[36,452,453,455,457,459,461,463,466,468,470],{"class":38,"line":39},[36,454,118],{"class":63},[36,456,43],{"class":42},[36,458,134],{"class":71},[36,460,75],{"class":63},[36,462,139],{"class":42},[36,464,465],{"class":142},".panel",[36,467,139],{"class":42},[36,469,81],{"class":42},[36,471,50],{"class":42},[36,473,474,477,479,481,484,486,488,490,492,494,497,499,501,504,506],{"class":38,"line":53},[36,475,476],{"class":153},"  scrollTrigger",[36,478,60],{"class":42},[36,480,150],{"class":42},[36,482,483],{"class":153}," trigger",[36,485,60],{"class":42},[36,487,189],{"class":42},[36,489,465],{"class":142},[36,491,139],{"class":42},[36,493,81],{"class":42},[36,495,496],{"class":153}," start",[36,498,60],{"class":42},[36,500,189],{"class":42},[36,502,503],{"class":142},"top 80%",[36,505,139],{"class":42},[36,507,508],{"class":42}," },\n",[36,510,511,514,516,518,520,522,524,527,529,531,533],{"class":38,"line":100},[36,512,513],{"class":153},"  opacity",[36,515,60],{"class":42},[36,517,159],{"class":67},[36,519,81],{"class":42},[36,521,164],{"class":153},[36,523,60],{"class":42},[36,525,526],{"class":67}," 60",[36,528,81],{"class":42},[36,530,174],{"class":153},[36,532,60],{"class":42},[36,534,535],{"class":67}," 0.8\n",[36,537,538,540,542],{"class":38,"line":271},[36,539,435],{"class":42},[36,541,317],{"class":63},[36,543,320],{"class":42},[10,545,546],{},"No render button. Save, switch to browser, refresh. The feedback loop is tight.",[14,548,550],{"id":549},"where-to-start","Where to start",[10,552,553],{},"Install GSAP, open a blank HTML file, and try to recreate something you've already built in After Effects. The translation work teaches you more than any tutorial.",[555,556,557],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":32,"searchDepth":53,"depth":53,"links":559},[560,561,562],{"id":16,"depth":53,"text":17},{"id":326,"depth":53,"text":327},{"id":549,"depth":53,"text":550},"22 January,2026","CSS animations and JavaScript give motion designers a new canvas. Here's what the transition actually looks like, and why your existing skills matter more than you'd think.","md",[567,569],{"src":32,"alt":568},"A VS Code editor showing a GSAP timeline animation script",{"src":32,"alt":570},"A browser preview of a smooth text reveal animation built with CSS",{},true,"\u002Farticle\u002F0050_dummy_article",{"title":5,"description":564},"article\u002F0050_dummy_article",[577,578,579,31,580],"javascript","web animation","GSAP","career",[582,583,579,584],"JavaScript","CSS","VS Code","lsoXFcI0ptA7ssvcDxiaGQ3jZvAT8V4nK46u5qz208g",[587,591],{"title":588,"path":589,"stem":590,"children":-1},"Generative Art and Animation","\u002Farticle\u002F0040_dummy_article","article\u002F0040_dummy_article",null,1776374632763]