Line animation – drawing effect

#animate#animation#drawing#effect#line#shape#width

Example:

  • The black line loads instantly.
  • The yellow line has a delay of 2 seconds.
ImgMCE: #KYzEgoxCv – (590×100)
%7B%22slides%22%3A%5B%7B%22slide_id%22%3A0%2C%22slide_order%22%3A0%2C%22name%22%3A%22Slide%201%22%2C%22params%22%3A%7B%22css%22%3A%7B%22background-color%22%3A%22transparent%22%7D%7D%2C%22layers%22%3A%5B%7B%22css%22%3A%7B%22layer%22%3A%7B%22z-index%22%3A0%2C%22width%22%3A569%2C%22height%22%3A6%2C%22top%22%3A21%2C%22left%22%3A6%7D%2C%22obj%22%3A%7B%22opacity%22%3A1%2C%22filter%22%3A%22blur(0px)%22%7D%2C%22element%22%3A%7B%22border-radius%22%3A0%2C%22border-width%22%3A0%7D%7D%2C%22actions%22%3A%5B%5D%2C%22animation%22%3A%7B%22in%22%3A%7B%22delay%22%3A0%2C%22duration%22%3A0%7D%2C%22view%22%3A%5B%5D%2C%22out%22%3A%5B%5D%7D%2C%22render_html%22%3A0%2C%22type%22%3A%22shape%22%2C%22class%22%3A%224TwwQR%22%2C%22aspect_ratio%22%3A%220%22%2C%22content%22%3A%22%253Cdiv%2520class%253D%2522square%2520_dn_elem%2520html_shape%2520shape%2522%2520style%253D%2522width%253A%2520100%2525%253B%2520height%253A%2520100%2525%253B%2520background-color%253A%2520rgb(0%252C%25200%252C%25200)%253B%2520border-radius%253A%25200%2525%253B%2520border-width%253A%25200px%253B%2522%253E%253C%252Fdiv%253E%22%2C%22plugins%22%3A%7B%22imc_animate_shape_width%22%3A%7B%22type%22%3A%22animation%22%2C%22external%22%3A%7B%22js%22%3A%5B%7B%22path%22%3A%7B%22dir%22%3A%22%7BINC_DIR%7D%22%2C%22folder%22%3A%22plugins%2Fimc_animate_shape_width%2F%22%2C%22file%22%3A%22imc_animate_shape_width.js%22%7D%7D%5D%2C%22css%22%3A%5B%5D%7D%2C%22params%22%3A%7B%22speed%22%3A1000%2C%22callback%22%3Anull%7D%2C%22code%22%3A%7B%22run%22%3A%22%7BLAYER%7D._imc_animate_shape_width(%7BPARAMS%7D)%3B%22%2C%22remove%22%3A%22%22%7D%2C%22group%22%3A%7B%22in%22%3A%7B%22speed%22%3A1000%7D%2C%22view%22%3A%5B%5D%2C%22out%22%3A%5B%5D%7D%7D%7D%7D%2C%7B%22css%22%3A%7B%22layer%22%3A%7B%22z-index%22%3A1%2C%22width%22%3A570%2C%22height%22%3A22%2C%22top%22%3A46%2C%22left%22%3A8%7D%2C%22obj%22%3A%7B%22opacity%22%3A1%2C%22filter%22%3A%22blur(0px)%22%7D%2C%22element%22%3A%7B%22border-radius%22%3A0%2C%22border-width%22%3A0%2C%22background%22%3A%22rgba(255%2C238%2C0%2C1.01)%22%7D%7D%2C%22actions%22%3A%5B%5D%2C%22animation%22%3A%7B%22in%22%3A%7B%22delay%22%3A2%2C%22duration%22%3A0%7D%2C%22view%22%3A%5B%5D%2C%22out%22%3A%5B%5D%7D%2C%22render_html%22%3A0%2C%22type%22%3A%22shape%22%2C%22class%22%3A%22IS81fM%22%2C%22aspect_ratio%22%3A%220%22%2C%22content%22%3A%22%253Cdiv%2520class%253D%2522line%2520_dn_elem%2520html_shape%2520shape%2522%2520style%253D%2522width%253A%2520100%2525%253B%2520height%253A%25206px%253B%2520background%253A%2520rgb(255%252C%2520238%252C%25200)%253B%2520border-radius%253A%25200%2525%253B%2520border-width%253A%25200px%253B%2522%253E%253C%252Fdiv%253E%22%2C%22plugins%22%3A%7B%22imc_animate_shape_width%22%3A%7B%22type%22%3A%22animation%22%2C%22external%22%3A%7B%22js%22%3A%5B%7B%22path%22%3A%7B%22dir%22%3A%22%7BINC_DIR%7D%22%2C%22folder%22%3A%22plugins%2Fimc_animate_shape_width%2F%22%2C%22file%22%3A%22imc_animate_shape_width.js%22%7D%7D%5D%2C%22css%22%3A%5B%5D%7D%2C%22params%22%3A%7B%22speed%22%3A1000%2C%22callback%22%3Anull%7D%2C%22code%22%3A%7B%22run%22%3A%22%7BLAYER%7D._imc_animate_shape_width(%7BPARAMS%7D)%3B%22%2C%22remove%22%3A%22%22%7D%2C%22group%22%3A%7B%22in%22%3A%7B%22speed%22%3A1000%7D%2C%22view%22%3A%5B%5D%2C%22out%22%3A%5B%5D%7D%7D%7D%7D%5D%7D%5D%2C%22v%22%3A%221.1.5%22%2C%22created%22%3A1534323771%2C%22align%22%3A%22center%22%2C%22size%22%3A%7B%22full%22%3A%22590x100%22%2C%22w%22%3A%22590%22%2C%22h%22%3A%22100%22%7D%2C%22css%22%3A%7B%22background-color%22%3A%22transparent%22%7D%2C%22upload%22%3A%7B%22structure%22%3A%22%7BDIR%7D%2F%7BFOLDER%7D%2F%7BUID%7D%2F%7BID%7D%22%2C%22folder%22%3A%22user_uploads%2F%22%2C%22dir%22%3A%22%2Fhome%2Fimgmce%2Fdomains%2Fimgmce.com%2Fpublic_html%2Fsupport%2Fwp-content%2Fuploads%2FimgMCE%2F%22%2C%22src%22%3A%22http%3A%2F%2Fsupport.imgmce.com%2Fwp-content%2Fuploads%2FimgMCE%2F%22%7D%2C%22id%22%3A%22KYzEgoxCv%22%2C%22responsive%22%3A1%2C%22user_id%22%3A1%2C%22title%22%3A%22%22%7D

1. Create a Shape

Start by creating a new shape.

  • Open the Shape library (left menu).
  • Choose the shape you like, click it and it will appear on the stage.
  • Drag it into position and resize it if you need to.
ImgMCE: #QNjLVvZtE – Create Shape (800×396)
%7B%22slides%22%3A%5B%7B%22slide_id%22%3A%220%22%2C%22slide_order%22%3A%220%22%2C%22name%22%3A%22Slide%201%22%2C%22params%22%3A%7B%22css%22%3A%7B%22background-color%22%3A%22transparent%22%7D%7D%2C%22layers%22%3A%5B%7B%22css%22%3A%7B%22layer%22%3A%7B%22z-index%22%3A0%2C%22width%22%3A800%7D%2C%22obj%22%3A%7B%22opacity%22%3A1%2C%22filter%22%3A%22blur(0px)%22%7D%7D%2C%22actions%22%3A%5B%5D%2C%22animation%22%3A%5B%5D%2C%22render_html%22%3A0%2C%22type%22%3A%22image%22%2C%22class%22%3A%228ZRPbN%22%2C%22aspect_ratio%22%3A0%2C%22content%22%3A%22add_shape.jpg%22%2C%22folder%22%3A%22user_uploads%2F1%2FQNjLVvZtE%22%2C%22upload%22%3A%7B%22structure%22%3A%22%7BDIR%7D%2F%7BFOLDER%7D%2F%7BUID%7D%2F%7BID%7D%22%2C%22folder%22%3A%22user_uploads%2F%22%2C%22dir%22%3A%22%2Fhome%2Fimgmce%2Fdomains%2Fimgmce.com%2Fpublic_html%2Fsupport%2Fwp-content%2Fuploads%2FimgMCE%2F%22%2C%22src%22%3A%22http%3A%2F%2Fsupport.imgmce.com%2Fwp-content%2Fuploads%2FimgMCE%2F%22%7D%7D%2C%7B%22css%22%3A%7B%22layer%22%3A%7B%22z-index%22%3A1%2C%22width%22%3A%2230%22%2C%22height%22%3A%2230%22%2C%22top%22%3A214%2C%22left%22%3A6%7D%2C%22obj%22%3A%7B%22opacity%22%3A1%2C%22filter%22%3A%22blur(0px)%22%7D%2C%22obj_cont%22%3A%7B%22transform%22%3A%22rotate(0deg)%22%7D%7D%2C%22actions%22%3A%7B%22click_action%22%3A%22poi_popup%22%2C%22content%22%3A%22%253Cp%253EThe%2520shapes%2520library%2520contains%2520all%2520kinds%2520of%2520shapes%2520from%2520default%2520HTML%2520to%2520Emojis%252C%2520Icons%252C%2520Stickers%2520and%2520Pre-made%2520Buttons.%253C%252Fp%253E%253Cp%253EJust%2520click%2520the%2520shape%2520you%2520need%2520and%2520it%2520will%2520appear%2520on%2520the%2520stage.%253C%252Fp%253E%22%2C%22popup_position%22%3A%22right%22%7D%2C%22animation%22%3A%7B%22in%22%3A%5B%5D%2C%22view%22%3A%5B%5D%2C%22out%22%3A%5B%5D%7D%2C%22render_html%22%3A0%2C%22type%22%3A%22shape%22%2C%22class%22%3A%22aKhVnx%22%2C%22aspect_ratio%22%3A%220%22%2C%22content%22%3A%22%253Cdiv%2520class%253D%2522poi-single-point%2520poi-red%2520_dn_round%2522%253E%253Ca%2520class%253D%2522poi-img-replace%2522%2520href%253D%2522%25230%2522%253EMore%253C%252Fa%253E%253Cdiv%2520class%253D%2522poi-more-info%2520poi-right%2522%253E%253Cp%253EThe%2520shapes%2520library%2520contains%2520all%2520kinds%2520of%2520shapes%2520from%2520default%2520HTML%2520to%2520Emojis%252C%2520Icons%252C%2520Stickers%2520and%2520Pre-made%2520Buttons.%253C%252Fp%253E%253Cp%253EJust%2520click%2520the%2520shape%2520you%2520need%2520and%2520it%2520will%2520appear%2520on%2520the%2520stage.%253C%252Fp%253E%253C%252Fdiv%253E%253C%252Fdiv%253E%22%2C%22plugins%22%3A%7B%22css3-animate-it%22%3A%7B%22type%22%3A%22animation%22%2C%22external%22%3A%7B%22js%22%3A%5B%7B%22path%22%3A%7B%22dir%22%3A%22%7BINC_DIR%7D%22%2C%22folder%22%3A%22plugins%2Fcss3-animate-it%2F%22%2C%22file%22%3A%22css3-animate-it.js%22%7D%7D%5D%2C%22css%22%3A%5B%7B%22path%22%3A%7B%22dir%22%3A%22%7BINC_DIR%7D%22%2C%22folder%22%3A%22plugins%2Fcss3-animate-it%2F%22%2C%22file%22%3A%22animations.css%22%7D%7D%5D%7D%2C%22params%22%3A%7B%22class%22%3A%22%22%7D%2C%22code%22%3A%7B%22run%22%3A%22%7BLAYER%7D.removeClass(%5C%22animated%20bounceIn%20bounceInDown%20bounceInRight%20bounceInUp%20bounceInLeft%20fadeInDown%20fadeInUp%20fadeInLeft%20fadeInRight%20fadeIn%20growIn%20shake%20shakeUp%20rotateIn%20rotateInUpLeft%20rotateInDownLeft%20rotateInUpRight%20rotateInDownRight%20rollIn%20wiggle%20swing%20tada%20wobble%20pulse%20flip%20flipInX%20bounceOut%20bounceOutUp%20bounceOutDown%20bounceOutLeft%20bounceOutRight%20fadeOut%20fadeOutUp%20fadeOutDown%20fadeOutLeft%20fadeOutRight%20flipOutX%20flipOutY%20lightSpeedOutRight%20lightSpeedOutLeft%20rotateOut%20rotateOutUpLeft%20rotateOutDownLeft%20rotateOutUpRight%20rollOut%5C%22)%3BsetTimeout(function()%20%7B%7BLAYER%7D.addClass(%5C%22animated%20%7BCLASS%7D%5C%22)%7D%2C10)%3B%22%2C%22remove%22%3A%22%7BLAYER%7D.removeClass(%5C%22animated%20%7BCLASS%7D%5C%22)%3B%22%7D%2C%22group%22%3A%7B%22in%22%3A%7B%22class%22%3A%22bounceInDown%22%7D%2C%22view%22%3A%5B%5D%2C%22out%22%3A%5B%5D%7D%7D%7D%7D%2C%7B%22css%22%3A%7B%22layer%22%3A%7B%22z-index%22%3A2%2C%22width%22%3A33%2C%22height%22%3A33%2C%22top%22%3A144%2C%22left%22%3A48%7D%2C%22obj%22%3A%7B%22opacity%22%3A1%2C%22filter%22%3A%22blur(0px)%22%7D%7D%2C%22actions%22%3A%5B%5D%2C%22animation%22%3A%7B%22in%22%3A%7B%22delay%22%3A1.5%2C%22duration%22%3A0.5%2C%22direction%22%3A%22right%22%7D%2C%22view%22%3A%5B%5D%2C%22out%22%3A%7B%22delay%22%3A0%2C%22duration%22%3A0%7D%7D%2C%22render_html%22%3A0%2C%22type%22%3A%22shape%22%2C%22class%22%3A%22Q2Bsmz%22%2C%22aspect_ratio%22%3A%221%22%2C%22content%22%3A%22%253Csvg%2520viewBox%253D%25220%25200%252036%252036%2522%253E%253Cpath%2520fill%253D%2522%2523FFDC5D%2522%2520class%253D%2522colorful%2520c1%2522%2520d%253D%2522M30%252020.145s.094-2.362-1.791-3.068c-1.667-.625-2.309.622-2.309.622s.059-1.913-1.941-2.622c-1.885-.667-2.75.959-2.75.959s-.307-1.872-2.292-2.417C17.246%252013.159%252016%252014.785%252016%252014.785V2.576C16%25201.618%252015.458.001%252013.458%25200S11%25201.66%252011%25202.576v20.5c0%25201-1%25201-1%25200V20.41c0-3.792-2.037-6.142-2.75-6.792-.713-.65-1.667-.98-2.82-.734-1.956.416-1.529%25201.92-.974%25203.197%25201.336%25203.078%25202.253%25207.464%25202.533%25209.538.79%25205.858%25205.808%252010.375%252011.883%252010.381%25206.626.004%252012.123-5.298%252012.128-11.924v-3.931z%2522%253E%253C%252Fpath%253E%253C%252Fsvg%253E%22%2C%22plugins%22%3A%7B%22css3-animate-it%22%3A%7B%22type%22%3A%22animation%22%2C%22external%22%3A%7B%22js%22%3A%5B%7B%22path%22%3A%7B%22dir%22%3A%22%7BINC_DIR%7D%22%2C%22folder%22%3A%22plugins%2Fcss3-animate-it%2F%22%2C%22file%22%3A%22css3-animate-it.js%22%7D%7D%5D%2C%22css%22%3A%5B%7B%22path%22%3A%7B%22dir%22%3A%22%7BINC_DIR%7D%22%2C%22folder%22%3A%22plugins%2Fcss3-animate-it%2F%22%2C%22file%22%3A%22animations.css%22%7D%7D%5D%7D%2C%22params%22%3A%7B%22class%22%3A%22%22%7D%2C%22code%22%3A%7B%22run%22%3A%22%7BLAYER%7D.removeClass(%5C%22animated%20bounceIn%20bounceInDown%20bounceInRight%20bounceInUp%20bounceInLeft%20fadeInDown%20fadeInUp%20fadeInLeft%20fadeInRight%20fadeIn%20growIn%20shake%20shakeUp%20rotateIn%20rotateInUpLeft%20rotateInDownLeft%20rotateInUpRight%20rotateInDownRight%20rollIn%20wiggle%20swing%20tada%20wobble%20pulse%20flip%20flipInX%20bounceOut%20bounceOutUp%20bounceOutDown%20bounceOutLeft%20bounceOutRight%20fadeOut%20fadeOutUp%20fadeOutDown%20fadeOutLeft%20fadeOutRight%20flipOutX%20flipOutY%20lightSpeedOutRight%20lightSpeedOutLeft%20rotateOut%20rotateOutUpLeft%20rotateOutDownLeft%20rotateOutUpRight%20rollOut%5C%22)%3BsetTimeout(function()%20%7B%7BLAYER%7D.addClass(%5C%22animated%20%7BCLASS%7D%5C%22)%7D%2C10)%3B%22%2C%22remove%22%3A%22%7BLAYER%7D.removeClass(%5C%22animated%20%7BCLASS%7D%5C%22)%3B%22%7D%2C%22group%22%3A%7B%22in%22%3A%5B%5D%2C%22view%22%3A%5B%5D%2C%22out%22%3A%7B%22class%22%3A%22bounceOut%22%7D%7D%7D%7D%7D%2C%7B%22css%22%3A%7B%22layer%22%3A%7B%22z-index%22%3A3%2C%22width%22%3A48%2C%22height%22%3A46%2C%22top%22%3A128%2C%22left%22%3A282%7D%2C%22obj%22%3A%7B%22opacity%22%3A1%2C%22filter%22%3A%22blur(0px)%22%7D%2C%22element%22%3A%7B%22border-radius%22%3A5%2C%22border-width%22%3A0%7D%7D%2C%22actions%22%3A%5B%5D%2C%22animation%22%3A%7B%22in%22%3A%7B%22delay%22%3A2.6%2C%22duration%22%3A0%7D%2C%22view%22%3A%5B%5D%2C%22out%22%3A%5B%5D%7D%2C%22render_html%22%3A0%2C%22type%22%3A%22shape%22%2C%22class%22%3A%22vomciM%22%2C%22aspect_ratio%22%3A%220%22%2C%22content%22%3A%22%253Cdiv%2520class%253D%2522square%2520_dn_elem%2520html_shape%2520shape%2522%2520style%253D%2522width%253A%2520100%2525%253B%2520height%253A%2520100%2525%253B%2520background-color%253A%2520rgb(0%252C%25200%252C%25200)%253B%2520border-radius%253A%25205%2525%253B%2520border-width%253A%25200px%253B%2522%253E%253C%252Fdiv%253E%22%2C%22plugins%22%3A%7B%22css3-animate-it%22%3A%7B%22type%22%3A%22animation%22%2C%22external%22%3A%7B%22js%22%3A%5B%7B%22path%22%3A%7B%22dir%22%3A%22%7BINC_DIR%7D%22%2C%22folder%22%3A%22plugins%2Fcss3-animate-it%2F%22%2C%22file%22%3A%22css3-animate-it.js%22%7D%7D%5D%2C%22css%22%3A%5B%7B%22path%22%3A%7B%22dir%22%3A%22%7BINC_DIR%7D%22%2C%22folder%22%3A%22plugins%2Fcss3-animate-it%2F%22%2C%22file%22%3A%22animations.css%22%7D%7D%5D%7D%2C%22params%22%3A%7B%22class%22%3A%22%22%7D%2C%22code%22%3A%7B%22run%22%3A%22%7BLAYER%7D.removeClass(%5C%22animated%20bounceIn%20bounceInDown%20bounceInRight%20bounceInUp%20bounceInLeft%20fadeInDown%20fadeInUp%20fadeInLeft%20fadeInRight%20fadeIn%20growIn%20shake%20shakeUp%20rotateIn%20rotateInUpLeft%20rotateInDownLeft%20rotateInUpRight%20rotateInDownRight%20rollIn%20wiggle%20swing%20tada%20wobble%20pulse%20flip%20flipInX%20bounceOut%20bounceOutUp%20bounceOutDown%20bounceOutLeft%20bounceOutRight%20fadeOut%20fadeOutUp%20fadeOutDown%20fadeOutLeft%20fadeOutRight%20flipOutX%20flipOutY%20lightSpeedOutRight%20lightSpeedOutLeft%20rotateOut%20rotateOutUpLeft%20rotateOutDownLeft%20rotateOutUpRight%20rollOut%5C%22)%3BsetTimeout(function()%20%7B%7BLAYER%7D.addClass(%5C%22animated%20%7BCLASS%7D%5C%22)%7D%2C10)%3B%22%2C%22remove%22%3A%22%7BLAYER%7D.removeClass(%5C%22animated%20%7BCLASS%7D%5C%22)%3B%22%7D%2C%22group%22%3A%7B%22in%22%3A%7B%22class%22%3A%22bounceIn%22%7D%2C%22view%22%3A%5B%5D%2C%22out%22%3A%5B%5D%7D%7D%7D%7D%5D%7D%5D%2C%22v%22%3A%221.1.5%22%2C%22created%22%3A1534328971%2C%22align%22%3A%22center%22%2C%22size%22%3A%7B%22full%22%3A%22800x396%22%2C%22w%22%3A800%2C%22h%22%3A396%7D%2C%22css%22%3A%7B%22background-color%22%3A%22transparent%22%7D%2C%22upload%22%3A%7B%22structure%22%3A%22%7BDIR%7D%2F%7BFOLDER%7D%2F%7BUID%7D%2F%7BID%7D%22%2C%22folder%22%3A%22user_uploads%2F%22%2C%22dir%22%3A%22%2Fhome%2Fimgmce%2Fdomains%2Fimgmce.com%2Fpublic_html%2Fsupport%2Fwp-content%2Fuploads%2FimgMCE%2F%22%2C%22src%22%3A%22http%3A%2F%2Fsupport.imgmce.com%2Fwp-content%2Fuploads%2FimgMCE%2F%22%7D%2C%22id%22%3A%22QNjLVvZtE%22%2C%22user_id%22%3A1%2C%22responsive%22%3A1%2C%22title%22%3A%22Create%20Shape%22%7D

2. Add Animation

Make sure the shape is selected. You will see the element edit panel appear on the left side.

  • Select the “Layer Animations” tab.
  • At the bottom look for the “Animation Plugins” and select the “Animate Shape Width” plugin.
  • Adjust the speed option if you need to.
  • (OPTIONAL) If you want to add a delay before the animation starts you can set the number of seconds using the “Delay” slider.
ImgMCE: #vYRJXp5Tj – (800×395)
%7B%22slides%22%3A%5B%7B%22slide_id%22%3A%220%22%2C%22slide_order%22%3A%220%22%2C%22name%22%3A%22Slide%201%22%2C%22params%22%3A%7B%22css%22%3A%7B%22background-color%22%3A%22transparent%22%7D%7D%2C%22layers%22%3A%5B%7B%22css%22%3A%7B%22layer%22%3A%7B%22z-index%22%3A0%2C%22width%22%3A800%7D%2C%22obj%22%3A%7B%22opacity%22%3A1%2C%22filter%22%3A%22blur(0px)%22%7D%7D%2C%22actions%22%3A%5B%5D%2C%22animation%22%3A%5B%5D%2C%22render_html%22%3A0%2C%22type%22%3A%22image%22%2C%22class%22%3A%22LQIV2d%22%2C%22aspect_ratio%22%3A0%2C%22content%22%3A%22animate_shape.jpg%22%2C%22folder%22%3A%22user_uploads%2F1%2FvYRJXp5Tj%22%2C%22upload%22%3A%7B%22structure%22%3A%22%7BDIR%7D%2F%7BFOLDER%7D%2F%7BUID%7D%2F%7BID%7D%22%2C%22folder%22%3A%22user_uploads%2F%22%2C%22dir%22%3A%22%2Fhome%2Fimgmce%2Fdomains%2Fimgmce.com%2Fpublic_html%2Fsupport%2Fwp-content%2Fuploads%2FimgMCE%2F%22%2C%22src%22%3A%22http%3A%2F%2Fsupport.imgmce.com%2Fwp-content%2Fuploads%2FimgMCE%2F%22%7D%7D%2C%7B%22css%22%3A%7B%22layer%22%3A%7B%22z-index%22%3A3%2C%22width%22%3A%2230%22%2C%22height%22%3A%2230%22%2C%22top%22%3A28%2C%22left%22%3A96%7D%2C%22obj%22%3A%7B%22opacity%22%3A1%2C%22filter%22%3A%22blur(0px)%22%7D%2C%22obj_cont%22%3A%7B%22transform%22%3A%22rotate(0deg)%22%7D%7D%2C%22actions%22%3A%7B%22click_action%22%3A%22poi_popup%22%2C%22content%22%3A%22%253Cp%253EOpen%2520the%2520Layer%2520Animations%2520tab%253C%252Fp%253E%22%2C%22popup_position%22%3A%22bottom%22%7D%2C%22animation%22%3A%7B%22in%22%3A%5B%5D%2C%22view%22%3A%5B%5D%2C%22out%22%3A%5B%5D%7D%2C%22render_html%22%3A0%2C%22type%22%3A%22shape%22%2C%22class%22%3A%22uQMJ3k%22%2C%22aspect_ratio%22%3A%220%22%2C%22content%22%3A%22%253Cdiv%2520class%253D%2522poi-single-point%2520poi-red%2520_dn_round%2522%253E%253Ca%2520class%253D%2522poi-img-replace%2522%2520href%253D%2522%25230%2522%253EMore%253C%252Fa%253E%253Cdiv%2520class%253D%2522poi-more-info%2520poi-bottom%2522%253E%253Cp%253EOpen%2520the%2520Layer%2520Animations%2520tab%253C%252Fp%253E%253C%252Fdiv%253E%253C%252Fdiv%253E%22%2C%22plugins%22%3A%7B%22css3-animate-it%22%3A%7B%22type%22%3A%22animation%22%2C%22external%22%3A%7B%22js%22%3A%5B%7B%22path%22%3A%7B%22dir%22%3A%22%7BINC_DIR%7D%22%2C%22folder%22%3A%22plugins%2Fcss3-animate-it%2F%22%2C%22file%22%3A%22css3-animate-it.js%22%7D%7D%5D%2C%22css%22%3A%5B%7B%22path%22%3A%7B%22dir%22%3A%22%7BINC_DIR%7D%22%2C%22folder%22%3A%22plugins%2Fcss3-animate-it%2F%22%2C%22file%22%3A%22animations.css%22%7D%7D%5D%7D%2C%22params%22%3A%7B%22class%22%3A%22%22%7D%2C%22code%22%3A%7B%22run%22%3A%22%7BLAYER%7D.removeClass(%5C%22animated%20bounceIn%20bounceInDown%20bounceInRight%20bounceInUp%20bounceInLeft%20fadeInDown%20fadeInUp%20fadeInLeft%20fadeInRight%20fadeIn%20growIn%20shake%20shakeUp%20rotateIn%20rotateInUpLeft%20rotateInDownLeft%20rotateInUpRight%20rotateInDownRight%20rollIn%20wiggle%20swing%20tada%20wobble%20pulse%20flip%20flipInX%20bounceOut%20bounceOutUp%20bounceOutDown%20bounceOutLeft%20bounceOutRight%20fadeOut%20fadeOutUp%20fadeOutDown%20fadeOutLeft%20fadeOutRight%20flipOutX%20flipOutY%20lightSpeedOutRight%20lightSpeedOutLeft%20rotateOut%20rotateOutUpLeft%20rotateOutDownLeft%20rotateOutUpRight%20rollOut%5C%22)%3BsetTimeout(function()%20%7B%7BLAYER%7D.addClass(%5C%22animated%20%7BCLASS%7D%5C%22)%7D%2C10)%3B%22%2C%22remove%22%3A%22%7BLAYER%7D.removeClass(%5C%22animated%20%7BCLASS%7D%5C%22)%3B%22%7D%2C%22group%22%3A%7B%22in%22%3A%7B%22class%22%3A%22bounceInDown%22%7D%2C%22view%22%3A%5B%5D%2C%22out%22%3A%5B%5D%7D%7D%7D%7D%2C%7B%22css%22%3A%7B%22layer%22%3A%7B%22z-index%22%3A2%2C%22width%22%3A%2230%22%2C%22height%22%3A%2230%22%2C%22top%22%3A313%2C%22left%22%3A141%7D%2C%22obj%22%3A%7B%22opacity%22%3A1%2C%22filter%22%3A%22blur(0px)%22%7D%7D%2C%22actions%22%3A%7B%22click_action%22%3A%22poi_popup%22%2C%22content%22%3A%22%253Cp%253ESelect%2520the%2520%2522Animate%2520Shape%2520Width%2522%2520plugin%2520and%2520adjust%2520the%2520speed%2520if%2520necessary.%253C%252Fp%253E%22%2C%22popup_position%22%3A%22top%22%7D%2C%22animation%22%3A%7B%22in%22%3A%7B%22delay%22%3A0%2C%22duration%22%3A0%7D%2C%22view%22%3A%5B%5D%2C%22out%22%3A%5B%5D%7D%2C%22render_html%22%3A0%2C%22type%22%3A%22shape%22%2C%22class%22%3A%22g55jaM%22%2C%22aspect_ratio%22%3A%220%22%2C%22content%22%3A%22%253Cdiv%2520class%253D%2522poi-single-point%2520poi-red%2520_dn_round%2522%253E%253Ca%2520class%253D%2522poi-img-replace%2522%2520href%253D%2522%25230%2522%253EMore%253C%252Fa%253E%253Cdiv%2520class%253D%2522poi-more-info%2520poi-top%2522%253E%253Cp%253ESelect%2520the%2520%2522Animate%2520Shape%2520Width%2522%2520plugin%2520and%2520adjust%2520the%2520speed%2520if%2520necessary.%253C%252Fp%253E%253C%252Fdiv%253E%253C%252Fdiv%253E%22%2C%22plugins%22%3A%7B%22css3-animate-it%22%3A%7B%22type%22%3A%22animation%22%2C%22external%22%3A%7B%22js%22%3A%5B%7B%22path%22%3A%7B%22dir%22%3A%22%7BINC_DIR%7D%22%2C%22folder%22%3A%22plugins%2Fcss3-animate-it%2F%22%2C%22file%22%3A%22css3-animate-it.js%22%7D%7D%5D%2C%22css%22%3A%5B%7B%22path%22%3A%7B%22dir%22%3A%22%7BINC_DIR%7D%22%2C%22folder%22%3A%22plugins%2Fcss3-animate-it%2F%22%2C%22file%22%3A%22animations.css%22%7D%7D%5D%7D%2C%22params%22%3A%7B%22class%22%3A%22%22%7D%2C%22code%22%3A%7B%22run%22%3A%22%7BLAYER%7D.removeClass(%5C%22animated%20bounceIn%20bounceInDown%20bounceInRight%20bounceInUp%20bounceInLeft%20fadeInDown%20fadeInUp%20fadeInLeft%20fadeInRight%20fadeIn%20growIn%20shake%20shakeUp%20rotateIn%20rotateInUpLeft%20rotateInDownLeft%20rotateInUpRight%20rotateInDownRight%20rollIn%20wiggle%20swing%20tada%20wobble%20pulse%20flip%20flipInX%20bounceOut%20bounceOutUp%20bounceOutDown%20bounceOutLeft%20bounceOutRight%20fadeOut%20fadeOutUp%20fadeOutDown%20fadeOutLeft%20fadeOutRight%20flipOutX%20flipOutY%20lightSpeedOutRight%20lightSpeedOutLeft%20rotateOut%20rotateOutUpLeft%20rotateOutDownLeft%20rotateOutUpRight%20rollOut%5C%22)%3BsetTimeout(function()%20%7B%7BLAYER%7D.addClass(%5C%22animated%20%7BCLASS%7D%5C%22)%7D%2C10)%3B%22%2C%22remove%22%3A%22%7BLAYER%7D.removeClass(%5C%22animated%20%7BCLASS%7D%5C%22)%3B%22%7D%2C%22group%22%3A%7B%22in%22%3A%7B%22class%22%3A%22bounceInDown%22%7D%2C%22view%22%3A%5B%5D%2C%22out%22%3A%5B%5D%7D%7D%7D%7D%2C%7B%22css%22%3A%7B%22layer%22%3A%7B%22z-index%22%3A1%2C%22width%22%3A%2230%22%2C%22height%22%3A%2230%22%2C%22top%22%3A95%2C%22left%22%3A70%7D%2C%22obj%22%3A%7B%22opacity%22%3A1%2C%22filter%22%3A%22blur(0px)%22%7D%7D%2C%22actions%22%3A%7B%22click_action%22%3A%22poi_popup%22%2C%22content%22%3A%22%253Cp%253E(OPTIONAL)%2520If%2520you%2520want%2520the%2520shape%2520to%2520start%2520with%2520a%2520delay%2520you%2520can%2520set%2520the%2520amount%2520of%2520seconds%2520here.%253C%252Fp%253E%22%2C%22popup_position%22%3A%22right%22%7D%2C%22animation%22%3A%7B%22in%22%3A%7B%22delay%22%3A0%2C%22duration%22%3A0%7D%2C%22view%22%3A%5B%5D%2C%22out%22%3A%5B%5D%7D%2C%22render_html%22%3A0%2C%22type%22%3A%22shape%22%2C%22class%22%3A%22WqJIzx%22%2C%22aspect_ratio%22%3A%220%22%2C%22content%22%3A%22%253Cdiv%2520class%253D%2522poi-single-point%2520poi-red%2520_dn_round%2522%253E%253Ca%2520class%253D%2522poi-img-replace%2522%2520href%253D%2522%25230%2522%253EMore%253C%252Fa%253E%253Cdiv%2520class%253D%2522poi-more-info%2520poi-right%2522%253E%253Cp%253E(OPTIONAL)%2520If%2520you%2520want%2520the%2520shape%2520to%2520start%2520with%2520a%2520delay%2520you%2520can%2520set%2520the%2520amount%2520of%2520seconds%2520here.%253C%252Fp%253E%253C%252Fdiv%253E%253C%252Fdiv%253E%22%2C%22plugins%22%3A%7B%22css3-animate-it%22%3A%7B%22type%22%3A%22animation%22%2C%22external%22%3A%7B%22js%22%3A%5B%7B%22path%22%3A%7B%22dir%22%3A%22%7BINC_DIR%7D%22%2C%22folder%22%3A%22plugins%2Fcss3-animate-it%2F%22%2C%22file%22%3A%22css3-animate-it.js%22%7D%7D%5D%2C%22css%22%3A%5B%7B%22path%22%3A%7B%22dir%22%3A%22%7BINC_DIR%7D%22%2C%22folder%22%3A%22plugins%2Fcss3-animate-it%2F%22%2C%22file%22%3A%22animations.css%22%7D%7D%5D%7D%2C%22params%22%3A%7B%22class%22%3A%22%22%7D%2C%22code%22%3A%7B%22run%22%3A%22%7BLAYER%7D.removeClass(%5C%22animated%20bounceIn%20bounceInDown%20bounceInRight%20bounceInUp%20bounceInLeft%20fadeInDown%20fadeInUp%20fadeInLeft%20fadeInRight%20fadeIn%20growIn%20shake%20shakeUp%20rotateIn%20rotateInUpLeft%20rotateInDownLeft%20rotateInUpRight%20rotateInDownRight%20rollIn%20wiggle%20swing%20tada%20wobble%20pulse%20flip%20flipInX%20bounceOut%20bounceOutUp%20bounceOutDown%20bounceOutLeft%20bounceOutRight%20fadeOut%20fadeOutUp%20fadeOutDown%20fadeOutLeft%20fadeOutRight%20flipOutX%20flipOutY%20lightSpeedOutRight%20lightSpeedOutLeft%20rotateOut%20rotateOutUpLeft%20rotateOutDownLeft%20rotateOutUpRight%20rollOut%5C%22)%3BsetTimeout(function()%20%7B%7BLAYER%7D.addClass(%5C%22animated%20%7BCLASS%7D%5C%22)%7D%2C10)%3B%22%2C%22remove%22%3A%22%7BLAYER%7D.removeClass(%5C%22animated%20%7BCLASS%7D%5C%22)%3B%22%7D%2C%22group%22%3A%7B%22in%22%3A%7B%22class%22%3A%22bounceInDown%22%7D%2C%22view%22%3A%5B%5D%2C%22out%22%3A%5B%5D%7D%7D%7D%7D%5D%7D%5D%2C%22v%22%3A%221.1.5%22%2C%22created%22%3A1534331410%2C%22align%22%3A%22center%22%2C%22size%22%3A%7B%22full%22%3A%22800x395%22%2C%22w%22%3A800%2C%22h%22%3A395%7D%2C%22css%22%3A%7B%22background-color%22%3A%22transparent%22%7D%2C%22upload%22%3A%7B%22structure%22%3A%22%7BDIR%7D%2F%7BFOLDER%7D%2F%7BUID%7D%2F%7BID%7D%22%2C%22folder%22%3A%22user_uploads%2F%22%2C%22dir%22%3A%22%2Fhome%2Fimgmce%2Fdomains%2Fimgmce.com%2Fpublic_html%2Fsupport%2Fwp-content%2Fuploads%2FimgMCE%2F%22%2C%22src%22%3A%22http%3A%2F%2Fsupport.imgmce.com%2Fwp-content%2Fuploads%2FimgMCE%2F%22%7D%2C%22id%22%3A%22vYRJXp5Tj%22%2C%22user_id%22%3A1%2C%22responsive%22%3A1%2C%22title%22%3A%22%22%7D