{"id":105176,"date":"2024-11-19T16:46:23","date_gmt":"2024-11-19T15:46:23","guid":{"rendered":"https:\/\/franktielemans.be\/blog\/?page_id=105176"},"modified":"2024-11-19T17:16:49","modified_gmt":"2024-11-19T16:16:49","slug":"full-page-scroll-with-gsap","status":"publish","type":"page","link":"https:\/\/franktielemans.be\/blog\/full-page-scroll-with-gsap\/","title":{"rendered":"full page scroll with GSAP"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"105176\" class=\"elementor elementor-105176\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53d2ddb e-flex e-con-boxed e-con e-parent\" data-id=\"53d2ddb\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;sticky&quot;:&quot;top&quot;,&quot;sticky_on&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;],&quot;sticky_offset&quot;:0,&quot;sticky_effects_offset&quot;:0,&quot;sticky_anchor_link_offset&quot;:0}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0061b3f elementor-widget elementor-widget-heading\" data-id=\"0061b3f\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"link1\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"#section1\">link1<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b9eabaa elementor-widget elementor-widget-heading\" data-id=\"b9eabaa\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"link2\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"#section2\">link2<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd57ab5 elementor-widget elementor-widget-heading\" data-id=\"dd57ab5\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"link3\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"#section3\">link3<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f360139 elementor-widget elementor-widget-heading\" data-id=\"f360139\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"link4\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"#section4\">link4<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-db2c568 e-con-full e-flex e-con e-parent\" data-id=\"db2c568\" data-element_type=\"container\" data-e-type=\"container\" id=\"fullpage\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-fd11583 e-con-full section  e-flex e-con e-child\" data-id=\"fd11583\" data-element_type=\"container\" data-e-type=\"container\" id=\"section1\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9e938d7 elementor-widget elementor-widget-heading\" data-id=\"9e938d7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">SECTION 1<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-70f0649 e-con-full section  e-flex e-con e-child\" data-id=\"70f0649\" data-element_type=\"container\" data-e-type=\"container\" id=\"section2\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9aaec49 elementor-widget elementor-widget-heading\" data-id=\"9aaec49\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">SECTION 2<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-65a91cf e-con-full section  e-flex e-con e-child\" data-id=\"65a91cf\" data-element_type=\"container\" data-e-type=\"container\" id=\"section3\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e49d04e elementor-widget elementor-widget-heading\" data-id=\"e49d04e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">SECTION 3<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8b890f1 e-con-full section  e-flex e-con e-child\" data-id=\"8b890f1\" data-element_type=\"container\" data-e-type=\"container\" id=\"section4\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bd04051 elementor-widget elementor-widget-heading\" data-id=\"bd04051\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">SECTION 4<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4a0dca2 e-flex e-con-boxed e-con e-parent\" data-id=\"4a0dca2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0e30833 elementor-widget elementor-widget-html\" data-id=\"0e30833\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link\r\n  rel=\"stylesheet\"\r\n  href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fullPage.js\/3.1.2\/fullpage.min.css\"\r\n\/>\r\n<style>\r\n  .section {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: bottom;\r\n    align-items: bottom;\r\n    height: 100vh;\r\n    text-align: bottom;\r\n    font-size: 6rem;\r\n    overflow: hidden;\r\n    position: relative;\r\n  }\r\n\r\n  }\r\n<\/style>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.11.5\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.11.5\/ScrollTrigger.min.js\"><\/script>\r\n\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fullPage.js\/3.1.2\/fullpage.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.11.3\/gsap.min.js\"><\/script>\r\n\r\n<script>\r\n  document.addEventListener(\"DOMContentLoaded\", function () {\r\n    const fullpageInstance = new fullpage(\"#fullpage\", {\r\n      scrollingSpeed: 1000,\r\n      autoScrolling: true,\r\n      scrollHorizontally: true,\r\n      navigation: false,\r\n      onLeave: function (origin, destination, direction) {\r\n        const words = [\"Unknown\", \"Unseen\", \"Unfamiliar\", \"Mystery\"];\r\n        const leavingText = origin.item.querySelector(\"h1\");\r\n        const enteringText = destination.item.querySelector(\"h1\");\r\n        const line = destination.item.querySelector(\".line\");\r\n\r\n        \/\/ Animate the leaving text to fade out and move up\r\n        gsap.to(leavingText, {\r\n          opacity: 0,\r\n          y: -100,\r\n          duration: 1.5,\r\n          ease: \"power2.out\",\r\n        });\r\n\r\n        \/\/ Animate the entering text to fade in and move up\r\n        gsap.fromTo(\r\n          enteringText,\r\n          { y: 100, opacity: 0 },\r\n          {\r\n            y: 0,\r\n            opacity: 1,\r\n            color: destination.item.getAttribute(\"data-text-color\"), \/\/ Set text color\r\n            duration: 1.5,\r\n            ease: \"power2.out\",\r\n            delay: 0.5,\r\n          }\r\n        );\r\n\r\n        \/\/ Get the destination colors\r\n        const newBgColor = destination.item.getAttribute(\"data-bg\");\r\n        const newTextColor = destination.item.getAttribute(\"data-text-color\");\r\n\r\n        \/\/ Change background color of destination slide\r\n        destination.item.style.backgroundColor = newBgColor;\r\n\r\n        \/\/ Change text colors dynamically\r\n        gsap.to(line, { color: newTextColor, duration: 0.5 });\r\n\r\n        \/\/ Line growth\/shrinkage animation\r\n        const newLineWidth = (destination.index + 1) * 150;\r\n        const currentLineWidth = (origin.index + 1) * 150;\r\n\r\n        if (direction === \"down\") {\r\n          gsap.to(line, {\r\n            width: newLineWidth + \"px\",\r\n            duration: 1.5,\r\n            ease: \"power2.out\",\r\n          });\r\n        } else {\r\n          gsap.to(line, {\r\n            width: currentLineWidth + \"px\",\r\n            duration: 1.5,\r\n            ease: \"power2.out\",\r\n          });\r\n        }\r\n      },\r\n    });\r\n\r\n    document.getElementById(\"link1\").addEventListener(\"click\", function () {\r\n      scrollToSection(1);\r\n    });\r\n    document.getElementById(\"link2\").addEventListener(\"click\", function () {\r\n      scrollToSection(2);\r\n    });\r\n    document.getElementById(\"link3\").addEventListener(\"click\", function () {\r\n      scrollToSection(3);\r\n    });\r\n    document.getElementById(\"link4\").addEventListener(\"click\", function () {\r\n      scrollToSection(4);\r\n    });\r\n\r\n    function scrollToSection(sectionIndex) {\r\n      fullpageInstance.moveTo(sectionIndex);\r\n    }\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>link1 link2 link3 link4 SECTION 1 SECTION 2 SECTION 3 SECTION 4<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_oct_exclude_from_cache":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-105176","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/pages\/105176","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/comments?post=105176"}],"version-history":[{"count":0,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/pages\/105176\/revisions"}],"wp:attachment":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/media?parent=105176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/categories?post=105176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/tags?post=105176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}