LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
.container {
  max-width: 400px;
  margin: 0 auto;
}

.signature {
  position: relative;
  overflow: auto;
  width: 100%;
  height: 0;
  padding-bottom: 55.30973%;
}
.signature svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
JS
window.signature =
  initialize: ->
    $('.signature svg').each ->
      paths = $('path, circle, rect', this)
      delay = 0
      for path in paths
        length = path.getTotalLength()
        previousStrokeLength = speed || 0
        speed = if length < 100 then 20 else Math.floor(length)
        delay += previousStrokeLength + 100
        $(path).css('transition', 'none')
               .attr('data-length', length)
               .attr('data-speed', speed)
               .attr('data-delay', delay)
               .attr('stroke-dashoffset', length)
               .attr('stroke-dasharray', length + ',' + length)

  animate: ->
    $('.signature svg').each ->
      paths = $('path, circle, rect', this)
      for path in paths
        length = $(path).attr('data-length')
        speed = $(path).attr('data-speed')
        delay = $(path).attr('data-delay')
        $(path).css('transition', 'stroke-dashoffset ' + speed + 'ms ' + delay + 'ms linear')
               .attr('stroke-dashoffset', '0')
        
$(document).ready ->
  window.signature.initialize()

  $('button').on 'click', ->
    window.signature.initialize()
    setTimeout( ->
      window.signature.animate()
    , 500)

$(window).load ->
  window.signature.animate()
Host Instantly Drag and Drop Website Builder

 

Description

animate writing a signature with SVG stroke-dashoffset/stroke-dasharray and CSS transitions
Term
Mon, 11/27/2017 - 22:05

Related Codes

Pen ID
Pen ID
Pen ID