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.
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:
@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? ;)
I agree - please remove the pulse animation. In images like the one below, it is not only distracting, but basically obscures the entire image when you have multiple selectors.
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
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.
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.
I made a theme component that will turn off the animation, documented here: https://theme-360.com/theme-component/remove-pulse-animation-on-labeled-graphic/ 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?
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.
20 Replies
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.
Being able to disable animation is WCAG requirement for accessibility. Has there been any update to this? Thanks.
Thanks for sharing your insight on this, Adam. We don't have updates on this yet, but we'll be sure to share in this thread if anything changes!
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.
@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? ;)
Hi Lea, is there an update on this please?
Hi, Sophie. We don't plan to change the default animation of labeled graphic markers, at least for this year. We'll let you know if that changes!
Voicing my vote to have the option to turn off the pulsing for the labeled graphic markers. And, the request has come from several of my clients.
This post was removed by the author
Hello, this would be a great option to have for accessibility. Thank you.
Adding my voice to the request to have the option to turn off pulsing. How many votes does it take to make such a change?
Also, thanks Adam Gojanovich for such a clearly stated workaround. I really appreciate the work behind it, and the generosity for sharing.
I agree - please remove the pulse animation. In images like the one below, it is not only distracting, but basically obscures the entire image when you have multiple selectors.
This post was removed by the author
Please update us when this happens! Thanks, looking forward to it!
I too would love to see this option!
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
Adding my vote for this option as well for all of the stated reasons.
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.
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!
Adding my vote, AGAIN! This is a very old request. What is the timeframe for implementing? Thanks!
I made a theme component that will turn off the animation, documented here:
https://theme-360.com/theme-component/remove-pulse-animation-on-labeled-graphic/
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?
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.
Here's a live link to the diagram- it uses the microlearning format with a single labeled graphic https://theme-360.com/rise/dulos/