How to convert js to css?

I have this code on Codepen where I’m trying to copy it onto another Pen that I’ve created. I can get it to do this, but the JS part will not. It’s left out. Why is this? This is a ghost I have changed the code to its bottom part (his feet). I wanted a flowing animation rather than the CSS back and forth wiggle animation. Here is my Pen :

https://codepen.io/cpUserpen/pen/poEqbpx .

Is there a way I can do that same JS animation with only CSS? If that’s possible, then copying the code will be a lot better, as all of it will then show up.

Any ideas? If it isn’t possible to convert the WebGL code to CSS, how can I then copy it to have a 2nd copy of the image I used for my plane class?

Yes you can do this in pure CSS. If you are looking for the same effect without it being a direct translation of the JS, you can do this with several CSS technologies. Look up the following items…

  1. Transform (specifically scaleY(-1))
  2. Animations
  3. Your animations will simply manipulate the ghost up and down through a “Translate” in CSS.

But yes, all that can be done in CSS. You will be amazed at all the things you can do in CSS. Codepen has a ton of examples of CSS only animations and manipulations like this.

1 Like

It seems that people with CSS skills are required for this one, so I’m moving this thread over to the HTML+CSS forum to gain their insight.

1 Like

I can’t seem to find anything that’s the same animation as this one from WebGL. I did look up the items you mentioned @Martyr2

If you are talking about the bottom of the ghost figure that seems to morph a little then you can do something similar using svg and animating the path or using clip-path and animating the clip paths.

It will be quite tedious to do something complex but it depends how much effort you put into it.

Here’s a basic example using clip-path.

More info here.

2 Likes

@PaulOB yep that’s what I’m talking about. Ok, I can give this a try. Thanks.

@PaulOB, so I can’t apply the sway effect to my image instead of using clip path?

Does anyone know if duplicating WebGL codes are possible? Specifically this one I used, and/or duplicating its class “plane”?

The idea was that you just drew that simple shape as in my demo. You can’t change an image unless you draw it as an svg and then you can animate the paths. However as I said above it is quite tedious to do manually which is why there are libraries around to do them.

That would be a JS question and not within my remit. However it would be helpful if you pointed to the resource where you got the js from so the JS experts can see the original. It looks as though the code you have is specific to one element and you can’t just duplicate the same ids and expect it to work on something else. IDs are unique so you can’t reuse them.

1 Like

True. So what else can I do with this?

I got the JS from this : https://codepen.io/martinlaxenaire/pen/pVQYoG?editors=1010

Hope that helps?

I’ve sorted out the ids, html and css and then simply duplicated the js with different ids so that we can get a working copy.

I’ll throw this back to the js forum now because that’s obviously not the right way to do this but my js skills are limited and I know nothing about webGl either :slight_smile:

Hopefully a JS guru (@Paul_Wilkins ) can now simplify the code now that you have posted the source and there is a working copy to work from Just fork the codepen to make it your own.

1 Like

Here was the closest I got to it in CSS only.


1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.