{"id":1976,"date":"2022-01-28T22:23:14","date_gmt":"2022-01-28T22:23:14","guid":{"rendered":"https:\/\/blockpresswp.com\/?p=1976"},"modified":"2022-05-27T17:46:21","modified_gmt":"2022-05-27T17:46:21","slug":"advanced-animations","status":"publish","type":"post","link":"https:\/\/blockpresswp.com\/advanced-animations\/","title":{"rendered":"Advanced Animations"},"content":{"rendered":"\n<p>If you are interested in making complex animations that keep best performance of BlockPress theme and core Animation framework is not enough for you, I recommend checking <a rel=\"noreferrer noopener\" href=\"https:\/\/greenshiftwp.com\/block-gallery\/#animation\" target=\"_blank\">Greenshift plugin Animation addon<\/a>.<\/p>\n\n\n\n<p>It has a lot of possibilities to make a different kind of animations: pin scroll, parallax, transforms, hover, click animations, on Scroll animations, Blobs, 3d models, Flips, Staggers, sequencers, and many more. <\/p>\n\n\n\n<p>One big advantage of the plugin is that it keeps a very high speed score because of unique system of asset loadings. Just check this page, it has several Lottie animations and also real 3d model and it still keeps very high web vitals. <\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/pagespeed.web.dev\/report?url=https%3A%2F%2Fblockpresswp.com%2Fadvanced-animations%2F\" target=\"_blank\">Check page on google metrics<\/a><\/p>\n\n\n\n<div class=\"wp-block-greenshift-blocks-lottie gs-lottieloader gs-lottie-gsbp-b3440629-ae86\" style=\"display:flex;justify-content:center\"><lottie-player id=\"gs-lottie-gsbp-b3440629-ae86\" src=\"https:\/\/assets4.lottiefiles.com\/private_files\/lf30_nlhswxdd.json\" background=\"#ffffff00\" speed=\"1\" style=\"width:577px;height:434px\" loop autoplay data-visibility-start=\"0.1\" data-visibility-end=\"1\" data-frames-start=\"\" data-frames-end=\"100\" data-modetype=\"hover\" data-interactivity=\"\"><\/lottie-player><\/div>\n\n\n\n<p>To make it even more interesting, we added the possibility to interact with animations.<\/p>\n\n\n\n<p>For example, this is example of frame changes when you scroll<\/p>\n\n\n\n<div class=\"wp-block-greenshift-blocks-lottie gs-lottieloader gs-lottie-gsbp-1959ca0e-a68a\" style=\"display:flex;justify-content:center\"><lottie-player id=\"gs-lottie-gsbp-1959ca0e-a68a\" src=\"https:\/\/assets8.lottiefiles.com\/packages\/lf20_mbe3iiji.json\" background=\"#ffffff00\" speed=\"1\" style=\"width:480px;height:429px\" data-visibility-start=\"0.1\" data-visibility-end=\"1\" data-frames-start=\"\" data-frames-end=\"120\" data-modetype=\"seek\" data-interactivity=\"scroll\"><\/lottie-player><\/div>\n\n\n\n<p>3d Model<\/p>\n\n\n\n<div id=\"gspb_modelBox-id-gsbp-454f45f5-18e7\" class=\"gspb_modelBox gs-t-model gspb_modelBox-id-gsbp-454f45f5-18e7 wp-block-greenshift-blocks-modelviewer\" style=\"display:flex\"><model-viewer id=\"gs_three_gsbp-454f45f5-18e7\" class=\"gsmodelviewer\" src=\"https:\/\/modelviewer.dev\/shared-assets\/models\/NeilArmstrong.glb\" data-loaditer=\"true\" auto-rotate=\"true\" camera-controls=\"true\" data-camera=\"yes\" ar><div class=\"progress-bar\" slot=\"progress-bar\"><div class=\"update-bar\"><\/div><\/div><button slot=\"ar-button\" class=\"ar-button\" style=\"display:flex;justify-content:center;align-items:center;background-color:white;padding:5px 15px 5px 15px;visibility:hidden\"><svg height=\"25\" viewBox=\"0 0 60 54\" width=\"25\" class=\"mr10\"><g fill=\"none\" fill-rule=\"evenodd\"><g fill=\"rgb(0,0,0)\" fill-rule=\"nonzero\"><path d=\"m53 0h-46c-3.86416566.00440864-6.99559136 3.13583434-7 7v40c.00440864 3.8641657 3.13583434 6.9955914 7 7h46c3.8641657-.0044086 6.9955914-3.1358343 7-7v-40c-.0044086-3.86416566-3.1358343-6.99559136-7-7zm5 47c-.0033061 2.7600532-2.2399468 4.9966939-5 5h-46c-2.76005315-.0033061-4.99669388-2.2399468-5-5v-40c.00330612-2.76005315 2.23994685-4.99669388 5-5h46c2.7600532.00330612 4.9966939 2.23994685 5 5z\"><\/path><path d=\"m53 8h-46c-1.65685425 0-3 1.34314575-3 3v36c0 1.6568542 1.34314575 3 3 3h46c1.6568542 0 3-1.3431458 3-3v-36c0-1.65685425-1.3431458-3-3-3zm-23 19.864-10.891-5.864 10.891-5.864 10.891 5.864zm12-4.19v11.726l-11 5.926v-11.726zm-13 5.926v11.726l-11-5.926v-11.726zm-23-18.6c0-.5522847.44771525-1 1-1h22v4.4l-12.474 6.72c-.013.007-.028.01-.041.018-.3023938.1816727-.4866943.5092336-.485.862v8.382l-10 5zm48 36c0 .5522847-.4477153 1-1 1h-46c-.55228475 0-1-.4477153-1-1v-9.382l10-5v3.382c.000193.3677348.2022003.7056937.526.88l13 7c.2959236.1593002.6520764.1593002.948 0l13-7c.3237997-.1743063.525807-.5122652.526-.88v-3.382l10 5zm0-11.618-10-5v-8.382c-.0001367-.3517458-.1850653-.6775544-.487-.858-.013-.008-.028-.011-.041-.018l-12.472-6.724v-4.4h22c.5522847 0 1 .4477153 1 1z\"><\/path><circle cx=\"6\" cy=\"5\" r=\"1\"><\/circle><circle cx=\"10\" cy=\"5\" r=\"1\"><\/circle><circle cx=\"14\" cy=\"5\" r=\"1\"><\/circle><path d=\"m39 6h14c.5522847 0 1-.44771525 1-1s-.4477153-1-1-1h-14c-.5522847 0-1 .44771525-1 1s.4477153 1 1 1z\"><\/path><\/g><\/g><\/svg>  View in your space<\/button><\/model-viewer><\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you are interested in making complex animations that keep best performance of BlockPress theme and core Animation framework is not enough for you, I recommend checking Greenshift plugin Animation addon. It has a lot of possibilities to make a different kind of animations: pin scroll, parallax, transforms, hover, click animations, on Scroll animations, Blobs, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1926,"comment_status":"open","ping_status":"open","sticky":false,"template":"post-bgtitle","format":"standard","meta":{"_gspb_post_css":".gspb-bodyfront .gs-lottie-gsbp-1959ca0e-a68a img,.gspb-bodyfront .gs-lottie-gsbp-b3440629-ae86 img{transition:opacity 1s ease-in;position:absolute}.gspb-bodyfront .gs-lottie-gsbp-1959ca0e-a68a.lottie-loaded img,.gspb-bodyfront .gs-lottie-gsbp-b3440629-ae86.lottie-loaded img{opacity:0}.gs-lottie-gsbp-b3440629-ae86 img,.gs-lottie-gsbp-b3440629-ae86 lottie-player{width:577px!important;height:434px!important}.gs-lottie-gsbp-1959ca0e-a68a img,.gs-lottie-gsbp-1959ca0e-a68a lottie-player{width:480px!important;height:429px!important}.gs-t-model{position:relative}.gs-t-model :not(:defined)>:not(.poster){display:none}.gs-t-model :defined>.poster>.pre-prompt{display:none}.gs-t-model .poster{display:flex;justify-content:center;align-items:center;height:100%;top:0;left:0;background-size:contain;background-repeat:no-repeat;background-position:center}.gs-t-model .pre-prompt{pointer-events:none;animation-name:lefttoright;animation-duration:5s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}.gs-t-model .ar-button{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;bottom:16px;font-size:14px;border-radius:18px;border:1px solid #dadce0;color:#6495ed;display:flex;visibility:visible!important;gap:10px}.progress-bar{display:block;width:33%;height:10%;max-height:2%;position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0);border-radius:25px}.progress-bar.hide{visibility:hidden;transition:visibility .3s}.update-bar{background-image:linear-gradient(45deg,#b2a2cd 25%,#5c5269 25%,#5c5269 50%,#b2a2cd 50%,#b2a2cd 75%,#5c5269 75%,#5c5269 100%);background-size:28.28px 28.28px;width:0%;height:100%;border-radius:25px;float:left;transition:width .3s}.gs-t-model .progress-bar:not(.hide)+.ar-button{display:none!important}#gspb_modelBox-id-gsbp-454f45f5-18e7 .gsmodelviewer{--poster-color:transparent;background-color:transparent;--progress-mask:transparent;--progress-bar-color:#00ab1985;width:100%;height:718px}","inline_featured_image":false,"footnotes":""},"categories":[198],"tags":[],"class_list":["post-1976","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation"],"_links":{"self":[{"href":"https:\/\/blockpresswp.com\/wp-json\/wp\/v2\/posts\/1976","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blockpresswp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blockpresswp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blockpresswp.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blockpresswp.com\/wp-json\/wp\/v2\/comments?post=1976"}],"version-history":[{"count":5,"href":"https:\/\/blockpresswp.com\/wp-json\/wp\/v2\/posts\/1976\/revisions"}],"predecessor-version":[{"id":2172,"href":"https:\/\/blockpresswp.com\/wp-json\/wp\/v2\/posts\/1976\/revisions\/2172"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blockpresswp.com\/wp-json\/wp\/v2\/media\/1926"}],"wp:attachment":[{"href":"https:\/\/blockpresswp.com\/wp-json\/wp\/v2\/media?parent=1976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blockpresswp.com\/wp-json\/wp\/v2\/categories?post=1976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blockpresswp.com\/wp-json\/wp\/v2\/tags?post=1976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}