C#•6mo ago

✅ Jittery CSS pan animation

Hi I'm having trouble trying to make a background pan animation in CSS. It pans but it's very jittery. Does anyone have an idea as to why? Code: https://hastebin.com/share/ewodonebim.javascript Demo (delete the post if not allowed to post personal links): https://www.tyrells.net/

Hastebin

Hastebin is a free web-based pastebin service for storing and sharing text and code snippets with anyone. Get started now.

15 Replies

Shadow Wizard Money GangOP•6mo ago

Making the SVG larger has no effect. I'm going to see if I can do something with transform maybe I've added

 will-change: background-position;

 will-change: background-position;

with no difference going to try a different star pattern svg No difference with a different star svg

Shadow Wizard Money GangOP•6mo ago

https://tenor.com/view/ohno-meme-monkey-ohno-ohno-monkey-ohno-emote-ohno-twitch-emote-gif-119989999548046247

Tenor

Kouhai•6mo ago

I'd personally do something like

<div id="bgWrapper" style="
   animation: translate 180s linear infinite;
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   z-index: -1;">
   <div id="bg" style="
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url(/assets/starpattern-CL68Kahl.svg);
      background-size: 10%;
      "></div>
   <div id="bgOffset" style="
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url(/assets/starpattern-CL68Kahl.svg);
      background-size: 10%;
      transform: translateX(-100%);
      "></div>
</div>

<div id="bgWrapper" style="
   animation: translate 180s linear infinite;
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   z-index: -1;">
   <div id="bg" style="
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url(/assets/starpattern-CL68Kahl.svg);
      background-size: 10%;
      "></div>
   <div id="bgOffset" style="
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url(/assets/starpattern-CL68Kahl.svg);
      background-size: 10%;
      transform: translateX(-100%);
      "></div>
</div>

@keyframes translate {
    0% {
        transform: translateX(0px)
    }

    to {
        transform: translateX(100%)
    }
}

@keyframes translate {
    0% {
        transform: translateX(0px)
    }

    to {
        transform: translateX(100%)
    }
}

Which is a bit dirty, but it works and translateX is much more performant than background-position-x

Shadow Wizard Money GangOP•6mo ago

So its a probably a performance issue. I'm not very good with CSS and frontend stuff but I'll try to get it working with translate like you said. Thank you 🙂 Might take me a few minutes.

Kouhai•6mo ago

:ThumbsUpSmile: Also, forgot to mention, because bgWrapper's position is absolute the parent; which would be your star-pattern-container needs to have a relative position You might also wanna set star-pattern-container overflow to hidden, or set bgWrapper's overflow to hidden

Shadow Wizard Money GangOP•6mo ago

You're a saint. hiding the overflow makes sense to me. I'll mess around with positioning in a few minutes.

Kouhai•6mo ago

:ThumbsUp:

Shadow Wizard Money GangOP•6mo ago

:catlove: I've got the translate working. I just need to put in on the right div but it does work https://codepen.io/TyrellR/pen/YzbEmYJ Thank you

Kouhai•6mo ago

<div id="parent">
  <div id="content">
  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. </p>
    <div class="hide-overflow fill-parent">
      <div id="bgWrapper" class="fill-parent">
        <div id="bg" class="fill-parent"/>
        <div id="bg" class="offset fill-parent"/>
      </div>
    </div>
</div>

<div id="parent">
  <div id="content">
  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. </p>
    <div class="hide-overflow fill-parent">
      <div id="bgWrapper" class="fill-parent">
        <div id="bg" class="fill-parent"/>
        <div id="bg" class="offset fill-parent"/>
      </div>
    </div>
</div>

#parent {
  position: relative;
  width: 100vw;
}

#bgWrapper {
   animation: translate 180s linear infinite;
}


#bg {
   background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="36" height="72" viewBox="0 0 36 72"%3E%3Cg fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.4"%3E%3Cpath d="M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
  background-size: 10%;
}

.offset
{
  transform: translateX(-100%);
}

.fill-parent
{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.hide-overflow
{
  z-index: -1;
  overflow: hidden;
}

@keyframes translate {
    0% {
        transform: translateX(0px)
    }

    to {
        transform: translateX(100%)
    }
}

#parent {
  position: relative;
  width: 100vw;
}

#bgWrapper {
   animation: translate 180s linear infinite;
}


#bg {
   background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="36" height="72" viewBox="0 0 36 72"%3E%3Cg fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.4"%3E%3Cpath d="M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
  background-size: 10%;
}

.offset
{
  transform: translateX(-100%);
}

.fill-parent
{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.hide-overflow
{
  z-index: -1;
  overflow: hidden;
}

@keyframes translate {
    0% {
        transform: translateX(0px)
    }

    to {
        transform: translateX(100%)
    }
}

Of course there might be a better way to do it :XD:

Shadow Wizard Money GangOP•6mo ago

I will remove "im a software developer" from the site and replace with "im a code monkey". Having the background divs inside parent div confused me but I see what you have done. The background is absolute, pushed to the top left and the height of the parent. I really need to go find a good CSS book and practice it.

Kouhai•6mo ago

We are all code monkeys aren't we :XD: And yeah having the background be absolute allows it to fill the parent div, though I guess it could be easier to do with flex

<div id="parent">
  <div id="content">
  <p></p>
    <div class="hide-overflow fill-parent">
      <div id="bgWrapper">
        <div class="bg"></div>
        <div class="bg"></div>
      </div>
    </div>
</div>

<div id="parent">
  <div id="content">
  <p></p>
    <div class="hide-overflow fill-parent">
      <div id="bgWrapper">
        <div class="bg"></div>
        <div class="bg"></div>
      </div>
    </div>
</div>

#parent {
  position: relative;
  width: 100vw;
}

#bgWrapper {
   animation: translate 180s linear infinite;
    width: 200%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}


.bg {
   background-image: url('');
  background-size: 10%;
  flex-basis: 0;
  flex-grow: 1;
}

.fill-parent
{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.hide-overflow
{
  z-index: -1;
  overflow: hidden;
}

@keyframes translate {
    0% {
        transform: translateX(-50%)
    }

    to {
        transform: translateX(0%)
    }
}

#parent {
  position: relative;
  width: 100vw;
}

#bgWrapper {
   animation: translate 180s linear infinite;
    width: 200%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}


.bg {
   background-image: url('');
  background-size: 10%;
  flex-basis: 0;
  flex-grow: 1;
}

.fill-parent
{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.hide-overflow
{
  z-index: -1;
  overflow: hidden;
}

@keyframes translate {
    0% {
        transform: translateX(-50%)
    }

    to {
        transform: translateX(0%)
    }
}

Though I think using absolute position is easier to reason about personally

Shadow Wizard Money GangOP•6mo ago

I think I will have to abandon the idea unfortunately. Even after switching to transform the performance is identical :pepecry: https://www.tyrells.net/ The site uses react (just because I like the component structure) so I don't know if that has negatively made a difference I don't really know how to make use of firefox performance tools to figure out whats going on but I will figure that side of stuff at a later date It might just be an issue with my browser on further investigation. its perfectly smooth on my phone... its a problem with firefox. works fine on chromium browers. Please ignore my ramblings above. I've got it working exactly as I wanted it to 🙂 https://tyrells.net/

Shadow Wizard Money GangOP•6mo ago

https://tenor.com/view/no-really-dog-stares-cant-be-serious-funny-dog-gif-2966939698439169510

Tenor

Unknown User•6mo ago

Message Not Public

MODiX•6mo ago

If you have no further questions, please use /close to mark the forum thread as answered

Gaming

Programming

✅ Jittery CSS pan animation