Use the a custom input field number inside of a custom ...

KKevin

I would like to use a range slider input field and use the number as speed for this line of css. I cannot seem to make it work, I think because the number is changed inline css ? How to approach this?

<style>
.track-horizontal {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
**animation: marquee-horizontal 60s linear infinite;  **
  /* manipulate the speed of the marquee by changing "40s" line above*/
}

.track-horizontal:hover {
  animation-play-state: paused;
}

@keyframes marquee-horizontal {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
</style>

10 comments

JJan

Hey Kevin, how did you approach this? I would probably write a small JS script to make it work. Let me know if you need help with that

KKevin

Yeah would be great! I dont really write javascript, but with chatgpt I can usually make it work. What would be an appropriate command?

JJan

If you only have that element once on your page, you can do something like this. Changing entire CSS classes is possible, but I would just override the style on the element itself:

<script>
      window.addEventListener("load", () => {
        const input = document.querySelector("[data-animation='input']");
        const track = document.querySelector("[data-animation='track']");

        if (input && track) {
          input.addEventListener("change", () => {
            track.style.animation =

marquee-horizontal ${input.value}s linear infinite

;
          });
        }
      });
</script>

KKevin

I have it more than once on my page, in webflow i would then use an id, not sure right now though

JJan

Can give me the Webflow preview link if you have the setup built already? :)

jjonas.halbstark

Hi @Kevin,
you can also use css for this as you planned in the beginning.
Just add a code embed on the page with the attribute li-settings:custom="range-slider". Inside add this json:

{
  "type": "range",
  "id": "animation_speed",
  "min": 1,
  "max": 100,
  "step": 1,
  "unit": "s",
  "label": "Animation Speed",
  "default": 60
}

Docu: https://shopify.dev/docs/storefronts/themes/architecture/settings/input-settings#range

Then add a custom element with this attribute style="animation: marquee-horizontal {{ section.settings.animation_speed }} linear infinite;"

And also add the rest of your CSS:
<style>
.track-horizontal {
position: absolute;
white-space: nowrap;
will-change: transform;
}

.track-horizontal:hover {
animation-play-state: paused;
}

@keyframes marquee-horizontal {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
</style>

JJan

Oh, I understood that wrong, sorry. Jonas way is the way to go :D

KKevin

Hi Jonas, thanks that worked! Only thing I changed was adding "s" after the custom liquid.

style="animation: marquee-horizontal {{ section.settings.animation_speed }}s linear infinite;"
to the track-horizontal element.

KKevin

Thanks anyways Jan for your input

jjonas.halbstark

good to know. i thougt adding the unit inside would solve this 🙂

Add a reply

Welcome to the Liquify Community

Use the a custom input field number inside of a custom embed