How Can I put this effect into my Webflow?

Hi Guys,
I want this background effect and I found the code from the link below,
I tried to copy and paste the code into my webflow but it didn’t work,

Anyone knows how to modify the code and make it work in webflow ??
Thank you very very much


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @11163, welcome back :slight_smile:

Which effect are you trying to create? the spinning disc? The background?

1 Like

No sure which effect you’re looking for, in any case I think that should be achievable via Webflow interraction. All you need is a spin animation and a blur effect on the backround.

I think the code didn’t work in webflow because it is SCSS and not CSS. I’ve quickyl stripped down the code to the basic and complied it to CSS if you want to have a look. The CSS code should now work on Webflow but that is a lot of code for a relatively simple animation. You might want to look into Webflow native animation for that :slight_smile:

Codepen

HTML

<div class="frame">
	<div class="frame-bg">
		<img class="bg-black album-artwork" src="https://is2-ssl.mzstatic.com/image/thumb/Music118/v4/1c/77/af/1c77af17-4ca7-1871-9d53-3683eab952c0/source/600x600bb.jpg"/>
	</div>	
</div>

CSS

.frame {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 550px;
  overflow: hidden;
  position: relative;
  color: white;
}

.frame-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: 0;
  z-index: 0;
  overflow: hidden;
}

.frame-bg .bg-black {
  width: 200%;
  position: absolute;
  border-radius: 100em;
  animation: rotate 35s linear infinite;
}

.frame-bg .bg-black {
  left: 0;
  bottom: 0;
  filter: blur(40px);
  z-inxed: 1;
  animation-direction: reverse;
  animation-delay: 10s;
}

@-webkit-keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

I want the effect of dynamic blurry background animations. Thank you

The easiest way to do this:

  1. Create a background image in Photoshop (blurred, blobs, whatever you want).
  2. Place it as an image element inside a wrapping DIV at the back of your section/site.
  3. Give the wrapping DIV overflow:hidden
  4. create a load interaction that rotates the image element 360deg and loops