Dynamic JS in a Phoenix live component

I am learning Phoenix and Elixir and making myself a website. I know this is probably not the best way to do what I want but I am up for the challenge. Part of the website is an animation of a bike. There are two main animations that I want to do, the first is just one that goes across the window and stops. The second will follow the user’s scroll and go off the page.

The animation of it going across the screen works:

defmodule MaxLymanWeb.Landing.BikeAnimation do
  use MaxLymanWeb, :live_component

  require Logger

  def mount(socket) do
    {:ok, socket}
  end

  def render(assigns) do
    direction = assigns.direction || "right-to-left"
    animation_number = assigns.animation_number || "1"
    id = "bike-animation-#{animation_number}"

    image = case direction do
      "right-to-left" -> "/images/rtl-road-bike.png"
      "left-to-right" -> "/images/ltr-road-bike.png"
      _ -> {:error, "Invalid direction"}
    end

    padding = case direction do
      "right-to-left" -> "pl-80"
      "left-to-right" -> "pr-80"
      _ -> {:error, "Invalid direction"}
    end

    ride_direction = case direction do
      "right-to-left" -> "scrolling-div-rtl"
      "left-to-right" -> "scrolling-div-ltr"
      _ -> {:error, "Invalid direction"}
    end

    assigns =
      assigns
      |> Map.put(:id, id)
      |> Map.put(:image, image)
      |> Map.put(:padding, padding)
      |> Map.put(:tailwind_class, "#{padding} #{ride_direction}")

    if assigns.scroll do
      render_with_scroll(assigns)
    else
      render_without_scroll(assigns)
    end


  end

  defp render_without_scroll(assigns) do
    Logger.info("Rendering without scroll") # WORKING
    ~H"""
      <div id={@id} class={@tailwind_class}>
        <div name="bike">
          <div class="w-24 h-24">
            <img
              name="bike_img"
              src={@image}
              class={"w-24 h-24"}
              alt="bike"/>
          </div>
        </div>
      </div>
    """
  end

it is the scroll that is giving me the most trouble:

  defp render_with_scroll(assigns) do
    Logger.info("Rendering with scroll")

    ~H"""
     <div>
        <a name="direction" class="invisible"> <%= @direction%></a>
        <a name="id" class="invisible"> <%= @id%></a>
        <div class="overflow-hidden">
          <div id={@id} class={@padding}>
            <div class="w-24 h-24">
              <img
                name="bike_img"
                src={@image}
                class="w-24 h-24"
                alt="bike"/>
            </div>
          </div>
          <script>
            window.addEventListener("scroll", function() {
              var direction = document.getElementsByName("direction")[0].textContent;
              var id = document.getElementsByName("id")[0].textContent;
              var bike = document.getElementById(id);
              var scroll = window.scrollY;
              var translation = direction === "right-to-left" ? scroll/2 : -scroll/2;
              console.log("direction", direction, "bike", id, "scroll", scroll, "translation", translation);
              if (bike !== null) {bike.style.transform = "translateX(" + translation + "px)";}

            });
          </script>
        </div>
     </div>
    """
  end
end

there are no issues in my console and the console.log statement shows that the translation is changing but the bike is still not moving.

The answer could just be this is not what I should be using Phoenix for but I’m too deep now to not give it one more try. If anyone knows a way to make this work I am all ears!

Thanks!