Custom marquee speed

There's no official way, but just because it seems fun and interesting (ie more interesting than what I'm supposed to be doing...) here's one code way that I guess is a little hacky.

The way that Squarespace do this is they write the properties that you specify in the designer into JSON within a script tag that has the class "Marquee-props". When the page is loaded up one of Squarespace's javascript files kicks in and reads those properties out and then applies them to the marquee. It does the marquee animation in code - as opposed to SVG animation, or CSS animation via properties - so it's not really possible to change these values once they've started. at least not easily. However, if you can get to the values before their scripts kick in, read in the properties, change them and then write them back out then it will pick up the new values once the initialisation script finally kicks in.

So, you can stick a code block in (pro feature obviously) somewhere after the marquee in the flow of the page and add the following code:

<script type="text/javascript">
  // this will only find the first marquee on the page
  // (at the point that the script is executed)
  const el = document.querySelector(".Marquee-props")
  const props = JSON.parse(el.innerText)
  props.animationSpeed = 5.0 // this is the speed!!!
  el.innerText = JSON.stringify(props);
</script>

now save it and load your page and watch your marquee whizz by....

I think you could file this under "non-production, educational purposes". squarespace could change their implementation at any time, but I've tried it and it does work.