{"id":2271,"date":"2026-03-06T14:06:17","date_gmt":"2026-03-06T14:06:17","guid":{"rendered":"https:\/\/jcristian.com.br\/?page_id=2271"},"modified":"2026-03-06T20:05:19","modified_gmt":"2026-03-06T20:05:19","slug":"gsap","status":"publish","type":"page","link":"https:\/\/jcristian.com.br\/en\/gsap\/","title":{"rendered":"gsap"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"2271\" class=\"elementor elementor-2271\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d3ee55c e-con-full e-flex e-con e-parent\" data-id=\"d3ee55c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;tc_dark_mode_responsive_hide_in_dark&quot;:&quot;no&quot;,&quot;tc_dark_mode_responsive_hide_in_light&quot;:&quot;no&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-9fdb522 e-con-full animation e-flex e-con e-child\" data-id=\"9fdb522\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;position&quot;:&quot;fixed&quot;,&quot;tc_dark_mode_responsive_hide_in_dark&quot;:&quot;no&quot;,&quot;tc_dark_mode_responsive_hide_in_light&quot;:&quot;no&quot;}\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-31986fc e-con-full animation e-flex e-con e-child\" data-id=\"31986fc\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;tc_dark_mode_responsive_hide_in_dark&quot;:&quot;no&quot;,&quot;tc_dark_mode_responsive_hide_in_light&quot;:&quot;no&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-90fa006 elementor-widget elementor-widget-html\" data-id=\"90fa006\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;tc_dark_mode_responsive_hide_in_dark&quot;:&quot;no&quot;,&quot;tc_dark_mode_responsive_hide_in_light&quot;:&quot;no&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- AG\u00caNCIA POMAR \u2014 Hex\u00e1gono no centro, textos abaixo -->\r\n<!-- Requer GSAP + ScrollTrigger j\u00e1 carregados no WordPress -->\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@900&family=DM+Sans:wght@300;400&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n<style>\r\n  .pomar-scene {\r\n\r\n    min-height: 200vh;\r\n    padding: 0 2rem;\r\n  }\r\n\r\n  .pomar-hero {\r\n    min-height: 100vh;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n\r\n  .pomar-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 3rem;\r\n    text-align: center;\r\n  }\r\n\r\n  \/* HEXAGON *\/\r\n  .pomar-hex-wrap {\r\n    flex-shrink: 0;\r\n    opacity: 0;\r\n  }\r\n\r\n  .pomar-hex-svg {\r\n    width: clamp(140px, 18vw, 220px);\r\n    height: auto;\r\n    transform-origin: center center;\r\n    display: block;\r\n  }\r\n\r\n  .pomar-hex-outline {\r\n    fill: none;\r\n    stroke: #1a1612;\r\n    stroke-width: 1.5;\r\n  }\r\n\r\n  .pomar-hex-inner {\r\n    fill: none;\r\n    stroke: #a89880;\r\n    stroke-width: 0.8;\r\n    stroke-dasharray: 4 6;\r\n  }\r\n\r\n  .pomar-hex-dot { fill: #a89880; }\r\n\r\n  \/* TEXT *\/\r\n  .pomar-text-block { text-align: center; }\r\n\r\n  .pomar-label {\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-weight: 300;\r\n    font-size: 0.85rem;\r\n    letter-spacing: 0.3em;\r\n    text-transform: uppercase;\r\n    color: #a89880;\r\n    margin-bottom: 1.2rem;\r\n    opacity: 0;\r\n  }\r\n\r\n  .pomar-title {\r\n    display: flex;\r\n    gap: 0.18em;\r\n    justify-content: center;\r\n    line-height: 1;\r\n  }\r\n\r\n  .pomar-word {\r\n    overflow: hidden;\r\n    display: inline-block;\r\n  }\r\n\r\n  .pomar-word-inner {\r\n    display: inline-block;\r\n    font-family: 'Playfair Display', serif;\r\n    font-weight: 900;\r\n    font-size: clamp(3rem, 8vw, 7rem);\r\n    color: #1a1612;\r\n    transform-origin: bottom center;\r\n  }\r\n\r\n  .pomar-divider {\r\n    width: 0;\r\n    height: 1.5px;\r\n    background: #a89880;\r\n    margin: 1.5rem auto 1.4rem;\r\n  }\r\n\r\n  .pomar-tagline {\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-weight: 300;\r\n    font-size: 0.9rem;\r\n    letter-spacing: 0.2em;\r\n    color: #7a6e62;\r\n    opacity: 0;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .pomar-section2 {\r\n    padding: 8rem 2rem;\r\n    text-align: center;\r\n  }\r\n\r\n  .pomar-scroll-hint {\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-weight: 300;\r\n    font-size: 0.85rem;\r\n    letter-spacing: 0.25em;\r\n    text-transform: uppercase;\r\n    color: #a89880;\r\n    opacity: 0;\r\n  }\r\n<\/style>\r\n\r\n<div class=\"pomar-scene\">\r\n  <div class=\"pomar-hero\">\r\n    <div class=\"pomar-content\">\r\n\r\n      <!-- Folha SVG \u2014 centro -->\r\n      <div class=\"pomar-hex-wrap\">\r\n        <svg class=\"pomar-hex-svg\" viewbox=\"0 0 200 240\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n          <!-- Folha: corpo principal -->\r\n          <path class=\"pomar-hex-outline\"\r\n            d=\"M100,20 C140,20 175,55 175,100 C175,150 130,200 100,220 C70,200 25,150 25,100 C25,55 60,20 100,20 Z\"\r\n            fill=\"none\" stroke=\"#1a1612\" stroke-width=\"1.5\"\/>\r\n          <!-- Nervura central -->\r\n          <line x1=\"100\" y1=\"20\" x2=\"100\" y2=\"220\" stroke=\"#a89880\" stroke-width=\"1\"\/>\r\n          <!-- Nervuras laterais esquerdas -->\r\n          <line x1=\"100\" y1=\"70\"  x2=\"50\"  y2=\"95\"  stroke=\"#d4c9b8\" stroke-width=\"0.8\"\/>\r\n          <line x1=\"100\" y1=\"100\" x2=\"38\"  y2=\"118\" stroke=\"#d4c9b8\" stroke-width=\"0.8\"\/>\r\n          <line x1=\"100\" y1=\"130\" x2=\"45\"  y2=\"148\" stroke=\"#d4c9b8\" stroke-width=\"0.8\"\/>\r\n          <line x1=\"100\" y1=\"158\" x2=\"58\"  y2=\"173\" stroke=\"#d4c9b8\" stroke-width=\"0.8\"\/>\r\n          <!-- Nervuras laterais direitas -->\r\n          <line x1=\"100\" y1=\"70\"  x2=\"150\" y2=\"95\"  stroke=\"#d4c9b8\" stroke-width=\"0.8\"\/>\r\n          <line x1=\"100\" y1=\"100\" x2=\"162\" y2=\"118\" stroke=\"#d4c9b8\" stroke-width=\"0.8\"\/>\r\n          <line x1=\"100\" y1=\"130\" x2=\"155\" y2=\"148\" stroke=\"#d4c9b8\" stroke-width=\"0.8\"\/>\r\n          <line x1=\"100\" y1=\"158\" x2=\"142\" y2=\"173\" stroke=\"#d4c9b8\" stroke-width=\"0.8\"\/>\r\n          <!-- Ponto no topo -->\r\n          <circle class=\"pomar-hex-dot\" cx=\"100\" cy=\"20\"  r=\"2.5\"\/>\r\n          <!-- Cabo da folha -->\r\n          <line x1=\"100\" y1=\"220\" x2=\"100\" y2=\"235\" stroke=\"#a89880\" stroke-width=\"1.2\"\/>\r\n          <circle class=\"pomar-hex-dot\" cx=\"100\" cy=\"235\" r=\"2\"\/>\r\n        <\/svg>\r\n      <\/div>\r\n\r\n      <!-- Texto \u2014 abaixo -->\r\n      <div class=\"pomar-text-block\">\r\n        <p class=\"pomar-label\">bem-vindo \u00e0<\/p>\r\n        <div class=\"pomar-title\">\r\n          <div class=\"pomar-word\"><span class=\"pomar-word-inner\">Ag\u00eancia<\/span><\/div>\r\n          <div class=\"pomar-word\"><span class=\"pomar-word-inner\">Pomar<\/span><\/div>\r\n        <\/div>\r\n        <div class=\"pomar-divider\"><\/div>\r\n        <p class=\"pomar-tagline\">onde ideias florescem<\/p>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"pomar-section2\">\r\n    <p class=\"pomar-scroll-hint\">\u2193<\/p>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n  function initPomar() {\r\n    if (typeof gsap === 'undefined') { setTimeout(initPomar, 100); return; }\r\n\r\n    if (typeof ScrollTrigger !== 'undefined') {\r\n      gsap.registerPlugin(ScrollTrigger);\r\n      runAnimations();\r\n    } else {\r\n      var st = document.createElement('script');\r\n      st.src = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js';\r\n      st.onload = function () { gsap.registerPlugin(ScrollTrigger); runAnimations(); };\r\n      document.head.appendChild(st);\r\n    }\r\n  }\r\n\r\n  function runAnimations() {\r\n    var words   = document.querySelectorAll('.pomar-word-inner');\r\n    var label   = document.querySelector('.pomar-label');\r\n    var divider = document.querySelector('.pomar-divider');\r\n    var tagline = document.querySelector('.pomar-tagline');\r\n    var hexWrap = document.querySelector('.pomar-hex-wrap');\r\n    var hexSvg  = document.querySelector('.pomar-hex-svg');\r\n    var hint    = document.querySelector('.pomar-scroll-hint');\r\n\r\n    gsap.set(words,  { y: '110%', scale: 0.85, opacity: 0 });\r\n    gsap.set([label, tagline, hexWrap], { opacity: 0 });\r\n    gsap.set(divider, { width: 0 });\r\n\r\n    var tl = gsap.timeline({ delay: 0.2 });\r\n\r\n    tl.to(hexWrap, { opacity: 1, duration: 0.8, ease: 'power2.out' })\r\n      .to(label,   { opacity: 1, duration: 0.6, ease: 'power2.out' }, '-=0.3')\r\n      .to(words, {\r\n        y: '0%', scale: 1, opacity: 1,\r\n        duration: 0.9, ease: 'expo.out', stagger: 0.12\r\n      }, '-=0.2')\r\n      .to(divider, { width: 80, duration: 0.6, ease: 'power2.inOut' }, '-=0.2')\r\n      .to(tagline, { opacity: 1, duration: 0.5, ease: 'power1.out' }, '-=0.1');\r\n\r\n    gsap.to(hexSvg, {\r\n      rotation: 360,\r\n      ease: 'none',\r\n      scrollTrigger: {\r\n        trigger: '.pomar-scene',\r\n        start: 'top top',\r\n        end: 'bottom bottom',\r\n        scrub: 1.5,\r\n      }\r\n    });\r\n\r\n    if (hint) {\r\n      gsap.to(hint, {\r\n        opacity: 1, duration: 0.6, ease: 'power1.out',\r\n        scrollTrigger: { trigger: '.pomar-section2', start: 'top 80%' }\r\n      });\r\n    }\r\n  }\r\n\r\n  if (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', initPomar);\r\n  } else {\r\n    initPomar();\r\n  }\r\n})();\r\n<\/script>\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-9144c25 e-con-full animation e-flex e-con e-child\" data-id=\"9144c25\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;tc_dark_mode_responsive_hide_in_dark&quot;:&quot;no&quot;,&quot;tc_dark_mode_responsive_hide_in_light&quot;:&quot;no&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-224c1e5 end-lottie elementor-widget elementor-widget-heading\" data-id=\"224c1e5\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;tc_dark_mode_responsive_hide_in_dark&quot;:&quot;no&quot;,&quot;tc_dark_mode_responsive_hide_in_light&quot;:&quot;no&quot;}\" 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\">Jhonatan Cristian <\/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-59df3e1 e-flex e-con-boxed e-con e-parent\" data-id=\"59df3e1\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;tc_dark_mode_responsive_hide_in_dark&quot;:&quot;no&quot;,&quot;tc_dark_mode_responsive_hide_in_light&quot;:&quot;no&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0ba45c3 elementor-widget elementor-widget-html\" data-id=\"0ba45c3\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;tc_dark_mode_responsive_hide_in_dark&quot;:&quot;no&quot;,&quot;tc_dark_mode_responsive_hide_in_light&quot;:&quot;no&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/gsap.min.js\"><\/script>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/ScrollTrigger.min.js\"><\/script>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bodymovin\/5.9.6\/lottie.min.js\"><\/script>\r\n\r\n<script>\r\n\r\n\r\n    document.addEventListener(\"DOMContentLoaded\", () => {\r\n\r\n    let lottieContainer = document.querySelector(\".animation\");\r\n\r\n    let animacaoPath;\r\n\r\n    if (window.innerWidth <= 767) { \/\/ N\u00famero para o ponto de Quebra Mobile\r\n        animacaoPath = 'https:\/\/jcristian.com.br\/wp-content\/uploads\/2026\/03\/animation-2.json'; \/\/ Anima\u00e7\u00e3o para Celular\r\n    } else {\r\n        animacaoPath = 'https:\/\/jcristian.com.br\/wp-content\/uploads\/2026\/03\/animation-2.json'; \/\/ Anima\u00e7\u00e3o para Desktop\r\n    }\r\n\r\n    if(lottieContainer){\r\n        LottieScrollTrigger({\r\n            trigger: \".animation\",\r\n            start: \"top center\",\r\n            endTrigger: \".end-lottie\",\r\n            end: `bottom center+=${\r\n                document.querySelector(\".animation\").offsetHeight\r\n            }`,\r\n            render: \"svg\",\r\n            target: \".animation\",\r\n            path:  animacaoPath,\r\n            scrub: 2,\r\n        })\r\n    }\r\n\r\n    function LottieScrollTrigger(vars){\r\n        let playhead = { frame: 0 },\r\n        target = gsap.utils.toArray(vars.target)[0],\r\n        speeds = { slow: \"+=2000\", medium: \"+=1000\", fast: \"+=500\" },\r\n        st = {\r\n            trigger: \".trigger\",\r\n            end: speeds[vars.speed] || \"+=1000\",\r\n            scrub: 1,\r\n            markers: false,\r\n        },\r\n        ctx = gsap.context && gsap.context(),\r\n        animation = lottie.loadAnimation({\r\n            container: target,\r\n            renderer: vars.renderer || \"svg\",\r\n            loop: false,\r\n            autoplay: false,\r\n            path: vars.path,\r\n            renderSettings: vars.rendererSettings || {\r\n                preserveAspectRatio: \"xMidYMid slice\"\r\n            },\r\n        });\r\n\r\n        for(let p in vars){\r\n            st[p] = vars[p];\r\n        }\r\n\r\n        animation.addEventListener(\"DOMLoaded\", () => {\r\n            let createTween = function(){\r\n                animation.frameTween = gsap.to(playhead, {\r\n                    frame: animation.totalFrames - 1,\r\n                    ease: \"none\",\r\n                    onUpdate: () => animation.goToAndStop(playhead.frame, true),\r\n                    scrollTrigger: st,\r\n                });\r\n                return() => animation.destroy && animation.destroy();\r\n            };\r\n\r\n            ctx && ctx.add ? ctx.add(createTween) : createTween();\r\n        });\r\n\r\n        return animation;\r\n    }\r\n\r\n})\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>","protected":false},"excerpt":{"rendered":"<p>bem-vindo \u00e0 Ag\u00eancia Pomar onde ideias florescem \u2193 Jhonatan Cristian<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"..\/public\/views\/revslider-page-template.php","meta":{"footnotes":""},"class_list":["post-2271","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jcristian.com.br\/en\/wp-json\/wp\/v2\/pages\/2271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jcristian.com.br\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jcristian.com.br\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jcristian.com.br\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jcristian.com.br\/en\/wp-json\/wp\/v2\/comments?post=2271"}],"version-history":[{"count":145,"href":"https:\/\/jcristian.com.br\/en\/wp-json\/wp\/v2\/pages\/2271\/revisions"}],"predecessor-version":[{"id":2433,"href":"https:\/\/jcristian.com.br\/en\/wp-json\/wp\/v2\/pages\/2271\/revisions\/2433"}],"wp:attachment":[{"href":"https:\/\/jcristian.com.br\/en\/wp-json\/wp\/v2\/media?parent=2271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}