[{"data":1,"prerenderedAt":761},["ShallowReactive",2],{"\u002Fsamples\u002Fcountchange\u002F":3,"\u002Fsamples\u002Fcountchange\u002F-related":752,"$fkG05dkELonVl-UNwbiIMB3LqKhveEumRllmnp475lms":755},{"id":4,"title":5,"body":6,"date":738,"description":739,"extension":740,"head":741,"meta":742,"modifiedDate":743,"navigation":168,"path":744,"schemaOrg":741,"seo":745,"stem":746,"tag":747,"thumbnail":750,"__hash__":751},"samples\u002Fsamples\u002FcountChange.md","数値が変わっていくアニメーション",{"type":7,"value":8,"toc":734},"minimark",[9,15,18,22,26,29,32,36,39,42,99,358,730],[10,11],"content-title",{":date":12,":tags":13,":title":14},"date","tag","title",[16,17],"count-change",{},[19,20,21],"p",{},"カウントしながら目標の数値まで変わるアニメーションです。アニメーションの性質上、大きな数値への変化のほうが相性がいいです。",[23,24,25],"h2",{"id":25},"実装のポイント",[19,27,28],{},"数値の変化自体はGSAPを使うのが便利です。GSAPならオブジェクトのアニメーションも容易に可能です。",[19,30,31],{},"GSAPのCustomEaseを使って、アニメーションのイージングを調整し最初と最後をゆっくりし、中間はほぼ飛ばすようなイージングになっています。",[33,34],"blog-card",{"src":35},"https:\u002F\u002Fgsap.com\u002Fdocs\u002Fv3\u002FEases\u002FCustomEase\u002F",[19,37,38],{},"同時に一瞬で変化する中間部分を見せないようCSSアニメーションでブラーをかけて数値が変化しているのを表しています。CSSアニメーションとGSAPのアニメーションの時間は揃えておく必要があります。",[23,40,41],{"id":41},"コード例",[43,44,49],"pre",{"className":45,"code":46,"language":47,"meta":48,"style":48},"language-html shiki shiki-themes github-light github-dark monokai","\u003Cp class=\"sampleText\" data-target=\"10000\" data-start=\"0\">0\u003C\u002Fp>\n","html","",[50,51,52],"code",{"__ignoreMap":48},[53,54,57,61,64,68,71,75,78,80,83,86,88,91,94,96],"span",{"class":55,"line":56},"line",1,[53,58,60],{"class":59},"sMOD_","\u003C",[53,62,19],{"class":63},"s5clZ",[53,65,67],{"class":66},"srTi1"," class",[53,69,70],{"class":59},"=",[53,72,74],{"class":73},"sstjo","\"sampleText\"",[53,76,77],{"class":66}," data-target",[53,79,70],{"class":59},[53,81,82],{"class":73},"\"10000\"",[53,84,85],{"class":66}," data-start",[53,87,70],{"class":59},[53,89,90],{"class":73},"\"0\"",[53,92,93],{"class":59},">0\u003C\u002F",[53,95,19],{"class":63},[53,97,98],{"class":59},">\n",[43,100,104],{"className":101,"code":102,"language":103,"meta":48,"style":48},"language-css shiki shiki-themes github-light github-dark monokai",".sampleText {\n  &.isAnimation {\n    animation: blurAnimation 8s ease-in-out;\n  }\n}\n\n@keyframes blurAnimation {\n  0% {\n    filter: blur(0);\n  }\n\n  30% {\n    filter: blur(0);\n  }\n\n  50% {\n    filter: blur(16px);\n  }\n\n  70% {\n    filter: blur(0);\n  }\n\n  100% {\n    filter: blur(0);\n  }\n}\n","css",[50,105,106,114,126,151,157,163,170,182,191,212,217,222,230,245,250,255,263,282,287,292,300,315,320,325,333,348,353],{"__ignoreMap":48},[53,107,108,111],{"class":55,"line":56},[53,109,110],{"class":66},".sampleText",[53,112,113],{"class":59}," {\n",[53,115,117,120,124],{"class":55,"line":116},2,[53,118,119],{"class":59},"  &.",[53,121,123],{"class":122},"sXSQT","isAnimation",[53,125,113],{"class":59},[53,127,129,133,136,140,144,148],{"class":55,"line":128},3,[53,130,132],{"class":131},"s-m8C","    animation",[53,134,135],{"class":59},": blurAnimation ",[53,137,139],{"class":138},"s7F3e","8",[53,141,143],{"class":142},"sC2Qs","s",[53,145,147],{"class":146},"sTrkL"," ease-in-out",[53,149,150],{"class":59},";\n",[53,152,154],{"class":55,"line":153},4,[53,155,156],{"class":59},"  }\n",[53,158,160],{"class":55,"line":159},5,[53,161,162],{"class":59},"}\n",[53,164,166],{"class":55,"line":165},6,[53,167,169],{"emptyLinePlaceholder":168},true,"\n",[53,171,173,176,180],{"class":55,"line":172},7,[53,174,175],{"class":142},"@keyframes",[53,177,179],{"class":178},"sTHNf"," blurAnimation",[53,181,113],{"class":59},[53,183,185,189],{"class":55,"line":184},8,[53,186,188],{"class":187},"s_OQ2","  0%",[53,190,113],{"class":59},[53,192,194,197,200,203,206,209],{"class":55,"line":193},9,[53,195,196],{"class":131},"    filter",[53,198,199],{"class":59},": ",[53,201,202],{"class":146},"blur",[53,204,205],{"class":59},"(",[53,207,208],{"class":138},"0",[53,210,211],{"class":59},");\n",[53,213,215],{"class":55,"line":214},10,[53,216,156],{"class":59},[53,218,220],{"class":55,"line":219},11,[53,221,169],{"emptyLinePlaceholder":168},[53,223,225,228],{"class":55,"line":224},12,[53,226,227],{"class":187},"  30%",[53,229,113],{"class":59},[53,231,233,235,237,239,241,243],{"class":55,"line":232},13,[53,234,196],{"class":131},[53,236,199],{"class":59},[53,238,202],{"class":146},[53,240,205],{"class":59},[53,242,208],{"class":138},[53,244,211],{"class":59},[53,246,248],{"class":55,"line":247},14,[53,249,156],{"class":59},[53,251,253],{"class":55,"line":252},15,[53,254,169],{"emptyLinePlaceholder":168},[53,256,258,261],{"class":55,"line":257},16,[53,259,260],{"class":187},"  50%",[53,262,113],{"class":59},[53,264,266,268,270,272,274,277,280],{"class":55,"line":265},17,[53,267,196],{"class":131},[53,269,199],{"class":59},[53,271,202],{"class":146},[53,273,205],{"class":59},[53,275,276],{"class":138},"16",[53,278,279],{"class":142},"px",[53,281,211],{"class":59},[53,283,285],{"class":55,"line":284},18,[53,286,156],{"class":59},[53,288,290],{"class":55,"line":289},19,[53,291,169],{"emptyLinePlaceholder":168},[53,293,295,298],{"class":55,"line":294},20,[53,296,297],{"class":187},"  70%",[53,299,113],{"class":59},[53,301,303,305,307,309,311,313],{"class":55,"line":302},21,[53,304,196],{"class":131},[53,306,199],{"class":59},[53,308,202],{"class":146},[53,310,205],{"class":59},[53,312,208],{"class":138},[53,314,211],{"class":59},[53,316,318],{"class":55,"line":317},22,[53,319,156],{"class":59},[53,321,323],{"class":55,"line":322},23,[53,324,169],{"emptyLinePlaceholder":168},[53,326,328,331],{"class":55,"line":327},24,[53,329,330],{"class":187},"  100%",[53,332,113],{"class":59},[53,334,336,338,340,342,344,346],{"class":55,"line":335},25,[53,337,196],{"class":131},[53,339,199],{"class":59},[53,341,202],{"class":146},[53,343,205],{"class":59},[53,345,208],{"class":138},[53,347,211],{"class":59},[53,349,351],{"class":55,"line":350},26,[53,352,156],{"class":59},[53,354,356],{"class":55,"line":355},27,[53,357,162],{"class":59},[43,359,363],{"className":360,"code":361,"language":362,"meta":48,"style":48},"language-js shiki shiki-themes github-light github-dark monokai","import { gsap } from \"gsap\";\nimport { CustomEase } from \"gsap\u002FCustomEase\";\nconst DURATION = 8;\n\n\u002F\u002F カスタムイージング機能の登録\ngsap.registerPlugin(CustomEase);\n\nconst element = document.querySelector(\".sampleText\");\n\n\u002F\u002F 初期値\nconst start = Number(element.dataset.start ?? 0);\n\n\u002F\u002F 目標値\nconst target = Number(element.dataset.target ?? 0);\n\nconst counter = { value: start };\nelement.textContent = String(start);\n\n\u002F\u002F イージング関数\nconst ease =\n  \"M0,0 C0.485,0 0.5,0 0.5,0.042 0.5,0.064 0.5,0.63 0.5,0.958 0.5,0.987 0.329,1 1,1 \";\n  \ngsap.to(counter, {\n  value: target,\n  duration: DURATION,\n  ease: CustomEase.create(\"custom\", ease),\n  onStart: () => {\n    element.classList.add(\"isAnimation\");\n  },\n  onComplete: () => {\n    element.classList.remove(\"isAnimation\");\n  },\n  onUpdate: () => {\n    element.textContent = String(Math.round(counter.value));\n  },\n});\n","js",[50,364,365,381,395,412,416,422,433,437,459,463,468,491,495,500,520,524,536,549,553,558,568,575,580,590,595,606,622,635,651,657,669,683,688,700,719,724],{"__ignoreMap":48},[53,366,367,370,373,376,379],{"class":55,"line":56},[53,368,369],{"class":142},"import",[53,371,372],{"class":59}," { gsap } ",[53,374,375],{"class":142},"from",[53,377,378],{"class":73}," \"gsap\"",[53,380,150],{"class":59},[53,382,383,385,388,390,393],{"class":55,"line":116},[53,384,369],{"class":142},[53,386,387],{"class":59}," { CustomEase } ",[53,389,375],{"class":142},[53,391,392],{"class":73}," \"gsap\u002FCustomEase\"",[53,394,150],{"class":59},[53,396,397,401,404,407,410],{"class":55,"line":128},[53,398,400],{"class":399},"sq6CD","const",[53,402,403],{"class":122}," DURATION",[53,405,406],{"class":142}," =",[53,408,409],{"class":138}," 8",[53,411,150],{"class":59},[53,413,414],{"class":55,"line":153},[53,415,169],{"emptyLinePlaceholder":168},[53,417,418],{"class":55,"line":159},[53,419,421],{"class":420},"s8-w5","\u002F\u002F カスタムイージング機能の登録\n",[53,423,424,427,430],{"class":55,"line":165},[53,425,426],{"class":59},"gsap.",[53,428,429],{"class":66},"registerPlugin",[53,431,432],{"class":59},"(CustomEase);\n",[53,434,435],{"class":55,"line":172},[53,436,169],{"emptyLinePlaceholder":168},[53,438,439,441,444,446,449,452,454,457],{"class":55,"line":184},[53,440,400],{"class":399},[53,442,443],{"class":122}," element",[53,445,406],{"class":142},[53,447,448],{"class":59}," document.",[53,450,451],{"class":66},"querySelector",[53,453,205],{"class":59},[53,455,456],{"class":73},"\".sampleText\"",[53,458,211],{"class":59},[53,460,461],{"class":55,"line":193},[53,462,169],{"emptyLinePlaceholder":168},[53,464,465],{"class":55,"line":214},[53,466,467],{"class":420},"\u002F\u002F 初期値\n",[53,469,470,472,475,477,480,483,486,489],{"class":55,"line":219},[53,471,400],{"class":399},[53,473,474],{"class":122}," start",[53,476,406],{"class":142},[53,478,479],{"class":66}," Number",[53,481,482],{"class":59},"(element.dataset.start ",[53,484,485],{"class":142},"??",[53,487,488],{"class":138}," 0",[53,490,211],{"class":59},[53,492,493],{"class":55,"line":224},[53,494,169],{"emptyLinePlaceholder":168},[53,496,497],{"class":55,"line":232},[53,498,499],{"class":420},"\u002F\u002F 目標値\n",[53,501,502,504,507,509,511,514,516,518],{"class":55,"line":247},[53,503,400],{"class":399},[53,505,506],{"class":122}," target",[53,508,406],{"class":142},[53,510,479],{"class":66},[53,512,513],{"class":59},"(element.dataset.target ",[53,515,485],{"class":142},[53,517,488],{"class":138},[53,519,211],{"class":59},[53,521,522],{"class":55,"line":252},[53,523,169],{"emptyLinePlaceholder":168},[53,525,526,528,531,533],{"class":55,"line":257},[53,527,400],{"class":399},[53,529,530],{"class":122}," counter",[53,532,406],{"class":142},[53,534,535],{"class":59}," { value: start };\n",[53,537,538,541,543,546],{"class":55,"line":265},[53,539,540],{"class":59},"element.textContent ",[53,542,70],{"class":142},[53,544,545],{"class":66}," String",[53,547,548],{"class":59},"(start);\n",[53,550,551],{"class":55,"line":284},[53,552,169],{"emptyLinePlaceholder":168},[53,554,555],{"class":55,"line":289},[53,556,557],{"class":420},"\u002F\u002F イージング関数\n",[53,559,560,562,565],{"class":55,"line":294},[53,561,400],{"class":399},[53,563,564],{"class":122}," ease",[53,566,567],{"class":142}," =\n",[53,569,570,573],{"class":55,"line":302},[53,571,572],{"class":73},"  \"M0,0 C0.485,0 0.5,0 0.5,0.042 0.5,0.064 0.5,0.63 0.5,0.958 0.5,0.987 0.329,1 1,1 \"",[53,574,150],{"class":59},[53,576,577],{"class":55,"line":317},[53,578,579],{"class":59},"  \n",[53,581,582,584,587],{"class":55,"line":322},[53,583,426],{"class":59},[53,585,586],{"class":66},"to",[53,588,589],{"class":59},"(counter, {\n",[53,591,592],{"class":55,"line":327},[53,593,594],{"class":59},"  value: target,\n",[53,596,597,600,603],{"class":55,"line":335},[53,598,599],{"class":59},"  duration: ",[53,601,602],{"class":122},"DURATION",[53,604,605],{"class":59},",\n",[53,607,608,611,614,616,619],{"class":55,"line":350},[53,609,610],{"class":59},"  ease: CustomEase.",[53,612,613],{"class":66},"create",[53,615,205],{"class":59},[53,617,618],{"class":73},"\"custom\"",[53,620,621],{"class":59},", ease),\n",[53,623,624,627,630,633],{"class":55,"line":355},[53,625,626],{"class":66},"  onStart",[53,628,629],{"class":59},": () ",[53,631,632],{"class":399},"=>",[53,634,113],{"class":59},[53,636,638,641,644,646,649],{"class":55,"line":637},28,[53,639,640],{"class":59},"    element.classList.",[53,642,643],{"class":66},"add",[53,645,205],{"class":59},[53,647,648],{"class":73},"\"isAnimation\"",[53,650,211],{"class":59},[53,652,654],{"class":55,"line":653},29,[53,655,656],{"class":59},"  },\n",[53,658,660,663,665,667],{"class":55,"line":659},30,[53,661,662],{"class":66},"  onComplete",[53,664,629],{"class":59},[53,666,632],{"class":399},[53,668,113],{"class":59},[53,670,672,674,677,679,681],{"class":55,"line":671},31,[53,673,640],{"class":59},[53,675,676],{"class":66},"remove",[53,678,205],{"class":59},[53,680,648],{"class":73},[53,682,211],{"class":59},[53,684,686],{"class":55,"line":685},32,[53,687,656],{"class":59},[53,689,691,694,696,698],{"class":55,"line":690},33,[53,692,693],{"class":66},"  onUpdate",[53,695,629],{"class":59},[53,697,632],{"class":399},[53,699,113],{"class":59},[53,701,703,706,708,710,713,716],{"class":55,"line":702},34,[53,704,705],{"class":59},"    element.textContent ",[53,707,70],{"class":142},[53,709,545],{"class":66},[53,711,712],{"class":59},"(Math.",[53,714,715],{"class":66},"round",[53,717,718],{"class":59},"(counter.value));\n",[53,720,722],{"class":55,"line":721},35,[53,723,656],{"class":59},[53,725,727],{"class":55,"line":726},36,[53,728,729],{"class":59},"});\n",[731,732,733],"style",{},"html pre.shiki code .sMOD_, html code.shiki .sMOD_{--shiki-default:#24292E;--shiki-dark:#E1E4E8;--shiki-sepia:#F8F8F2}html pre.shiki code .s5clZ, html code.shiki .s5clZ{--shiki-default:#22863A;--shiki-dark:#85E89D;--shiki-sepia:#F92672}html pre.shiki code .srTi1, html code.shiki .srTi1{--shiki-default:#6F42C1;--shiki-dark:#B392F0;--shiki-sepia:#A6E22E}html pre.shiki code .sstjo, html code.shiki .sstjo{--shiki-default:#032F62;--shiki-dark:#9ECBFF;--shiki-sepia:#E6DB74}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 .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html pre.shiki code .sXSQT, html code.shiki .sXSQT{--shiki-default:#005CC5;--shiki-dark:#79B8FF;--shiki-sepia:#F8F8F2}html pre.shiki code .s-m8C, html code.shiki .s-m8C{--shiki-default:#005CC5;--shiki-default-font-style:inherit;--shiki-dark:#79B8FF;--shiki-dark-font-style:inherit;--shiki-sepia:#66D9EF;--shiki-sepia-font-style:italic}html pre.shiki code .s7F3e, html code.shiki .s7F3e{--shiki-default:#005CC5;--shiki-dark:#79B8FF;--shiki-sepia:#AE81FF}html pre.shiki code .sC2Qs, html code.shiki .sC2Qs{--shiki-default:#D73A49;--shiki-dark:#F97583;--shiki-sepia:#F92672}html pre.shiki code .sTrkL, html code.shiki .sTrkL{--shiki-default:#005CC5;--shiki-dark:#79B8FF;--shiki-sepia:#66D9EF}html pre.shiki code .sTHNf, html code.shiki .sTHNf{--shiki-default:#E36209;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit;--shiki-sepia:#FD971F;--shiki-sepia-font-style:italic}html pre.shiki code .s_OQ2, html code.shiki .s_OQ2{--shiki-default:#6F42C1;--shiki-dark:#B392F0;--shiki-sepia:#F8F8F2}html pre.shiki code .sq6CD, html code.shiki .sq6CD{--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit;--shiki-sepia:#66D9EF;--shiki-sepia-font-style:italic}html pre.shiki code .s8-w5, html code.shiki .s8-w5{--shiki-default:#6A737D;--shiki-dark:#6A737D;--shiki-sepia:#88846F}",{"title":48,"searchDepth":116,"depth":116,"links":735},[736,737],{"id":25,"depth":116,"text":25},{"id":41,"depth":116,"text":41},"2026-05-07","メニューを開くと左からアイテムが出現してくるアニメーションです。","md",null,{"ogTitle":5},"2025-05-07","\u002Fsamples\u002Fcountchange",{"title":5,"description":739},"samples\u002FcountChange",[748,749],"number","gsap","countChange.avif","033ssIAYSfqySi1bu6iUr82twduhgIKaD1wkJQchLsw",[753],{"id":4,"title":5,"thumbnail":750,"path":744,"tag":754},[748,749],{"title":756,"siteName":48,"description":757,"image":758,"url":759,"icon":760},"CustomEase | GSAP | Docs & Learning","Description","\u002Fimages\u002Fog\u002F806ad2e5f4bc4d196052936fd897f6e7.png","https:\u002F\u002Fgsap.com\u002Fdocs\u002Fv3\u002FEases\u002FCustomEase","\u002Fimages\u002Fog\u002F927d633cf8611639cc6dcc61ab07fce9.png",1778062751210]