Swing Animation
Hello guys, I am attempting to make a square move towards you like a swing would! My first thought was that it would be a transform property value but I am having a hard time finding it!!!!!! Here is an image to help you visualize the type of swing animation I am going for!!!
16 Replies
nvm I cant use the gif in this post to help you guys visualize the type of swing so please dm me if u need the gif
Imagine this dog swinging towards u
Basically a square would swing towards you
like
the positioning would stay the same
but it would swing up a bit
u know what I mean?
you can't use / commands in the first post of a new post, but you definitely can in subsequent posts. And posting links works just fine
i think you mean something like this
https://codepen.io/MarkBoots/pen/wvZdmOZ
Probably it's not what you are looking for, but I think it's worth to share: https://webglfundamentals.org/webgl/lessons/webgl-qna-drawing-2d-image-with-depth-map-to-achieve-pseudo-3d-effect.html
Drawing 2D image with depth map to achieve pseudo-3D effect
Drawing 2D image with depth map to achieve pseudo-3D effect
Thats close, basically I need something that flaps back and forth without losing its positioning on the top
like think of the chains of a swing hooked up to the top pole
the pole doesnt lose its positioning
but the chains swing
does that make sense?
thanks for reacting to my post btw
change it to
transform-origin: top (or 50% 0% which is center top)I did, the top still loses some positioning
I like only want the bottom to make that motion
do u see how rn its doin it on the top and the bottom
i've updated the pen, it should be okay
nice what did u do to fix it
what i said, i changed
transform-origin: 50% -100% here the rotation point is 100% above the top
to
transform-origin: top here it is the top itselfhow long have u been doin css
uhm, over 25 years or so 👴
oh i did transform-origin: top(50% -100%);
im not super familiar with those properties, gonna look for an online course that focuses on a deep dive into css animation
wow nice