las la-arrow-right-circle

las la-plus-square-rounded

las la-chevron-right

las la-wifi

las la-users

las la-folder-users

las la-thb-circle

label

description

TweenMax

gsap

/*!
 * DrawSVGPlugin 3.12.2
 * https://greensock.com
 * 
 * @license Copyright 2023, GreenSock. All rights reserved.
 * This plugin is a membership benefit of Club GreenSock and is only authorized for use in sites/apps/products developed by individuals/companies with an active Club GreenSock membership. See https://greensock.com/club
 * @author: Jack Doyle, jack@greensock.com
 */

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function l(){return"undefined"!=typeof window}function m(){return t||l()&&(t=window.gsap)&&t.registerPlugin&&t}function p(e){return Math.round(1e4*e)/1e4}function q(e){return parseFloat(e)||0}function r(e,t){var r=q(e);return~e.indexOf("%")?r/100*t:r}function s(e,t){return q(e.getAttribute(t))}function u(e,t,r,n,s,i){return D(Math.pow((q(r)-q(e))*s,2)+Math.pow((q(n)-q(t))*i,2))}function v(e){return console.warn(e)}function w(e){return"non-scaling-stroke"===e.getAttribute("vector-effect")}function z(e){if(!(e=k(e)[0]))return 0;var t,r,n,i,o,a,f,h=e.tagName.toLowerCase(),l=e.style,d=1,c=1;w(e)&&(c=e.getScreenCTM(),d=D(c.a*c.a+c.b*c.b),c=D(c.d*c.d+c.c*c.c));try{r=e.getBBox()}catch(e){v("Some browsers won't measure invisible elements (like display:none or masks inside defs).")}var g=r||{x:0,y:0,width:0,height:0},_=g.x,y=g.y,x=g.width,m=g.height;if(r&&(x||m)||!M[h]||(x=s(e,M[h][0]),m=s(e,M[h][1]),"rect"!==h&&"line"!==h&&(x*=2,m*=2),"line"===h&&(_=s(e,"x1"),y=s(e,"y1"),x=Math.abs(x-_),m=Math.abs(m-y))),"path"===h)i=l.strokeDasharray,l.strokeDasharray="none",t=e.getTotalLength()||0,p(d)!==p(c)&&!b&&(b=1)&&v("Warning: <path> length cannot be measured when vector-effect is non-scaling-stroke and the element isn't proportionally scaled."),t*=(d+c)/2,l.strokeDasharray=i;else if("rect"===h)t=2*x*d+2*m*c;else if("line"===h)t=u(_,y,_+x,y+m,d,c);else if("polyline"===h||"polygon"===h)for(n=e.getAttribute("points").match(P)||[],"polygon"===h&&n.push(n[0],n[1]),t=0,o=2;o<n.length;o+=2)t+=u(n[o-2],n[o-1],n[o],n[o+1],d,c)||0;else"circle"!==h&&"ellipse"!==h||(a=x/2*d,f=m/2*c,t=Math.PI*(3*(a+f)-D((3*a+f)*(a+3*f))));return t||0}function A(e,t){if(!(e=k(e)[0]))return[0,0];t=t||z(e)+1;var r=f.getComputedStyle(e),n=r.strokeDasharray||"",s=q(r.strokeDashoffset),i=n.indexOf(",");return i<0&&(i=n.indexOf(" ")),t<(n=i<0?t:q(n.substr(0,i)))&&(n=t),[-s||0,n-s||0]}function B(){l()&&(f=window,d=t=m(),k=t.utils.toArray,c=t.core.getStyleSaver,g=t.core.reverting||function(){},h=-1!==((f.navigator||{}).userAgent||"").indexOf("Edge"))}var t,k,f,h,d,b,c,g,P=/[-+=\.]*\d+[\.e\-\+]*\d*[e\-\+]*\d*/gi,M={rect:["width","height"],circle:["r","r"],ellipse:["rx","ry"],line:["x2","y2"]},D=Math.sqrt,n={version:"3.12.2",name:"drawSVG",register:function register(e){t=e,B()},init:function init(e,t,n){if(!e.getBBox)return!1;d||B();var s,i,o,a=z(e);return this.styles=c&&c(e,"strokeDashoffset,strokeDasharray,strokeMiterlimit"),this.tween=n,this._style=e.style,this._target=e,t+""=="true"?t="0 100%":t?-1===(t+"").indexOf(" ")&&(t="0 "+t):t="0 0",i=function _parse(e,t,n){var s,i,o=e.indexOf(" ");return i=o<0?(s=void 0!==n?n+"":e,e):(s=e.substr(0,o),e.substr(o+1)),s=r(s,t),(i=r(i,t))<s?[i,s]:[s,i]}(t,a,(s=A(e,a))[0]),this._length=p(a),this._dash=p(s[1]-s[0]),this._offset=p(-s[0]),this._dashPT=this.add(this,"_dash",this._dash,p(i[1]-i[0]),0,0,0,0,0,1),this._offsetPT=this.add(this,"_offset",this._offset,p(-i[0]),0,0,0,0,0,1),h&&(o=f.getComputedStyle(e)).strokeLinecap!==o.strokeLinejoin&&(i=q(o.strokeMiterlimit),this.add(e.style,"strokeMiterlimit",i,i+.01)),this._live=w(e)||~(t+"").indexOf("live"),this._nowrap=~(t+"").indexOf("nowrap"),this._props.push("drawSVG"),1},render:function render(e,t){if(t.tween._time||!g()){var r,n,s,i,o=t._pt,a=t._style;if(o){for(t._live&&(r=z(t._target))!==t._length&&(n=r/t._length,t._length=r,t._offsetPT&&(t._offsetPT.s*=n,t._offsetPT.c*=n),t._dashPT?(t._dashPT.s*=n,t._dashPT.c*=n):t._dash*=n);o;)o.r(e,o.d),o=o._next;s=t._dash||e&&1!==e&&1e-4||0,r=t._length-s+.1,i=t._offset,s&&i&&s+Math.abs(i%t._length)>t._length-.2&&(i+=i<0?.1:-.1)&&(r+=.1),a.strokeDashoffset=s?i:i+.001,a.strokeDasharray=r<.2?"none":s?s+"px,"+(t._nowrap?999999:r)+"px":"0px, 999999px"}}else t.styles.revert()},getLength:z,getPosition:A};m()&&t.registerPlugin(n),e.DrawSVGPlugin=n,e.default=n;if (typeof(window)==="undefined"||window!==e){Object.defineProperty(e,"__esModule",{value:!0})} else {delete e.default}});


drawPlugin

var elements = document.getElementsByClassName('KeyVisual_image_area__dpO96');
var svg = '<div class="Image_lds_image___Pad_ KeyVisual_image__xq_yu animate__animated animate__fadeInScaleDown KeyVisual_wide__Rtf1j"><picture><div class="svg-wrapper"><svg id="svg" viewBox="0 0 820 957" fill="none" xmlns="http://www.w3.org/2000/svg" > <g clip-path="url(#clip0_339_55)"> <path d="M585.6 886.44L585.48 748.49L468 682.5V819.38L585.6 886.44Z" fill="#05BD8E" /> <path d="M585.5 70.32L585.45 344.74L819.45 478.09L819.5 206.48L585.5 70.32Z" stroke="#007357" stroke-miterlimit="2" stroke-linecap="square" /> <path d="M351.22 480.49L351.17 752.7L585.17 886.06L585.22 614.45L351.22 480.49Z" stroke="#007357" stroke-miterlimit="2" stroke-linecap="square" /> <path d="M234.6 547.89L234.55 821.69L0.5 955.92L0.55 682.11L234.6 547.89Z" stroke="#007357" stroke-miterlimit="2" stroke-linecap="square" /> <path id="pulse" class="myP" fill-rule="evenodd" clip-rule="evenodd" d="M352 477.15L352.04 206.688L585.09 71.1892L585.05 344.449L468.521 410.802L467.85 410.419L467.85 411.184L352 477.15ZM467.85 412.335L351.747 478.445L351 478.87L351 478.01L351.04 206.4L351.04 206.112L351.289 205.968L585.339 69.8878L586.09 70.3201L586.05 344.74L586.05 345.031L585.797 345.174L469.53 411.378L702.608 544.536L702.86 544.68L702.86 544.97L702.81 814.73L702.81 815.584L702.065 815.166L468.71 684.028L468.66 956.01L468.66 956.875L467.911 956.443L234.491 822.123L234.24 821.979L234.24 821.69L234.29 548.87L234.29 548.009L235.038 548.436L467.81 681.386L467.85 412.335ZM468.85 412.141L468.81 682.937L701.81 813.876L701.86 545.26L468.85 412.141ZM235.29 549.731L235.24 821.401L467.66 955.146L467.71 682.48L235.29 549.731Z" fill="#007357" /> <path d="M468.35 411.28L468.31 683.23L702.31 814.73L702.36 544.97L468.35 411.28Z" stroke="#007357" stroke-miterlimit="2" stroke-linecap="square"/> <path id="pulse0" class="myP0" stroke-width="0.5" d="M468.97 0.429993L468.92 274.85L234.87 410.59L234.92 136.51L468.97 0.429993Z" stroke="#007357" stroke-miterlimit="2" stroke-linecap="square" /> <path d="M235.1 274.17L353.01 205.56" stroke="#007357" stroke-miterlimit="2" stroke-linecap="square" /> <path d="M469.23 683.13L585.05 614.93" stroke="#007357" stroke-miterlimit="2" stroke-linecap="square" /> <path opacity="0.8" d="M351 207.3L350.98 342.4L235.48 409.21L235.51 274.83L351 207.3Z" fill="#05BD8E" /> </g> <defs> <clipPath id="clip0_339_55"> <rect  width="820" height="956.87" fill="white" /> </clipPath> </defs> </svg></div></picture></div>'

// console.log(elements[0],elements)
//var svg = '<div class="Image_lds_image___Pad_ KeyVisual_image__xq_yu animate__animated animate__fadeInScaleDown KeyVisual_wide__Rtf1j"><picture><img class="custom_svg"></picture></div>'

elements[0].innerHTML = svg


insertSVG

gsap.registerPlugin(DrawSVGPlugin);

var PPath = document.getElementById('pulse'),
    svg = document.getElementById('svg'), 
    count = 15 , 
    Pulse = new TimelineMax({repeat:-1});


//first animation
for(var i=0;i<count;i++){
  var svgCln = PPath.cloneNode(true);
  svgCln.setAttribute('id', 'pulse-clone-' + i); // Set a new unique ID
  TweenLite.set(svgCln,{stroke:'rgba(0, 255, 193,'+(count-i)*0.8+')'});
  svg.appendChild(svgCln);
}

var BL = PPath.cloneNode(true); 
svg.appendChild(BL); 
BL.setAttribute("class","");

TweenLite.set(PPath,{filter:'url(#glow)'});

Pulse
    .staggerFromTo(PPath,5.5,{drawSVG:'0% 0%'},{drawSVG:'100% 100%',ease:Power0.easeNone},0.04)
    .staggerFromTo('.myP',5.5,{drawSVG:'-3% 0%'},{drawSVG:'97% 100%',ease:Power0.easeNone},0.01, 0)
    .add(function(){Pulse.timeScale(1)},2.6)


//second animation
var PPath0 = document.getElementById('pulse0'),
    Pulse0 = new TimelineMax({repeat:-1});

for(var i=0;i<count;i++){
    var svgCln0 = PPath0.cloneNode(true);
    svgCln0.setAttribute('id', 'pulse-clone0-' + i); // Set a new unique ID
    TweenLite.set(PPath0,{stroke:'rgba(0, 255, 193,'+(count-i)*0.8+')'});
    svg.appendChild(svgCln0);
  }
  
  var BL0 = PPath0.cloneNode(true); 
  svg.appendChild(BL0); 
  BL0.setAttribute("class","");
  
  TweenLite.set(PPath0,{filter:'url(#glow)'});
  
  Pulse0
      .staggerFromTo(PPath0,1.5,{drawSVG:'0% 0%'},{drawSVG:'100% 100%',ease:Power0.easeNone},0, 3)
      .staggerFromTo('.myP0',1.5,{drawSVG:'0% 0%'},{drawSVG:'95% 100%',ease:Power0.easeNone},0.01, 3)

//third animation
// var PPath1 = document.getElementById('pulse1'),
//     Pulse1 = new TimelineMax({repeat:-1});

// for(var i=0;i<count;i++){
//     var svgCln1 = PPath0.cloneNode(true);
//     svgCln1.setAttribute('id', 'pulse-clone1-' + i); // Set a new unique ID
//     TweenLite.set(PPath0,{stroke:'rgba(0, 255, 193,'+(count-i)*0.8+')'});
//     svg.appendChild(svgCln1);
//   }
  
//   var BL1 = PPath1.cloneNode(true); 
//   svg.appendChild(BL1); 
//   BL1.setAttribute("class","");
  
//   TweenLite.set(PPath1,{filter:'url(#glow)'});
  
//   Pulse1
//       .staggerFromTo(PPath0,1.5,{drawSVG:'0% 0%'},{drawSVG:'100% 100%',ease:Power0.easeNone},0, 3)
//       .staggerFromTo('.myP1',1.5,{drawSVG:'0% 0%'},{drawSVG:'95% 100%',ease:Power0.easeNone},0.01, 3)
// id="pulse1" class="myP1" 



animatePath

(function () {
  const NEW_LINK = 'https://lin.ee/92RUrVu';

  const lineLink = document.querySelector('footer > div[class^="Footer_sns_links"] > a');

  if (lineLink) {
    lineLink.href = NEW_LINK;
  }
})();


replace_footer_line_link

structuredData

Unlock new horizons.

Key Benefits

JOIN US! If you are...

Focus areas

How to Apply?

Pitch Deck Evaluation Criteria

Leverage LINE for your growth

Thailand’s go-to platform with
56 million MAU

Our Partners

FAQ