20 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? ;)

Learning and  Development Team

Adding my voice to this request. We had an external Accessibility evaluation done and the pulsing for the labeled graphic markers was indicated as a serious issue. In most cases, there are multiple markers so selecting one marker to stop the animation doesn't stop the rest from pulsating and does not meet WCAG accessibility requirements. 

Please update us when the pulse animation is removed or the option to opt-out is provided. Thanks

anne-marie godfrey

Joining in to vote for the removal of pulse markers, they often over lap with other elements of your graphic making it messy and it's not accessibility friendly at all! Not in keeping with my organisations branding. Please enable this to be turned off or better yet make it so you have to turn it on. Default for accessibility shouldn't be an automated uncontrolled animated effect.

Steven Benassi

Hi Anne-Marie!

Thanks for sharing the feedback on how this feature could benefit you and your learners!

I've included you in the feature report and will update this discussion as soon as we have news to share. If you'd like to stay up to date, you can bookmark our Feature Roadmap.

Have a great day!

Phil Foss

I made a theme component that will turn off the animation, documented here:
I also provide a downloadable XD file that shows all the states of the labeled graphic marker, and you can design your own and test with your images. Note that if you have a very light graphic with a white background, your learners may not see the default pulse animation at all. Did you know there are actually 4 states to a marker?

labeled graphic marker

As a side note, I created a labeled graphic that outlines all the vehicles in the ongoing Michelle Troconis trial. Any true crimers here? My custom labeled graphic looks like numbered crime scene markers. A few livestreamers used the graphic in their shows- but nobody realized you can click the markers for detail info- I had removed the pulse animation! So if you are redesigning your markers to match your subject matter, make sure the user knows the markers can be clicked.

Dulos vehicle diagram

Here's a live link to the diagram- it uses the microlearning format with a single labeled graphic https://theme-360.com/rise/dulos/