{"id":1223,"date":"2021-02-14T10:52:17","date_gmt":"2021-02-14T10:52:17","guid":{"rendered":"https:\/\/wp.nkdev.info\/cyberpulse\/?page_id=1223"},"modified":"2023-01-22T16:41:54","modified_gmt":"2023-01-22T16:41:54","slug":"animate-on-scroll","status":"publish","type":"page","link":"https:\/\/wp.nkdev.info\/cyberpulse\/toxic\/content-formatting\/animate-on-scroll\/","title":{"rendered":"Animate on Scroll"},"content":{"rendered":"\n<p class=\"ghostkit-custom-2927lK\">Show with animation Ghost Kit and Core blocks on page scrolling.<\/p>\n\n\n\n<h2 class=\"ghostkit-custom-Z1ieO03 wp-block-heading\" id=\"scroll-down-to-see-example\">Scroll down to see example.<\/h2>\n\n\n\n<div class=\"ghostkit-grid ghostkit-grid-gap-md\"><div class=\"ghostkit-grid-inner\">\n<div class=\"ghostkit-col ghostkit-col-lg-12 ghostkit-col-4\"><div class=\"ghostkit-col-content is-layout-flow wp-block-grid-column-is-layout-flow\">\n<div data-gkt-effects=\"{&quot;reveal&quot;:{&quot;x&quot;:0,&quot;y&quot;:&quot;30px&quot;,&quot;opacity&quot;:0,&quot;scale&quot;:1,&quot;transition&quot;:{&quot;type&quot;:&quot;easing&quot;,&quot;duration&quot;:1.3,&quot;delay&quot;:0.1}}}\" class=\"ghostkit-icon-box is-style-cpl-filled ghostkit-custom-1DLvw8\" ><div class=\"ghostkit-icon-box-icon ghostkit-icon-box-icon-align-top ghostkit-icon-box-icon-top-align-center\"><svg class=\"ghostkit-svg-icon ghostkit-svg-icon-feather\" aria-hidden=\"true\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"><\/path><polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"><\/polyline><line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"><\/line><\/svg><\/div><div class=\"ghostkit-icon-box-content is-layout-flow wp-block-icon-box-is-layout-flow\">\n<p class=\"has-text-align-center\">Wow, this is an important icons, that you should see!<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"ghostkit-col ghostkit-col-lg-12 ghostkit-col-4\"><div class=\"ghostkit-col-content is-layout-flow wp-block-grid-column-is-layout-flow\">\n<div data-gkt-effects=\"{&quot;reveal&quot;:{&quot;x&quot;:0,&quot;y&quot;:&quot;30px&quot;,&quot;opacity&quot;:0,&quot;scale&quot;:1,&quot;transition&quot;:{&quot;type&quot;:&quot;easing&quot;,&quot;duration&quot;:1.3,&quot;delay&quot;:0.5}}}\" class=\"ghostkit-icon-box is-style-cpl-filled ghostkit-custom-1tzvbJ\" ><div class=\"ghostkit-icon-box-icon ghostkit-icon-box-icon-align-top ghostkit-icon-box-icon-top-align-center\"><svg class=\"ghostkit-svg-icon ghostkit-svg-icon-feather\" aria-hidden=\"true\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"><\/rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"><\/path><\/svg><\/div><div class=\"ghostkit-icon-box-content is-layout-flow wp-block-icon-box-is-layout-flow\">\n<p class=\"has-text-align-center\">Wow, this is an important icons, that you should see!<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"ghostkit-col ghostkit-col-lg-12 ghostkit-col-4\"><div class=\"ghostkit-col-content is-layout-flow wp-block-grid-column-is-layout-flow\">\n<div data-gkt-effects=\"{&quot;reveal&quot;:{&quot;x&quot;:0,&quot;y&quot;:&quot;30px&quot;,&quot;opacity&quot;:0,&quot;scale&quot;:1,&quot;transition&quot;:{&quot;type&quot;:&quot;easing&quot;,&quot;duration&quot;:1.3,&quot;delay&quot;:0.9}}}\" class=\"ghostkit-icon-box is-style-cpl-filled ghostkit-custom-Z1C56S8\" ><div class=\"ghostkit-icon-box-icon ghostkit-icon-box-icon-align-top ghostkit-icon-box-icon-top-align-center\"><svg class=\"ghostkit-svg-icon ghostkit-svg-icon-feather\" aria-hidden=\"true\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"><\/rect><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"><\/path><\/svg><\/div><div class=\"ghostkit-icon-box-content is-layout-flow wp-block-icon-box-is-layout-flow\">\n<p class=\"has-text-align-center\">Wow, this is an important icons, that you should see!<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"ghostkit-grid ghostkit-grid-gap-md\"><div class=\"ghostkit-grid-inner\">\n<div class=\"ghostkit-col ghostkit-col-lg-12 ghostkit-col-4\"><div class=\"ghostkit-col-content is-layout-flow wp-block-grid-column-is-layout-flow\">\n<div data-gkt-effects=\"{&quot;reveal&quot;:{&quot;x&quot;:&quot;30px&quot;,&quot;y&quot;:0,&quot;opacity&quot;:0,&quot;scale&quot;:1,&quot;transition&quot;:{&quot;type&quot;:&quot;easing&quot;,&quot;duration&quot;:1.3,&quot;delay&quot;:0.1}}}\" class=\"ghostkit-icon-box is-style-cpl-filled ghostkit-custom-15JTOC\" ><div class=\"ghostkit-icon-box-icon ghostkit-icon-box-icon-align-top ghostkit-icon-box-icon-top-align-center\"><svg class=\"ghostkit-svg-icon ghostkit-svg-icon-feather\" aria-hidden=\"true\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"><\/path><polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"><\/polyline><line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"><\/line><\/svg><\/div><div class=\"ghostkit-icon-box-content is-layout-flow wp-block-icon-box-is-layout-flow\">\n<p class=\"has-text-align-center\">Wow, this is an important icons, that you should see!<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"ghostkit-col ghostkit-col-lg-12 ghostkit-col-4\"><div class=\"ghostkit-col-content is-layout-flow wp-block-grid-column-is-layout-flow\">\n<div data-gkt-effects=\"{&quot;reveal&quot;:{&quot;x&quot;:&quot;30px&quot;,&quot;y&quot;:0,&quot;opacity&quot;:0,&quot;scale&quot;:1,&quot;transition&quot;:{&quot;type&quot;:&quot;easing&quot;,&quot;duration&quot;:1.3,&quot;delay&quot;:0.5}}}\" class=\"ghostkit-icon-box is-style-cpl-filled ghostkit-custom-sDUHn\" ><div class=\"ghostkit-icon-box-icon ghostkit-icon-box-icon-align-top ghostkit-icon-box-icon-top-align-center\"><svg class=\"ghostkit-svg-icon ghostkit-svg-icon-feather\" aria-hidden=\"true\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"><\/rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"><\/path><\/svg><\/div><div class=\"ghostkit-icon-box-content is-layout-flow wp-block-icon-box-is-layout-flow\">\n<p class=\"has-text-align-center\">Wow, this is an important icons, that you should see!<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"ghostkit-col ghostkit-col-lg-12 ghostkit-col-4\"><div class=\"ghostkit-col-content is-layout-flow wp-block-grid-column-is-layout-flow\">\n<div data-gkt-effects=\"{&quot;reveal&quot;:{&quot;x&quot;:&quot;30px&quot;,&quot;y&quot;:0,&quot;opacity&quot;:0,&quot;scale&quot;:1,&quot;transition&quot;:{&quot;type&quot;:&quot;easing&quot;,&quot;duration&quot;:1.3,&quot;delay&quot;:0.9}}}\" class=\"ghostkit-icon-box is-style-cpl-filled ghostkit-custom-uTjXa\" ><div class=\"ghostkit-icon-box-icon ghostkit-icon-box-icon-align-top ghostkit-icon-box-icon-top-align-center\"><svg class=\"ghostkit-svg-icon ghostkit-svg-icon-feather\" aria-hidden=\"true\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"><\/rect><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"><\/path><\/svg><\/div><div class=\"ghostkit-icon-box-content is-layout-flow wp-block-icon-box-is-layout-flow\">\n<p class=\"has-text-align-center\">Wow, this is an important icons, that you should see!<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"ghostkit-grid ghostkit-grid-gap-md\"><div class=\"ghostkit-grid-inner\">\n<div class=\"ghostkit-col ghostkit-col-lg-12 ghostkit-col-4\"><div class=\"ghostkit-col-content is-layout-flow wp-block-grid-column-is-layout-flow\">\n<div data-gkt-effects=\"{&quot;reveal&quot;:{&quot;x&quot;:0,&quot;y&quot;:-50,&quot;opacity&quot;:0,&quot;scale&quot;:0.9,&quot;transition&quot;:{&quot;type&quot;:&quot;easing&quot;,&quot;duration&quot;:1.3,&quot;delay&quot;:0.1}}}\" class=\"ghostkit-icon-box is-style-cpl-filled ghostkit-custom-8QySX\" ><div class=\"ghostkit-icon-box-icon ghostkit-icon-box-icon-align-top ghostkit-icon-box-icon-top-align-center\"><svg class=\"ghostkit-svg-icon ghostkit-svg-icon-feather\" aria-hidden=\"true\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"><\/path><polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"><\/polyline><line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"><\/line><\/svg><\/div><div class=\"ghostkit-icon-box-content is-layout-flow wp-block-icon-box-is-layout-flow\">\n<p class=\"has-text-align-center\">Wow, this is an important icons, that you should see!<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"ghostkit-col ghostkit-col-lg-12 ghostkit-col-4\"><div class=\"ghostkit-col-content is-layout-flow wp-block-grid-column-is-layout-flow\">\n<div data-gkt-effects=\"{&quot;reveal&quot;:{&quot;x&quot;:0,&quot;y&quot;:-50,&quot;opacity&quot;:0,&quot;scale&quot;:0.9,&quot;transition&quot;:{&quot;type&quot;:&quot;easing&quot;,&quot;duration&quot;:1.3,&quot;delay&quot;:0.5}}}\" class=\"ghostkit-icon-box is-style-cpl-filled ghostkit-custom-1fD07O\" ><div class=\"ghostkit-icon-box-icon ghostkit-icon-box-icon-align-top ghostkit-icon-box-icon-top-align-center\"><svg class=\"ghostkit-svg-icon ghostkit-svg-icon-feather\" aria-hidden=\"true\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"><\/rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"><\/path><\/svg><\/div><div class=\"ghostkit-icon-box-content is-layout-flow wp-block-icon-box-is-layout-flow\">\n<p class=\"has-text-align-center\">Wow, this is an important icons, that you should see!<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"ghostkit-col ghostkit-col-lg-12 ghostkit-col-4\"><div class=\"ghostkit-col-content is-layout-flow wp-block-grid-column-is-layout-flow\">\n<div data-gkt-effects=\"{&quot;reveal&quot;:{&quot;x&quot;:0,&quot;y&quot;:-50,&quot;opacity&quot;:0,&quot;scale&quot;:0.9,&quot;transition&quot;:{&quot;type&quot;:&quot;easing&quot;,&quot;duration&quot;:1.3,&quot;delay&quot;:0.9}}}\" class=\"ghostkit-icon-box is-style-cpl-filled ghostkit-custom-H0loE\" ><div class=\"ghostkit-icon-box-icon ghostkit-icon-box-icon-align-top ghostkit-icon-box-icon-top-align-center\"><svg class=\"ghostkit-svg-icon ghostkit-svg-icon-feather\" aria-hidden=\"true\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"><\/rect><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"><\/path><\/svg><\/div><div class=\"ghostkit-icon-box-content is-layout-flow wp-block-icon-box-is-layout-flow\">\n<p class=\"has-text-align-center\">Wow, this is an important icons, that you should see!<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Show with animation Ghost Kit and Core blocks on page scrolling. Scroll down to see example.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1220,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ghostkit_customizer_options":"","ghostkit_custom_css":"","ghostkit_custom_js_head":"","ghostkit_custom_js_foot":"","ghostkit_typography":"","_vp_format_video_url":"","_vp_image_focal_point":[],"_cpl_content_size":"","_cpl_sidebar":"","_cpl_disabled_page_elements":[],"_cpl_disabled_page_margins":[],"footnotes":""},"class_list":["post-1223","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wp.nkdev.info\/cyberpulse\/toxic\/wp-json\/wp\/v2\/pages\/1223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.nkdev.info\/cyberpulse\/toxic\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wp.nkdev.info\/cyberpulse\/toxic\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wp.nkdev.info\/cyberpulse\/toxic\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.nkdev.info\/cyberpulse\/toxic\/wp-json\/wp\/v2\/comments?post=1223"}],"version-history":[{"count":4,"href":"https:\/\/wp.nkdev.info\/cyberpulse\/toxic\/wp-json\/wp\/v2\/pages\/1223\/revisions"}],"predecessor-version":[{"id":1707,"href":"https:\/\/wp.nkdev.info\/cyberpulse\/toxic\/wp-json\/wp\/v2\/pages\/1223\/revisions\/1707"}],"up":[{"embeddable":true,"href":"https:\/\/wp.nkdev.info\/cyberpulse\/toxic\/wp-json\/wp\/v2\/pages\/1220"}],"wp:attachment":[{"href":"https:\/\/wp.nkdev.info\/cyberpulse\/toxic\/wp-json\/wp\/v2\/media?parent=1223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}