Trying to replicate this animation

Using dev tools, how is it found?

Can it be placed into a codepen where it works the same way?

https://podcastcharts.byspotify.com/

recreate this

The first thing I do is turn off JS to confirm that it’s JS-powered (which it is). The next thing you can do is open devtools, re-enable JS and refresh the page, as you can then see which DOM elements get updated as the animation runs.

1 Like

It’s probably quicker to write your own animation than work out how someone else did it.

I’d just overlay a couple of gradients and animate each one in opposite directions. No js needed unless you needed to wait for the page to load but you already have code for that in your other demos.

1 Like

Very roughly like this:

or this:

1 Like

Why can’t the code be copied verbatim, as is?

Is there a reason for that?

Did you pay for it? :slight_smile:

And because …

It looks like the code is at the bottom of the html and called RectangleWipe_rectangle_wipe__EOoG4 but the whole code is integrated in the theme and uses lots of classes from the theme css so you would need to copy all the css and all the js to get it to work. It could take days just to extricate the little bit of code that you need.

1 Like