{"id":45244,"date":"2025-09-06T21:15:09","date_gmt":"2025-09-06T18:15:09","guid":{"rendered":"https:\/\/rss.eground-zerkalo.com\/?p=45244"},"modified":"2025-09-06T21:15:09","modified_gmt":"2025-09-06T18:15:09","slug":"web-%d0%b0%d0%bd%d0%b8%d0%bc%d0%b0%d1%86%d0%b8%d1%8f-emil-kowalski","status":"publish","type":"post","link":"https:\/\/rss.eground-zerkalo.com\/?p=45244","title":{"rendered":"Web \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f [Emil Kowalski]"},"content":{"rendered":"

\u0421\u043a\u043b\u0430\u0434\u0447\u0438\u043d\u0430: Web \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f [Emil Kowalski]<\/h2>\n

\t\t\t\t\tAnimation on the Web<\/b>
\u042f\u0437\u044b\u043a: \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439<\/p>\n

\t \t\"2025-09-07_002927.png\" \t\t <\/p>\n

\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e?<\/b>
\u0418\u0437\u0443\u0447\u0438\u0442\u0435 \u0442\u0435\u043e\u0440\u0438\u044e \u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0443 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0435\u043b\u0438\u043a\u043e\u043b\u0435\u043f\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043e\u0431\u0443\u0447\u0430\u044e\u0449\u0435\u0433\u043e \u043a\u0443\u0440\u0441\u0430.<\/p>\n

\u0427\u0442\u043e, \u0435\u0441\u043b\u0438 \u0431\u044b \u0432\u044b \u0437\u043d\u0430\u043b\u0438, \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438?<\/b>
\u0415\u0441\u043b\u0438 \u0431\u044b \u0432\u044b \u0437\u043d\u0430\u043b\u0438, \u0438\u0437 \u0447\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f, \u0432\u044b \u0431\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u043b\u0438, \u043a\u0430\u043a\u043e\u0439 \u0442\u0438\u043f \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0443\u0436\u043d\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435.
\u0412\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0442\u044c \u0433\u0430\u0434\u0430\u0442\u044c: \u00ab\u0421\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u0438 \u044d\u0442\u043e \u0441\u043c\u044f\u0433\u0447\u0435\u043d\u0438\u0435?\u00bb \u0438\u043b\u0438 \u00ab\u041d\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043b\u0438 \u0434\u043b\u0438\u043d\u043d\u044b\u0439 \u044d\u0442\u043e\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434?\u00bb, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u044b \u0431\u044b \u0437\u043d\u0430\u043b\u0438, \u0447\u0442\u043e \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u044b.
\u0418 \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435: \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0432\u0430\u0448\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c.<\/p>\n

\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435, \u0432 \u0445\u043e\u0434\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432\u044b \u0438\u0437\u0443\u0447\u0438\u0442\u0435<\/b>
\u0442\u0435\u043e\u0440\u0438\u044e \u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0443 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0435\u043b\u0438\u043a\u043e\u043b\u0435\u043f\u043d\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439
\u00ab\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432 \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435\u00bb \u2014 \u044d\u0442\u043e \u043a\u0443\u0440\u0441, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0432\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0438 \u0442\u0430\u0439\u043c\u0438\u043d\u0433, \u043a\u0430\u043a \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u0432\u043a\u0443\u0441, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043f\u0440\u0443\u0436\u0438\u043d\u043d\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435.
\u0412\u044b \u043d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u043d\u0430\u0447\u043d\u0451\u0442\u0435 \u0431\u044b\u0442\u044c \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u043c \u0432 \u0441\u0432\u043e\u0451\u043c \u0432\u044b\u0431\u043e\u0440\u0435, \u0430 \u043d\u0435 \u0433\u0430\u0434\u0430\u0442\u044c, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.
\u0418 \u0432\u0441\u0451 \u044d\u0442\u043e \u043d\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u0443\u0440\u0441\u0430.
\u041f\u043e\u0441\u043b\u0435 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043e\u0440\u0438\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435. \u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u043d\u043e\u0433\u043e \u0447\u0435\u0433\u043e, \u0438 \u0431\u0443\u0434\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0443\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u0439, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a \u0432\u044b \u043d\u0430\u0443\u0447\u0438\u0442\u0435\u0441\u044c \u0431\u043e\u043b\u044c\u0448\u0435\u043c\u0443. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u0438\u0445 \u0443\u0440\u043e\u043a\u043e\u0432 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0442\u043e\u0447\u043d\u043e \u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0435 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 Framer Motion.<\/p>\n

\u0427\u0442\u043e \u0442\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0448\u044c<\/b>
\u041d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 4 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0438 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u044f \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u044b\u043c\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f\u043c\u0438, \u0432\u044b
\u0443\u0437\u043d\u0430\u0435\u0442\u0435 \u0432\u0441\u0451, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u0442\u0440\u044f\u0441\u0430\u044e\u0449\u0438\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435.<\/p>\n

\u041c\u043e\u0434\u0443\u043b\u044c 1. \u0417\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u044d\u0442\u043e \u0447\u0443\u0432\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0431\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e<\/b>
\u041c\u044b \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u0435\u043e\u0440\u0438\u044e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0432\u043a\u0443\u0441\u0435, \u043f\u0440\u0443\u0436\u0438\u043d\u044f\u0449\u0435\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0442\u0430\u0439\u043c\u0438\u043d\u0433\u0435, \u0446\u0435\u043b\u0438 \u0438 \u043c\u043d\u043e\u0433\u043e\u043c \u0434\u0440\u0443\u0433\u043e\u043c. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f \u0432\u044b \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u0435\u0442\u0435 \u0433\u0430\u0434\u0430\u0442\u044c. \u0412\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0442\u043e\u0447\u043d\u043e \u0437\u043d\u0430\u0442\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u043b\u043e\u0445\u043e \u0438 \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0435 \u043b\u0443\u0447\u0448\u0435.<\/p>\n

\u041c\u043e\u0434\u0443\u043b\u044c 2. CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f<\/b>
\u041c\u044b \u043f\u043e\u0437\u0430\u0431\u043e\u0442\u0438\u043c\u0441\u044f \u043e \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043e\u0441\u0432\u043e\u0438\u043b\u0438 \u043e\u0441\u043d\u043e\u0432\u044b CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u0437\u043d\u0430\u043b\u0438, \u043a\u043e\u0433\u0434\u0430 \u0438 \u043a\u0430\u043a \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u0422\u0430\u043a \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043b\u0435\u0433\u043a\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 Framer Motion.
\u0412\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435 \u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f\u0445, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u0445, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u043a\u0430\u0434\u0440\u0430\u043c \u0438 \u043c\u043d\u043e\u0433\u043e\u043c \u0434\u0440\u0443\u0433\u043e\u043c. \u041d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431 \u043e\u0441\u043d\u043e\u0432\u0430\u0445, \u043d\u043e \u0438 \u043e \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u0438 \u0443\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u0430\u043c \u043f\u043e\u043c\u043e\u0433\u0443\u0442.<\/p>\n

\u041c\u043e\u0434\u0443\u043b\u044c 3. \u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Framer Motion<\/b>
\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f Framer Motion \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0443\u0434\u0430\u0447\u043d\u044b\u0439 \u043f\u0443\u0442\u044c. \u041e\u043d\u0430 \u043e\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445, \u043d\u043e \u043d\u0435 \u0434\u0430\u044e\u0442 \u0432\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u0447\u0442\u043e-\u0442\u043e \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f.
\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u043d\u043e\u0433\u043e \u0447\u0435\u0433\u043e. \u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0441\u043d\u043e\u0432\u044b, \u0430 \u0437\u0430\u0442\u0435\u043c \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c, \u0442\u0430\u043a\u0438\u043c \u043a\u0430\u043a \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e \u0441 \u043e\u0442\u0437\u044b\u0432\u0430\u043c\u0438 \u043d\u0438\u0436\u0435. \u041c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0451\u043c\u0441\u044f \u0441 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438 \u0438 \u0440\u0435\u0448\u0438\u043c \u0438\u0445, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u0437\u043d\u0430\u043b\u0438, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u0441\u0430\u043c\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u0451\u0442\u0435\u0441\u044c \u0441 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u043c\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438.<\/p>\n

\u041c\u043e\u0434\u0443\u043b\u044c 4. \u0425\u043e\u0440\u043e\u0448\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0442\u0438\u0432 \u041e\u0442\u043b\u0438\u0447\u043d\u043e\u0439<\/b>
\u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043a\u0443\u0440\u0441\u0430 \u043c\u044b \u0437\u043d\u0430\u0435\u043c, \u0447\u0435\u043c \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043f\u043b\u043e\u0445\u043e\u0439, \u0438 \u0443\u043c\u0435\u0435\u043c \u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c. \u0412 \u044d\u0442\u043e\u043c \u043c\u043e\u0434\u0443\u043b\u0435 \u043c\u044b \u0438\u0437\u0443\u0447\u0438\u043c \u0442\u0435\u043e\u0440\u0438\u044e \u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0443 \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435.
\u041c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0447\u0443\u0432\u0441\u0442\u0432\u0430, \u043e \u0432\u0430\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u0440\u043a\u0435\u0441\u0442\u0440\u043e\u0432\u043a\u0438, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0438 \u043c\u043d\u043e\u0433\u043e\u043c \u0434\u0440\u0443\u0433\u043e\u043c. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0432 \u043e\u0442\u043b\u0438\u0447\u043d\u0443\u044e.<\/p>\n

\u041f\u043e\u0448\u0430\u0433\u043e\u0432\u044b\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430<\/b>
\u042d\u0442\u043e \u0432\u0442\u043e\u0440\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043a\u0443\u0440\u0441\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u043a\u0430\u043a \u044f \u0441\u043e\u0437\u0434\u0430\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0441 \u043d\u0443\u043b\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e \u0442\u0435 \u0438\u043b\u0438 \u0438\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f.
\u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0437\u0434\u0435\u0441\u044c, \u0438 \u0442\u0435\u043c\u0438, \u0447\u0442\u043e \u0431\u044b\u043b\u0438 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u043c\u043e\u0434\u0443\u043b\u044f\u0445, \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u0432\u0430\u043c \u0441\u0432\u043e\u0439 \u0442\u043e\u0447\u043d\u044b\u0439 \u043c\u044b\u0441\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441. \u041c\u044b \u043d\u0430\u0447\u043d\u0451\u043c \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u043e\u0434\u0443\u043c\u0430\u0435\u043c \u0438 \u043e\u0431\u0441\u0443\u0434\u0438\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0445\u043e\u0442\u0438\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c, \u0437\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u043a\u043e\u0434\u0443, \u0443\u043b\u0443\u0447\u0448\u0438\u043c \u0435\u0433\u043e \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0443.<\/p>\n

\u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435…
\u041f\u043e\u0441\u043b\u0435 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043d\u0430 \u044d\u0442\u043e\u043c \u043a\u0443\u0440\u0441\u0435 \u0432\u044b \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0431\u043e\u043d\u0443\u0441\u043d\u044b\u043c
\u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0432\u0430\u043c \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u043d\u0430\u0434 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439.<\/p>\n

\t\u0421\u043f\u043e\u0439\u043b\u0435\u0440: \u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f: \tHow do you craft animations that feel right?
Learn the theory and practice behind great animations with this interactive learning experience.
My profile picture, but without a face
Taught by Emil Kowalski<\/p>\n

Coding animations is hard, and unfortunately, many tutorials follow a happy path. They cover simple animations that are great for beginners, but aren\u2019t that helpful once you go past the basics.
But it\u2019s not just the code that makes an animation work. A bad easing or duration can ruin an otherwise great animation. But how do you know whether you made the right choices? You don\u2019t because animations are tricky. It just doesn\u2019t feel right and you can\u2019t tell why.<\/p>\n

Hey, I\u2019m Emil
I\u2019m currently working as a design engineer at Linear. In the past, I\u2019ve worked on the design team at Vercel where I developed the design system, dashboard, docs, and more.
I also created Sonner and Vaul, two open source React libraries that rely on animations. These packages are downloaded over 15,000,000 times per week from npm.<\/p>\n

What you\u2019ll get
Starting with the 4 base modules all the way through walkthroughs, you\u2019ll
learn everything you need to know to build great animations on the web.<\/p>\n

Module 1
Making it feel right
We\u2019ll dive deep into the theory behind great animations. We\u2019ll talk about taste, spring animations, timing, purpose, and more. After this module, you\u2019ll stop guessing.You\u2019ll know exactly why an animation feels off, and how to make it better.<\/p>\n

Module 2
CSS animations
We\u2019ll make sure that you get the basics of CSS animations right and know when and how to use them. This way you\u2019ll be able to transition into Framer Motion with ease.
You\u2019ll learn about transforms, transitions, keyframe animations, and more. Not just the basic, but real-world examples and exercises that will actually help you.
While this module involves a lot of coding, we will still talk about the theory. In the solution of exercises, I often talk about which easing and duration I chose and why. This is often times more important than the code itself.<\/p>\n

Module 3
How do I use Framer Motion
Framer Motion\u2019s documentation often times follows a happy path. It covers simple animations, which are great for beginners, but don\u2019t give you a lot of insight on how to craft more complex ones or what to do when something breaks.
That\u2019s why, in this part, we\u2019ll build a lot. We\u2019ll cover the basics, then quickly move to more complex animations like the Feedback popover below. We\u2019ll run into issues and solve them, so that you\u2019ll know what to do when you run into similar problems yourself.<\/p>\n

Module 4
Good vs Great animations
At this point in the course we know what differentiates a good animation from a bad one, and we know how to code them. In this module we\u2019ll explore both the theory and practice on a deeper level.
We\u2019ll talk about how you can transfer feelings with animations, the importance of orchestration, accessibility, and more. After this module you\u2019ll know how to take your animations from good to great.<\/p>\n

Walkthroughs
This is the second part of the course in which you\u2019ll get to see how I create animations from scratch, including the reasons behind my decisions
The difference between components we build here and the ones in previous modules is that here, I show you my exact thought process. We\u2019ll start by just thinking and talking about the animation we want to make, then move to the code, improve it and iterate.
\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u0430.
\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043d\u0430\u0431\u043e\u0440 \u0432 \u044d\u0442\u043e\u043c \u0433\u043e\u0434\u0443 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f 7 \u043e\u043a\u0442\u044f\u0431\u0440\u044f \u043d\u0430 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f.<\/p>\n

\u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0442\u043e\u0440<\/p>\n","protected":false},"excerpt":{"rendered":"

\u0421\u043a\u043b\u0430\u0434\u0447\u0438\u043d\u0430: Web \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f [Emil Kowalski] Animation on the Web \u042f\u0437\u044b\u043a: \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439 \u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e? \u0418\u0437\u0443\u0447\u0438\u0442\u0435 \u0442\u0435\u043e\u0440\u0438\u044e \u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0443 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0435\u043b\u0438\u043a\u043e\u043b\u0435\u043f\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043e\u0431\u0443\u0447\u0430\u044e\u0449\u0435\u0433\u043e \u043a\u0443\u0440\u0441\u0430. \u0427\u0442\u043e, \u0435\u0441\u043b\u0438 \u0431\u044b \u0432\u044b \u0437\u043d\u0430\u043b\u0438, \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438? \u0415\u0441\u043b\u0438 \u0431\u044b \u0432\u044b \u0437\u043d\u0430\u043b\u0438, \u0438\u0437 \u0447\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f, \u0432\u044b \u0431\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u043b\u0438, \u043a\u0430\u043a\u043e\u0439 \u0442\u0438\u043f \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u044f […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-45244","post","type-post","status-publish","format-standard","hentry","category-rss"],"_links":{"self":[{"href":"https:\/\/rss.eground-zerkalo.com\/index.php?rest_route=\/wp\/v2\/posts\/45244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rss.eground-zerkalo.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rss.eground-zerkalo.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rss.eground-zerkalo.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rss.eground-zerkalo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=45244"}],"version-history":[{"count":0,"href":"https:\/\/rss.eground-zerkalo.com\/index.php?rest_route=\/wp\/v2\/posts\/45244\/revisions"}],"wp:attachment":[{"href":"https:\/\/rss.eground-zerkalo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rss.eground-zerkalo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rss.eground-zerkalo.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}