{"id":4528,"date":"2026-02-12T07:31:33","date_gmt":"2026-02-12T07:31:33","guid":{"rendered":"https:\/\/ekimos.com\/demo\/1\/?page_id=4528"},"modified":"2026-02-13T05:18:50","modified_gmt":"2026-02-13T05:18:50","slug":"image-expand-on-scroll","status":"publish","type":"page","link":"https:\/\/ekimos.com\/demo\/1\/image-expand-on-scroll\/","title":{"rendered":"Image Expand on Scroll"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4528\" class=\"elementor elementor-4528\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-42a31a9 e-flex e-con-boxed e-con e-parent\" data-id=\"42a31a9\" 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\t\t<div class=\"elementor-element elementor-element-f1c67bc elementor-widget elementor-widget-heading\" data-id=\"f1c67bc\" 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\">IMAGE EXPAND ON SCROLL<\/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-c485be2 e-con-full tca-expand-wrapper e-flex e-con e-parent\" data-id=\"c485be2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-8ba181a e-con-full tca-expand e-flex e-con e-child\" data-id=\"8ba181a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d9b351c tca-title elementor-widget elementor-widget-heading\" data-id=\"d9b351c\" 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\">Scroll to Expand<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0f8411a tca-text elementor-widget elementor-widget-heading\" data-id=\"0f8411a\" 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<p class=\"elementor-heading-title elementor-size-default\">Welcome to Ekimos<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5818f88 tca-btn elementor-widget elementor-widget-button\" data-id=\"5818f88\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\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<\/div>\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-6c289d6 e-flex e-con-boxed e-con e-parent\" data-id=\"6c289d6\" 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-9c87114 elementor-widget elementor-widget-html\" data-id=\"9c87114\" 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<style>\n  .tca-expand,\n  .tca-expand-wrapper {\n    transition: none !important;\n  }\n\n  .tca-expand {\n    position: relative !important;\n  }\n\n  .tca-title,\n  .tca-text,\n  .tca-btn {\n    opacity: 0;\n    transform: translateY(30px);\n  }\n  \n  @media (max-width: 767px) {\n  .tca-title,\n  .tca-text,\n  .tca-btn {\n    opacity: 1 !important;\n    transform: translateY(50px);\n  }\n}\n<\/style>\n\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\n\n<script>\nwindow.addEventListener(\"load\", () => {\n\n  gsap.registerPlugin(ScrollTrigger);\n\n  ScrollTrigger.matchMedia({\n\n    \/\/ ================= DESKTOP =================\n    \"(min-width: 768px)\": function () {\n\n      const tl = gsap.timeline({\n        scrollTrigger: {\n          trigger: \".tca-expand-wrapper\",\n          start: \"50% 50%\",\n          end: \"200% 50%\",\n          scrub: true,\n          pin: true,\n          anticipatePin: 1,\n          invalidateOnRefresh: true\n        }\n      });\n\n      tl.to(\".tca-expand\", {\n        width: \"100%\",\n        minHeight: \"100vh\",\n        ease: \"power2.out\"\n      })\n      .to({}, { duration: 0.3 })\n      .to(\".tca-title, .tca-text, .tca-btn\", {\n        opacity: 1,\n        y: 0,\n        stagger: 0.15,\n        duration: 0.6,\n        ease: \"power3.out\"\n      });\n    },\n\n    \/\/ ================= MOBILE =================\n    \"(max-width: 767px)\": function () {\n\n      gsap.to(\".tca-title, .tca-text, .tca-btn\", {\n        opacity: 1,\n        y: 0,\n        duration: 0.8,\n        ease: \"power3.out\",\n        stagger: 0.15,\n        scrollTrigger: {\n          trigger: \".tca-expand-wrapper\",\n          start: \"top 20%\",\n          toggleActions: \"play none none reverse\"\n        }\n      });\n    }\n\n  });\n\n});\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<div class=\"elementor-element elementor-element-47db4ef e-flex e-con-boxed e-con e-parent\" data-id=\"47db4ef\" 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\t\t<div class=\"elementor-element elementor-element-2380c2d elementor-widget elementor-widget-heading\" data-id=\"2380c2d\" 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\">IMAGE EXPAND ON SCROLL<\/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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>IMAGE EXPAND ON SCROLL Scroll to Expand Welcome to Ekimos Click here IMAGE EXPAND ON SCROLL<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4528","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ekimos.com\/demo\/1\/wp-json\/wp\/v2\/pages\/4528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekimos.com\/demo\/1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ekimos.com\/demo\/1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ekimos.com\/demo\/1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekimos.com\/demo\/1\/wp-json\/wp\/v2\/comments?post=4528"}],"version-history":[{"count":26,"href":"https:\/\/ekimos.com\/demo\/1\/wp-json\/wp\/v2\/pages\/4528\/revisions"}],"predecessor-version":[{"id":4594,"href":"https:\/\/ekimos.com\/demo\/1\/wp-json\/wp\/v2\/pages\/4528\/revisions\/4594"}],"wp:attachment":[{"href":"https:\/\/ekimos.com\/demo\/1\/wp-json\/wp\/v2\/media?parent=4528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}