Turn off Labeled Graphic animation

I'm having an issue with the labeled graphic interactive block. I understand that the animated marker icons are meant to turn on when there is a continue block beneath them. I have no continue block, but 80% of the markers are still animating. Is there a way to turn these off?



7 Replies
Alyssa Gomez

Hello, J! 

The labeled graphic markers will always animate, even if you add a continue button to the lesson. Thank you for pointing out the confusion in our documentation, and we've updated our article to clarify that!

While there isn't a way to turn off the marker animation, I'll let our team know you need that option.

Adam Gojanovich

Appreciate the response @Lea Agato.

A workaround I found for anyone else looking for an answer: If you are exporting the course, in the main.bundle.css file, you can search for and delete the following segment of text:


.labeled-graphic-marker__pin:after{animation:markerPulse 2s ease-in-out infinite alternate;border:8px solid hsla(0,0%,100%,.5);border-radius:50%;bottom:-2.4rem;content:"";left:-2.4rem;pointer-events:none;position:absolute;right:-2.4rem;top:-2.4rem}@media(min-width:48em){.labeled-graphic-marker__pin{font-size:1.8rem;height:3rem;line-height:3.2rem;text-align:center;width:3rem}}


That will stop the animation. Obviously not the easiest solution to interrupt your export/publish workflow with that, but it can be done if needed.

Roberta Petrin

@Adam Gojanovich - thanks for the workaround! It worked but... when you hover over the icon, there's a big black circle where the outer edges of the animation used to be. I guess it's less distracting than the pulsing glowing halo, but wouldn't it be nice to get rid of that black ring too? ;)