Next.js Discord

Discord Forum

Animations :D

Unanswered
Arinji posted this in #help-forum
Open in Discord
ArinjiOP
Ok so this is my tailwind config
animation: {
        "infinite-scroll-x": "infinite-scroll-x 12s linear infinite",
        "infinite-scroll-y": "infinite-scroll-y 12s linear infinite ",
      },
      keyframes: {
        "infinite-scroll-x": {
          from: { transform: "translateX(0)" },
          to: { transform: "translateX(-100%)" },
        },
        "infinite-scroll-y": {
          from: { transform: "translateY(0)" },
          to: { transform: "translateY(-100%)" },
        },
      },

   <div className="w-full xl:max-w-[441px] p-2 gap-4 xl:gap-8 xl:max-h-[60svh] h-fit flex group/parent xl:flex-col flex-row items-center justify-start overflow-hidden py-4 ">
            <EmojisContainer />
            <EmojisContainer disabled />
          </div>

function EmojisContainer({ disabled }: { disabled?: boolean }) {
  return (
    <>
      <div
        aria-hidden={disabled}
        className={` ${
          disabled ? "  " : " "
        } flex xl:flex-col  flex-row  xl:gap-12 group-hover/parent:pause  xl:animate-infinite-scroll-y animate-infinite-scroll-x items-center justify-start  gap-4`}
      >
        <div className=" ...">
          <div className="xl:w-[125px] h-[111px] w-[100px] relative">
            <Image
              src="/emojis/wat.png"
              sizes="(min-width: 768px) 125px, 100px "
              fill
              className="object-contain"
              alt="Wat Emoji"
            />
          </div>
          <H2 className="w-[150px] xl:w-[200px] text-palette-text h-fit text-center">
            {`"wat"`}
          </H2>
        </div>
        <div className="...">
          <div className="xl:w-[125px] h-[111px] w-[100px] relative">
            <Image
              src="/emojis/lel.svg"
              sizes="(min-width: 768px) 125px, 100px "
              fill
              className="object-contain"
              alt="Lel Emoji"
            />
          </div>
          <H2 className="w-[150px] xl:w-[200px] text-palette-text h-fit text-center">
            {`"lel"`}
          </H2>
        </div>
        <div className=" ...">
          <div className="xl:w-[125px] h-[111px] w-[100px] relative">
            <Image
              src="/emojis/mwah.svg"
              sizes="(min-width: 768px) 125px, 100px "
              fill
              className="object-contain"
              alt="Mwah Emoji"
            />
          </div>
          <H2 className="w-[150px] xl:w-[200px] text-palette-text h-fit text-center">
            {`"mwah"`}
          </H2>
        </div>
      </div>
    </>
  );
}


As you can see in the vid, the animation kinda just breaks at the end... im not that good in animations to figure out a soln xD

1 Reply

ArinjiOP
ok so i fiured out a soln, if you do this
 "infinite-scroll-y": {
          from: { transform: "translateY(0)" },
          to: { transform: "translateY(-108%)" },
        },


where 108 is just eyeballing the dist, it reduces the jump quite a lot.

if you then also increase the speed, its hard to see the jumping around