Animation Path

HTML & CSS
1

Hello!

I am trying to create a small animation based on an ellipse scheme.
So I have create this one on Figma and export it as SVG so I can get the path.
Ellipse 1

The thing is that when I put the path in some images that I want to move, I want the eclipse animation to happen around their current position of the image, but the initial point has been moved to the left side.
Here it is

image
image1143Ă—574 32.1 KB

Here is the demo page: https://officenter.gr/atomind-home/atomindtv2.html
If you change the offset-distance on the images, you will see the images moving across the page.

Maybe it’s something wrong with how I export the path, not sure.

Do you have any solution to this?

2

To clarify, you want the movement of the animation to match the path of an ellipsis? So going around in a circle (ellipsis) over and over again?

3

Yes but the center of the ellipsis would be the center of the current element position

4

I know how to make an element travel along an ellipsis path:

  1. Create an SVG path
  2. Use some JS to set an element to follow that shapes path using GSAP (a javascript library)

E.g. I created a figure 8 (infinity symbol) and did this approach recently to make birds fly in a figure 8 formation (starting point is configurable).

However, your requirement about using the center of the ellipsis makes this out of my wheelhouse. Good luck.

2 Likes
5

I think you need offset-anchor but it only works in Firefox at present from the looks of things.

I also think there’s a disconnect between the 1 fr, the image.svg fixed width and the fixed path in pixels. Haven’t really played with offset-path before so I’m not sure how you can make it responsive.

1 Like
6

Ok yes this seems to make the job somehow, I will try it.

Thanks!

1 Like
7

As I see the images are not rotating from the center of each grid position.
Is this happening to you too?

Also the “offset-anchor” is not working in the browser

What if I use another browser? is there something that it can work?

8

Offset anchor only works in Firefox as I said in my last post :slight_smile:

Also as I said in my last post the offset path is not responsive so you can’t make it relate to a fluid container. You would need to use a container that is the same pixel size as the path you have defined in order for its position to match. (Or a container that is in some way proportionate to the offset path. )

Offset-path does not work with percentages so has limited use and should only really be used in fixed width and height elements.

I’m not really clear what effect you wanted as your original code had the elements going all over the place. Are the images supposed to spin from where they are or follow each other around the large main container?

You may need to resort to js if you want this responsive or perhaps utilise transform instead of offset-path although you will have to greatly simplify the effect.

1 Like
9

yeah I will need to find another way to work around it :slight_smile:

Yes you are right, it works only in firefox!

1 Like
11

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