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 :
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.
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…
Transform (specifically scaleY(-1))
Animations
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.
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.
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.
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
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.