Animate Hero Section

{"id":6618,"name":"gsap-animated-section-one","title":"GSAP Animated Section One","date":"2026-02-27 14:01:39","date_formatted":"February 27, 2026","author":{"name":"AK_Developer_25","avatar":"https:\/\/secure.gravatar.com\/avatar\/4895fa216fc2f1ee16e6575899e50eb2388264a879a9791a3ad02c7bed840715?s=60&d=mm&r=g","url":"https:\/\/gallopbiz.in\/ak-dev"},"permalink":"https:\/\/gallopbiz.in\/ak-dev\/template\/gsap-animated-section-one\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"836511","name":"section","parent":0,"children":["3e55b8","13ea16"],"settings":{"_cssGlobalClasses":["hahfmw"],"_justifyContent":"center"},"label":"Animated Section One"},{"id":"3e55b8","name":"container","parent":"836511","children":["f663e3","57d53c"],"settings":[]},{"id":"f663e3","name":"container","parent":"3e55b8","children":["902ee0","87a6e3"],"settings":{"_justifyContent":"center","_direction":"row","_alignItems":"center","_cssGlobalClasses":["nqfmle"]},"label":"Image Container"},{"id":"902ee0","name":"block","parent":"f663e3","children":["887385","5f1d73","120ce8","2b424b","a9de68","0abb6c","f21983","94c1b9","3a97ee"],"settings":{"_cssGlobalClasses":["kovpcs"]},"label":"Image\/video"},{"id":"887385","name":"image","parent":"902ee0","children":[],"settings":{"_width":"240","image":{"url":"https:\/\/cdn.prod.website-files.com\/61d25fd318bc0f5904dbcad5\/61d264d607e162095928e613_ezgif.com-gif-maker.gif","external":true,"filename":"61d264d607e162095928e613_ezgif.com-gif-maker.gif"},"_cssGlobalClasses":["xprsip"]},"themeStyles":[]},{"id":"5f1d73","name":"image","parent":"902ee0","children":[],"settings":{"_width":"240","image":{"url":"https:\/\/cdn.prod.website-files.com\/61d25fd318bc0f5904dbcad5\/61d265bda0fbcb491e183ca0_ezgif.com-gif-maker(1).gif","external":true,"filename":"61d265bda0fbcb491e183ca0_ezgif.com-gif-maker(1).gif"},"_cssGlobalClasses":["xprsip"]},"themeStyles":[]},{"id":"120ce8","name":"image","parent":"902ee0","children":[],"settings":{"_width":"240","image":{"url":"https:\/\/cdn.prod.website-files.com\/61d25fd318bc0f5904dbcad5\/61d26581d86cde27c05e865e_ezgif.com-gif-maker.gif","external":true,"filename":"61d26581d86cde27c05e865e_ezgif.com-gif-maker.gif"},"_cssGlobalClasses":["xprsip"]},"themeStyles":[]},{"id":"2b424b","name":"image","parent":"902ee0","children":[],"settings":{"_width":"240","_cssGlobalClasses":["xprsip"],"image":{"url":"https:\/\/cdn.prod.website-files.com\/61d25fd318bc0f5904dbcad5\/61d263a86a425a65ac91a94c_ezgif.com-gif-maker.gif","external":true,"filename":"61d263a86a425a65ac91a94c_ezgif.com-gif-maker.gif"}},"themeStyles":[]},{"id":"a9de68","name":"image","parent":"902ee0","children":[],"settings":{"_width":"240","_cssGlobalClasses":["xprsip"],"image":{"url":"https:\/\/cdn.prod.website-files.com\/61d25fd318bc0f5904dbcad5\/61d2649087db84b1b71051e3_ezgif.com-gif-maker.gif","external":true,"filename":"61d2649087db84b1b71051e3_ezgif.com-gif-maker.gif"}},"themeStyles":[]},{"id":"0abb6c","name":"image","parent":"902ee0","children":[],"settings":{"_width":"240","_cssGlobalClasses":["xprsip"],"image":{"url":"https:\/\/cdn.prod.website-files.com\/61d25fd318bc0f5904dbcad5\/61d267fcf0aed0c781ddda78_ezgif.com-gif-maker.gif","external":true,"filename":"61d267fcf0aed0c781ddda78_ezgif.com-gif-maker.gif"}},"themeStyles":[]},{"id":"f21983","name":"image","parent":"902ee0","children":[],"settings":{"_width":"240","_cssGlobalClasses":["xprsip"],"image":{"url":"https:\/\/cdn.prod.website-files.com\/61d25fd318bc0f5904dbcad5\/61d264476219262681e969eb_ezgif.com-gif-maker(1).gif","external":true,"filename":"61d264476219262681e969eb_ezgif.com-gif-maker(1).gif"}},"themeStyles":[]},{"id":"94c1b9","name":"image","parent":"902ee0","children":[],"settings":{"_width":"240","_cssGlobalClasses":["xprsip"],"image":{"url":"https:\/\/cdn.prod.website-files.com\/61d25fd318bc0f5904dbcad5\/61d264146219262d0de969d1_ezgif.com-gif-maker.gif","external":true,"filename":"61d264146219262d0de969d1_ezgif.com-gif-maker.gif"}},"themeStyles":[]},{"id":"3a97ee","name":"image","parent":"902ee0","children":[],"settings":{"_width":"240","_cssGlobalClasses":["xprsip"],"image":{"url":"https:\/\/cdn.prod.website-files.com\/61d25fd318bc0f5904dbcad5\/61d263d9d86cde09d55e8572_ezgif.com-gif-maker.gif","external":true,"filename":"61d263d9d86cde09d55e8572_ezgif.com-gif-maker.gif"}},"themeStyles":[]},{"id":"87a6e3","name":"block","parent":"f663e3","children":[],"settings":{"_cssGlobalClasses":["tavdxw"]},"label":"Scroll Intersection"},{"id":"57d53c","name":"container","parent":"3e55b8","children":["0c2a12","922b97","32865e","1e6c76","50768b","4fe05e","56ad54","6f79db","5799c4"],"settings":{"_cssGlobalClasses":["emiupd"]},"label":"Heading Container"},{"id":"0c2a12","name":"heading","parent":"57d53c","children":[],"settings":{"text":"Shoes","tag":"custom","customTag":"span","_cssGlobalClasses":["blblbe"]}},{"id":"922b97","name":"heading","parent":"57d53c","children":[],"settings":{"text":"Hair cut","tag":"custom","customTag":"span","_cssGlobalClasses":["blblbe"]}},{"id":"32865e","name":"heading","parent":"57d53c","children":[],"settings":{"text":"Like","tag":"custom","customTag":"span","_cssGlobalClasses":["blblbe"]}},{"id":"1e6c76","name":"heading","parent":"57d53c","children":[],"settings":{"text":"Wellness","tag":"custom","customTag":"span","_cssGlobalClasses":["blblbe"]}},{"id":"50768b","name":"heading","parent":"57d53c","children":[],"settings":{"text":"Sports","tag":"custom","customTag":"span","_cssGlobalClasses":["blblbe"]}},{"id":"4fe05e","name":"heading","parent":"57d53c","children":[],"settings":{"text":"Game","tag":"custom","customTag":"span","_cssGlobalClasses":["blblbe"]}},{"id":"56ad54","name":"heading","parent":"57d53c","children":[],"settings":{"text":"Astronaut","tag":"custom","customTag":"span","_cssGlobalClasses":["blblbe"]}},{"id":"6f79db","name":"heading","parent":"57d53c","children":[],"settings":{"text":"Fishing","tag":"custom","customTag":"span","_cssGlobalClasses":["blblbe"]}},{"id":"5799c4","name":"heading","parent":"57d53c","children":[],"settings":{"text":"Spidey","tag":"custom","customTag":"span","_cssGlobalClasses":["blblbe"]}},{"id":"13ea16","name":"code","parent":"836511","children":[],"settings":{"code":"\n\n \n\n\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n\n gsap.registerPlugin(ScrollTrigger);\n\n const headings = gsap.utils.toArray(\".animate_section-one--heading\");\n const images = gsap.utils.toArray(\".animate_section-one--image-block img\"); \/\/ your image wrapper\n\n if (!headings.length || !images.length) return;\n\n \/\/ hide all images except first\n images.forEach((img, i) => {\n img.style.position = \"absolute\";\n img.style.top = 0;\n img.style.left = 0;\n img.style.opacity = i === 0 ? 1 : 0;\n img.style.transition = \"opacity .4s ease\";\n });\n\n function updateActive() {\n const viewportCenter = window.innerHeight \/ 2;\n\n let closest = null;\n let closestIndex = 0;\n let closestDistance = Infinity;\n\n headings.forEach((h, i) => {\n const rect = h.getBoundingClientRect();\n const elementCenter = rect.top + rect.height \/ 2;\n const distance = Math.abs(viewportCenter - elementCenter);\n\n if (distance h.classList.remove(\"is-active\"));\n images.forEach(img => img.style.opacity = 0);\n\n closest?.classList.add(\"is-active\");\n images[closestIndex].style.opacity = 1;\n }\n\n ScrollTrigger.create({\n trigger: \".animate_section-one\",\n start: \"top bottom\",\n end: \"bottom top\",\n scrub: true,\n onUpdate: updateActive\n });\n\n updateActive();\n\n});\n\n\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n\n gsap.registerPlugin(Draggable);\n\n const box = document.querySelector(\"#brxe-902ee0\"); \/\/ image wrapper\n if (!box) return;\n\n const vw = () => window.innerWidth;\n const vh = () => window.innerHeight;\n\n Draggable.create(box, {\n type: \"x,y\",\n inertia: true,\n bounds: window,\n edgeResistance: 0.7,\n\n onDrag: updateScale,\n onThrowUpdate: updateScale\n});\n\n\n function updateScale() {\n const rect = box.getBoundingClientRect();\n\n const centerX = rect.left + rect.width \/ 2;\n const centerY = rect.top + rect.height \/ 2;\n\n const dx = centerX - vw() \/ 2;\n const dy = centerY - vh() \/ 2;\n\n const distance = Math.sqrt(dx * dx + dy * dy);\n\n const maxDistance = Math.sqrt(\n Math.pow(vw() \/ 2, 2) + Math.pow(vh() \/ 2, 2)\n );\n\n \/\/ Normalize 0\u20131\n const progress = distance \/ maxDistance;\n\n \/\/ Scale logic\n const scale = gsap.utils.mapRange(0, 1, 1.7, 0.8, progress);\n\n gsap.to(box, {\n scale,\n duration: 0.2,\n overwrite: true,\n ease: \"power2.out\"\n });\n }\n\n});\n\n\n\n","executeCode":true,"user_id":1,"time":1770888796,"cssCode":".animate_section-one--heading {\n transition: color .3s ease;\n}\n\n.animate_section-one--heading.is-active {\n color: #d1ecee;\n}\n\n.animate_section-one--image-block {\n cursor: grab;\n}\n\n.animate_section-one--image-block:active {\n cursor: grabbing;\n}\n"},"themeStyles":[],"label":"GSAP Code"}],"templateType":"section","global_classes":[{"id":"hahfmw","name":"animate_section-one","settings":{"_heightMin":"100vh","_background":{"color":{"hex":"#0f1314"}},"_padding":{"top":"10%","left":"5%","right":"5%","bottom":"10%"}}},{"id":"tavdxw","name":"scroll-intersection--1","settings":{"_height":"100"}},{"id":"nqfmle","name":"sticky_top--100","settings":{"_position":"sticky","_top":"30%"}},{"id":"blblbe","name":"animate_section-one--heading","settings":{"_typography":{"font-size":"10vw","color":{"hex":"#4a5456"},"line-height":"1","font-family":"SUSE","font-weight":"300"},"_typography:tablet_portrait":{"font-size":"120"},"_typography:mobile_landscape":{"font-size":"80"},"_typography:mobile_portrait":{"font-size":"70"}}},{"id":"emiupd","name":"animate_section-one--container","settings":{"_padding":{"left":"30%","top":"10%","bottom":"20%"},"_margin":{"top":"30%"},"_padding:tablet_portrait":{"top":"50%","bottom":"50%"},"_padding:mobile_landscape":{"top":"60vh","bottom":"60vh"},"_padding:mobile_portrait":{"left":"0"}}},{"id":"kovpcs","name":"animate_section-one--image-block","settings":{"_position":"relative"},"modified":1770888554,"user_id":1},{"id":"xprsip","name":"animate_section-one--image","settings":{"_objectFit":"cover","_width":"290","_height":"340","_border":{"radius":{"top":"20","right":"20","bottom":"20","left":"20"}}},"modified":1770888554,"user_id":1}]}