Skip to main content
All CollectionsCustomization
[PRO] How to Animate Map Lines
[PRO] How to Animate Map Lines
James avatar
Written by James
Updated over 8 months ago

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%;
}
}


Did this answer your question?