{"id":257,"date":"2026-08-22T18:55:30","date_gmt":"2026-08-22T18:55:30","guid":{"rendered":"https:\/\/dpromtex.com\/?page_id=257"},"modified":"2026-08-22T23:52:44","modified_gmt":"2026-08-22T23:52:44","slug":"gsap","status":"publish","type":"page","link":"https:\/\/dpromtex.com\/?page_id=257","title":{"rendered":"gsap"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"257\" class=\"elementor elementor-257\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-40cbb68 e-con-full e-flex e-con e-parent\" data-id=\"40cbb68\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-2d06201 gallery e-flex e-con-boxed e-con e-child\" data-id=\"2d06201\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-10312f4 e-con-full left e-flex e-con e-child\" data-id=\"10312f4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-620e0b4 e-con-full desktopContent e-flex e-con e-child\" data-id=\"620e0b4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-cb714b6 e-con-full desktopContentSection e-flex e-con e-child\" data-id=\"cb714b6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-301f156 elementor-widget elementor-widget-heading\" data-id=\"301f156\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Add Your Heading Text Here<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d580f1 elementor-widget elementor-widget-text-editor\" data-id=\"0d580f1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-50d3a50 elementor-widget elementor-widget-button\" data-id=\"50d3a50\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Click here<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8459ac9 e-con-full desktopContentSection e-flex e-con e-child\" data-id=\"8459ac9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-29f8978 elementor-widget elementor-widget-heading\" data-id=\"29f8978\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Add Your Heading Text Here<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1755d08 elementor-widget elementor-widget-text-editor\" data-id=\"1755d08\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2c77236 elementor-widget elementor-widget-button\" data-id=\"2c77236\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Click here<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\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-aa908a8 e-con-full e-flex e-con e-child\" data-id=\"aa908a8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-33e3198 desktopContent e-flex e-con-boxed e-con e-child\" data-id=\"33e3198\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;sticky&quot;:&quot;top&quot;,&quot;sticky_parent&quot;:&quot;yes&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<div class=\"elementor-element elementor-element-cc014eb e-con-full desktopPhoto e-flex e-con e-child\" data-id=\"cc014eb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-d9bcbbd e-con-full desktopPhoto e-flex e-con e-child\" data-id=\"d9bcbbd\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3182769 elementor-widget elementor-widget-image\" data-id=\"3182769\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/dpromtex.com\/wp-content\/uploads\/elementor\/thumbs\/Gemini_Generated_Image_o2c4qio2c4qio2c4-rs8egu7lllw1ule6ls951j7hhl6uiy13tmeajgfse4.webp\" title=\"Gemini_Generated_Image_o2c4qio2c4qio2c4\" alt=\"Gemini_Generated_Image_o2c4qio2c4qio2c4\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f4314b2 e-con-full desktopPhoto e-flex e-con e-child\" data-id=\"f4314b2\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6e7a7b5 elementor-widget elementor-widget-image\" data-id=\"6e7a7b5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/dpromtex.com\/wp-content\/uploads\/elementor\/thumbs\/Gemini_Generated_Image_nj705jnj705jnj70-rs8eanfulvf3f0drqlyk4lf8p9ouuogpyzs7svm3cs.webp\" title=\"Gemini_Generated_Image_nj705jnj705jnj70\" alt=\"Gemini_Generated_Image_nj705jnj705jnj70\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\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\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-59e98a2 e-flex e-con-boxed e-con e-child\" data-id=\"59e98a2\" 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-81fa4f4 elementor-widget elementor-widget-html\" data-id=\"81fa4f4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.11.0\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.11.0\/ScrollTrigger.min.js\"><\/script>\r\n\r\n<script>\r\nlet mediaAnimation = gsap.matchMedia();\r\nScrollTrigger.defaults({\r\n  markers: false\r\n});\r\n\r\nconst colors = [\"#2E4D71\", \"#856546\", \"#05625C\", \"#5A483E\", \"#886648\"];\r\n\r\nmediaAnimation.add(\"(min-width: 666px)\", () => {\r\n  \/\/ Desktop animations\r\n  const details = gsap.utils.toArray(\".desktopContentSection:not(:first-child)\");\r\n  const photos = gsap.utils.toArray(\".desktopPhoto:not(:first-child)\");\r\n\r\n  gsap.set(photos, { clipPath: 'inset(100% 0% 0% 0%)', autoAlpha: 1 });\r\n\r\n  const allPhotos = gsap.utils.toArray(\".desktopPhoto\");\r\n\r\n  details.forEach((section, i) => {\r\n      let bgColor = colors[i + 1];\r\n      ScrollTrigger.create({\r\n          trigger: section,\r\n          start: \"200 bottom\",\r\n          end: \"+=100%\",\r\n\r\n          onToggle: self => {\r\n              if (self.isActive) {\r\n                  gsap.to(\".gallery\", { backgroundColor: bgColor });\r\n              } else if ((i === 0 && self.direction < 0) || (i === details.length - 1 && self.direction > 0)) {\r\n                  gsap.to(\".gallery\", { backgroundColor: \"#2E4D71\" });\r\n              }\r\n          }\r\n      });\r\n  });\r\n\r\n  details.forEach((detail, index) => {\r\n      let headline = detail.querySelector(\".reveal\");\r\n      let animation = gsap.timeline()\r\n          .to(photos[index], { clipPath: 'inset(0% 0% 0% 0%)', autoAlpha: 1, duration: 1.5 })\r\n          .set(allPhotos[index], { autoAlpha: 1, duration: 1.5 });\r\n\r\n      ScrollTrigger.create({\r\n          trigger: headline,\r\n          start: \"top 120%\",\r\n          end: \"top 60%\",\r\n          animation: animation,\r\n          scrub: true,\r\n          markers: false\r\n      });\r\n  });\r\n});\r\n\r\nmediaAnimation.add(\"(max-width: 665px)\", () => {\r\n  \/\/ Mobile animations\r\n  const details = gsap.utils.toArray(\".desktopContentSection:not(:first-child)\");\r\n\r\n  details.forEach((section, i) => {\r\n      let bgColor = colors[i + 1];\r\n      ScrollTrigger.create({\r\n          trigger: section,\r\n          start: \"200 bottom\",\r\n          end: \"+=100%\",\r\n\r\n          onToggle: self => {\r\n              if (self.isActive) {\r\n                  gsap.to(\".gallery\", { backgroundColor: bgColor });\r\n              } else if ((i === 0 && self.direction < 0) || (i === details.length - 1 && self.direction > 0)) {\r\n                  gsap.to(\".gallery\", { backgroundColor: \"#2E4D71\" });\r\n              }\r\n          }\r\n      });\r\n  });\r\n});\r\n<\/script>\r\n\r\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Add Your Heading Text Here Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-257","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dpromtex.com\/index.php?rest_route=\/wp\/v2\/pages\/257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dpromtex.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dpromtex.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dpromtex.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dpromtex.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=257"}],"version-history":[{"count":142,"href":"https:\/\/dpromtex.com\/index.php?rest_route=\/wp\/v2\/pages\/257\/revisions"}],"predecessor-version":[{"id":421,"href":"https:\/\/dpromtex.com\/index.php?rest_route=\/wp\/v2\/pages\/257\/revisions\/421"}],"wp:attachment":[{"href":"https:\/\/dpromtex.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}