{"id":2086,"date":"2018-01-25T14:23:13","date_gmt":"2018-01-25T08:53:13","guid":{"rendered":"http:\/\/www.sanjaywebdesigner.com\/articles\/?p=2086"},"modified":"2018-01-25T14:23:13","modified_gmt":"2018-01-25T08:53:13","slug":"page-transition-effects","status":"publish","type":"post","link":"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/","title":{"rendered":"8 Amazing Page Transition Effects On CODEPEN"},"content":{"rendered":"<div class=\"4b5c905834746893f548144bd2becc18\" data-index=\"1\" style=\"float: none; margin:10px 0 10px 0; text-align:center;\">\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<!-- blog last -->\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:inline-block;width:336px;height:280px\"\r\n     data-ad-client=\"ca-pub-8831529092902674\"\r\n     data-ad-slot=\"8814291746\"><\/ins>\r\n<script>\r\n(adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\n<\/div>\n<p><strong>8 Amazing Page Transition Effects On CODEPEN:<\/strong> The act of clicking on a multipage website can become boring over time. Adding web page transition effects to the mix can assist to kick things up a notch. They&#8217;re great for keeping the individual&#8217;s rate of interest as brand-new content tons in, while likewise keeping a marginal influence on efficiency.<\/p>\n<h2>Below are\u00a08 Amazing Page Transition Effects.<\/h2>\n<p><a href=\"http:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2018\/01\/8-Amazing-Page-Transition-Effects-On-CODEPEN.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2088\" src=\"http:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2018\/01\/8-Amazing-Page-Transition-Effects-On-CODEPEN.jpg\" alt=\"Amazing Page Transition Effects On CODEPEN\" width=\"800\" height=\"450\" srcset=\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2018\/01\/8-Amazing-Page-Transition-Effects-On-CODEPEN.jpg 800w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2018\/01\/8-Amazing-Page-Transition-Effects-On-CODEPEN-300x169.jpg 300w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2018\/01\/8-Amazing-Page-Transition-Effects-On-CODEPEN-768x432.jpg 768w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2018\/01\/8-Amazing-Page-Transition-Effects-On-CODEPEN-660x371.jpg 660w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p>You May Also Like:\u00a0<a href=\"http:\/\/www.sanjaywebdesigner.com\/articles\/best-plugins-adding-animation-wordpress\/\" target=\"_blank\" rel=\"noopener\"><strong>7 Best Plugins for Adding Animation Effects to WordPress Websites<\/strong><\/a><\/p>\n<h3>Vue.js Variety<\/h3>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"ALgZpp\" data-default-tab=\"js,result\" data-user=\"timrijkse\" data-embed-version=\"2\" data-pen-title=\"Vue2 page transitions with GSAP\">See the Pen <a href=\"https:\/\/codepen.io\/timrijkse\/pen\/ALgZpp\/\">Vue2 page transitions with GSAP<\/a> by Tim Rijkse (<a href=\"https:\/\/codepen.io\/timrijkse\">@timrijkse<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>With the help of the <a href=\"https:\/\/vuejs.org\/\" target=\"_blank\" rel=\"noopener\">Vue.js<\/a> structure, the examples here sport a fast as well as a glossy collection of transitions. There&#8217;s a great mix here of fundamental transitions (fade, zoom) as well as a couple of that are a little bit unique compared with just what we generally see (flipX, flipY, slideUp).<\/p>\n<h3>Old School Television<\/h3>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"wavXgQ\" data-default-tab=\"css,result\" data-user=\"ARS\" data-embed-version=\"2\" data-pen-title=\"Page Transition Loader\" data-preview=\"true\">See the Pen <a href=\"https:\/\/codepen.io\/ARS\/pen\/wavXgQ\/\">Page Transition Loader<\/a> by Arsen Zbidniakov (<a href=\"https:\/\/codepen.io\/ARS\">@ARS<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Intentional or otherwise, this transition is similar to an old CRT television being switched off. The colored background diminishes down to a single line, much like exactly what my old TV did after a night of viewing MTV (when playing songs, that is). Then, the transition finishes off by turning around the effect (as my TELEVISION did when I awakened the following morning).<\/p>\n<h3>Morphing SVG<\/h3>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"wavXgQ\" data-default-tab=\"css,result\" data-user=\"ARS\" data-embed-version=\"2\" data-pen-title=\"Page Transition Loader\" data-preview=\"true\">See the Pen <a href=\"https:\/\/codepen.io\/ARS\/pen\/wavXgQ\/\">Page Transition Loader<\/a> by Arsen Zbidniakov (<a href=\"https:\/\/codepen.io\/ARS\">@ARS<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Around SVG is used in this transition to include a clock-like effect. The activity includes a cinematic quality that feels like the best fit for a multimedia website.<\/p>\n<h3>Quick Transition with Preloader<\/h3>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"NALWrj\" data-default-tab=\"css,result\" data-user=\"steveg3003\" data-embed-version=\"2\" data-pen-title=\"Thumbnail to fullscreen page transition\" data-preview=\"true\">See the Pen <a href=\"https:\/\/codepen.io\/steveg3003\/pen\/NALWrj\/\">Thumbnail to fullscreen page transition<\/a> by Steve Gardner (<a href=\"https:\/\/codepen.io\/steveg3003\">@steveg3003<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>If you&#8217;re going to use page transitions in multiple locations throughout your website, then they would certainly much better be quick. That&#8217;s what is so cool concerning this example. There&#8217;s a vibrant computer animated preloader that quickly gives way for the content to reveal itself. It&#8217;s interesting to check out while not wasting valuable time.<\/p>\n<h3>Thumbnail to Full Page<\/h3>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"NALWrj\" data-default-tab=\"css,result\" data-user=\"steveg3003\" data-embed-version=\"2\" data-pen-title=\"Thumbnail to fullscreen page transition\" data-preview=\"true\">See the Pen <a href=\"https:\/\/codepen.io\/steveg3003\/pen\/NALWrj\/\">Thumbnail to fullscreen page transition<\/a> by Steve Gardner (<a href=\"https:\/\/codepen.io\/steveg3003\">@steveg3003<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>This is rather a distinct impact, as clicking a thumbnail image transitions to a modal using that identical image as a full-screen background. The result is a mix of CSS transitions and also Angular.js.<\/p>\n<h3>Wipe it Clean<\/h3>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"zvvzeM\" data-default-tab=\"css,result\" data-user=\"Podgro\" data-embed-version=\"2\" data-pen-title=\"Page transition CSS3\" data-preview=\"true\">See the Pen <a href=\"https:\/\/codepen.io\/Podgro\/pen\/zvvzeM\/\">Page transition CSS3<\/a> by Thomas Podgrodzki (<a href=\"https:\/\/codepen.io\/Podgro\">@Podgro<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>An excellent old clean impact has actually been a staple of TV and also film transitions for decades. Below, we see a variation of it triggered with CSS and a little bit of jQuery.<\/p>\n<h3>Cubic Bezier with GSAP<\/h3>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"KNabaJ\" data-default-tab=\"css,result\" data-user=\"Polenji86\" data-embed-version=\"2\" data-pen-title=\"GSAP Cubic bezier page transition\" data-preview=\"true\">See the Pen <a href=\"https:\/\/codepen.io\/Polenji86\/pen\/KNabaJ\/\">GSAP Cubic bezier page transition<\/a> by Maciej Siwanowicz (<a href=\"https:\/\/codepen.io\/Polenji86\">@Polenji86<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p><a href=\"https:\/\/greensock.com\/gsap\" target=\"_blank\" rel=\"noopener\">GSAP<\/a> is a library that enables super-fast animations. This instance utilizes it to produce a &#8220;slide up&#8221; transition effect, in addition to some computer animated background fun.<\/p>\n<h3>Splish-Splash<\/h3>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"vKWzWE\" data-default-tab=\"js,result\" data-user=\"sandstedt\" data-embed-version=\"2\" data-pen-title=\"Responsive bodymovin modal \/ page transition\" data-preview=\"true\">See the Pen <a href=\"https:\/\/codepen.io\/sandstedt\/pen\/vKWzWE\/\">Responsive bodymovin modal \/ page transition<\/a> by Jonas Sandstedt (<a href=\"https:\/\/codepen.io\/sandstedt\">@sandstedt<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>With a great &#8220;sprinkle&#8221; effect, this responsive modal transition will definitely get an individual&#8217;s attention. It&#8217;s quick, colorful as well as fun. It&#8217;s developed with Lottie, which brings Adobe After Effects transitions to the web.<\/p>\n\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>8 Amazing Page Transition Effects On CODEPEN: The act of clicking on a multipage website can become boring over time. Adding web page transition effects to the mix can assist to kick things up a notch. They&#8217;re great for keeping the individual&#8217;s rate of interest as brand-new content tons in, while likewise keeping a marginal [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2088,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,3],"tags":[929,928,7],"class_list":["post-2086","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design-courses-in-delhi","category-web-designing","tag-codepen","tag-transition-effect","tag-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>8 Amazing Page Transition Effects On CODEPEN - Sanjay Web Designer<\/title>\n<meta name=\"description\" content=\"8 Amazing Page Transition Effects On CODEPEN: The act of clicking on a multipage website can become boring over time. Sanjay Web designer\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"8 Amazing Page Transition Effects On CODEPEN - Sanjay Web Designer\" \/>\n<meta property=\"og:description\" content=\"8 Amazing Page Transition Effects On CODEPEN: The act of clicking on a multipage website can become boring over time. Sanjay Web designer\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/\" \/>\n<meta property=\"og:site_name\" content=\"Sanjay Web Designer\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/sanjaywebdesigner\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/sanjay73jain\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-25T08:53:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2018\/01\/8-Amazing-Page-Transition-Effects-On-CODEPEN.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"450\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sanjay Jain\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/sanjaywebdesign\" \/>\n<meta name=\"twitter:site\" content=\"@sanjaywebdesign\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sanjay Jain\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/\"},\"author\":{\"name\":\"Sanjay Jain\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/7f15927dca46fba8128eebb678a0ae41\"},\"headline\":\"8 Amazing Page Transition Effects On CODEPEN\",\"datePublished\":\"2018-01-25T08:53:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/\"},\"wordCount\":553,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2018\/01\/8-Amazing-Page-Transition-Effects-On-CODEPEN.jpg\",\"keywords\":[\"codepen\",\"transition effect\",\"Web Design\"],\"articleSection\":[\"Web Design\",\"Web Designing\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/\",\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/\",\"name\":\"8 Amazing Page Transition Effects On CODEPEN - Sanjay Web Designer\",\"isPartOf\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2018\/01\/8-Amazing-Page-Transition-Effects-On-CODEPEN.jpg\",\"datePublished\":\"2018-01-25T08:53:13+00:00\",\"description\":\"8 Amazing Page Transition Effects On CODEPEN: The act of clicking on a multipage website can become boring over time. Sanjay Web designer\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/#primaryimage\",\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2018\/01\/8-Amazing-Page-Transition-Effects-On-CODEPEN.jpg\",\"contentUrl\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2018\/01\/8-Amazing-Page-Transition-Effects-On-CODEPEN.jpg\",\"width\":800,\"height\":450,\"caption\":\"Amazing Page Transition Effects On CODEPEN\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#website\",\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/\",\"name\":\"Sanjay Web Designer\",\"description\":\"Learn Web Designing &amp; Graphic Designing in Depth\",\"publisher\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization\",\"name\":\"Sanjay Web Designer\",\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2021\/08\/cropped-footer-logo-1.png\",\"contentUrl\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2021\/08\/cropped-footer-logo-1.png\",\"width\":240,\"height\":72,\"caption\":\"Sanjay Web Designer\"},\"image\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/sanjaywebdesigner\",\"https:\/\/x.com\/sanjaywebdesign\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/7f15927dca46fba8128eebb678a0ae41\",\"name\":\"Sanjay Jain\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e80a626482bdb2e323343f4f015bc61d8655097da7dd1e684b2e2facb0b8c833?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e80a626482bdb2e323343f4f015bc61d8655097da7dd1e684b2e2facb0b8c833?s=96&d=mm&r=g\",\"caption\":\"Sanjay Jain\"},\"description\":\"I am a graphic and web designer in Delhi and Professional Web and Graphics Designer &amp; Animator. I provide SEO Service in Delhi along with SEO, Web and Graphics Designing Courses training with latest technique.\",\"sameAs\":[\"http:\/\/www.sanjaywebdesigner.com\",\"https:\/\/www.facebook.com\/sanjay73jain\",\"http:\/\/www.linkedin.com\/company\/sanjay-web-designer\",\"https:\/\/x.com\/https:\/\/twitter.com\/sanjaywebdesign\",\"https:\/\/www.youtube.com\/channel\/UCbBRE3GjyAhf1qd6nHg-vQw\",\"http:\/\/sanjaywebdesigner.tumblr.com\/\"],\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/author\/sanjaywe\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"8 Amazing Page Transition Effects On CODEPEN - Sanjay Web Designer","description":"8 Amazing Page Transition Effects On CODEPEN: The act of clicking on a multipage website can become boring over time. Sanjay Web designer","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/","og_locale":"en_US","og_type":"article","og_title":"8 Amazing Page Transition Effects On CODEPEN - Sanjay Web Designer","og_description":"8 Amazing Page Transition Effects On CODEPEN: The act of clicking on a multipage website can become boring over time. Sanjay Web designer","og_url":"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/","og_site_name":"Sanjay Web Designer","article_publisher":"https:\/\/www.facebook.com\/sanjaywebdesigner","article_author":"https:\/\/www.facebook.com\/sanjay73jain","article_published_time":"2018-01-25T08:53:13+00:00","og_image":[{"width":800,"height":450,"url":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2018\/01\/8-Amazing-Page-Transition-Effects-On-CODEPEN.jpg","type":"image\/jpeg"}],"author":"Sanjay Jain","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/sanjaywebdesign","twitter_site":"@sanjaywebdesign","twitter_misc":{"Written by":"Sanjay Jain","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/#article","isPartOf":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/"},"author":{"name":"Sanjay Jain","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/7f15927dca46fba8128eebb678a0ae41"},"headline":"8 Amazing Page Transition Effects On CODEPEN","datePublished":"2018-01-25T08:53:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/"},"wordCount":553,"commentCount":0,"publisher":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization"},"image":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/#primaryimage"},"thumbnailUrl":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2018\/01\/8-Amazing-Page-Transition-Effects-On-CODEPEN.jpg","keywords":["codepen","transition effect","Web Design"],"articleSection":["Web Design","Web Designing"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/","url":"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/","name":"8 Amazing Page Transition Effects On CODEPEN - Sanjay Web Designer","isPartOf":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/#primaryimage"},"image":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/#primaryimage"},"thumbnailUrl":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2018\/01\/8-Amazing-Page-Transition-Effects-On-CODEPEN.jpg","datePublished":"2018-01-25T08:53:13+00:00","description":"8 Amazing Page Transition Effects On CODEPEN: The act of clicking on a multipage website can become boring over time. Sanjay Web designer","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/page-transition-effects\/#primaryimage","url":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2018\/01\/8-Amazing-Page-Transition-Effects-On-CODEPEN.jpg","contentUrl":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2018\/01\/8-Amazing-Page-Transition-Effects-On-CODEPEN.jpg","width":800,"height":450,"caption":"Amazing Page Transition Effects On CODEPEN"},{"@type":"WebSite","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#website","url":"https:\/\/www.sanjaywebdesigner.com\/articles\/","name":"Sanjay Web Designer","description":"Learn Web Designing &amp; Graphic Designing in Depth","publisher":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.sanjaywebdesigner.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization","name":"Sanjay Web Designer","url":"https:\/\/www.sanjaywebdesigner.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2021\/08\/cropped-footer-logo-1.png","contentUrl":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2021\/08\/cropped-footer-logo-1.png","width":240,"height":72,"caption":"Sanjay Web Designer"},"image":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/sanjaywebdesigner","https:\/\/x.com\/sanjaywebdesign"]},{"@type":"Person","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/7f15927dca46fba8128eebb678a0ae41","name":"Sanjay Jain","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e80a626482bdb2e323343f4f015bc61d8655097da7dd1e684b2e2facb0b8c833?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e80a626482bdb2e323343f4f015bc61d8655097da7dd1e684b2e2facb0b8c833?s=96&d=mm&r=g","caption":"Sanjay Jain"},"description":"I am a graphic and web designer in Delhi and Professional Web and Graphics Designer &amp; Animator. I provide SEO Service in Delhi along with SEO, Web and Graphics Designing Courses training with latest technique.","sameAs":["http:\/\/www.sanjaywebdesigner.com","https:\/\/www.facebook.com\/sanjay73jain","http:\/\/www.linkedin.com\/company\/sanjay-web-designer","https:\/\/x.com\/https:\/\/twitter.com\/sanjaywebdesign","https:\/\/www.youtube.com\/channel\/UCbBRE3GjyAhf1qd6nHg-vQw","http:\/\/sanjaywebdesigner.tumblr.com\/"],"url":"https:\/\/www.sanjaywebdesigner.com\/articles\/author\/sanjaywe\/"}]}},"_links":{"self":[{"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/posts\/2086","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/comments?post=2086"}],"version-history":[{"count":0,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/posts\/2086\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/media\/2088"}],"wp:attachment":[{"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/media?parent=2086"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/categories?post=2086"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/tags?post=2086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}