Hi,
We are trying to use SVGs that animate once. But we are finding that as soon as the page loads the animation plays, so if the SVGs are off the screen you don’t ever see the animation.
Does anyone have any advice on how to control the playback so the animation only starts when visible?
Thanks,
Nick
Firstly some sense-checking:
If the animation plays only once, then is the learner going to even see it? What happens if they scroll down to where it is but then someone calls their name and they look away and miss it? What are the implications if they need to see it again?
If that’s not an issue, is the SVG sat on the page somewhere lower down? You could hide it and set a logic action on it so that it appears only when another item beside or above it scrolls into view (is viewed) or the learner does something specific.
You can also do a global logic action to say once page is loaded, show this element, and put on a small delay of 200 or more milliseconds to make it wait a little. Play with that number.
If you can share a screenshot or more details there may be other options but we need to know a little more.
Thanks for the reply.
The animations will be large so pretty unmissable, and the information that’s important would be on the end state, so the learner won’t be missing anything if they don’t see it.
We will give the suggestion of using logic linked to another element a go.
Nick