[Pro] Animate map lines

You are here:

While the plugin doesn’t have any option to animate the lines you add to the map, with some custom CSS it’s possible to introduce some animations. This will work better if you have the animations disabled in the settings but it should give you an idea of what’s possible to do with custom css.



To replicate the behaviour above, add the following to the Custom CSS field in the settings:

.imapsMapLine-group path {
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 500%;
  stroke-dasharray: 0 /; /* fixes IE prob */
  stroke-dashoffset: 0 /; /* fixes IE prob */
  -webkit-animation: am-draw 40s;
  animation: am-draw 40s;
}
@-webkit-keyframes am-draw {
  0% {
    stroke-dashoffset: 500%;
  }
  100% {
    stroke-dashoffset: 0%;
  }
}
@keyframes am-draw {
  0% {
    stroke-dashoffset: 500%;
  }
  100% {
    stroke-dashoffset: 0%;
  }
}