Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Akash Ranjan

Orbit along path in even manner with motionpathplugin

Recommended Posts

Hello Guys,

 

I am having trouble creating an circular animation with motion path. Basically what I am trying to achieve is that all the 4 images rotate in even manner. for example First image should start from 0%, second from 25%, third from 50% and fourth from 75%. Here is the code sandbox for my code

 

https://codesandbox.io/s/orbit-motion-path-mb6ns?file=/src/App.js:1339-1344

 

Please see attached screenshot for what I am trying to achieve1340342091_Screenshot2021-08-27153811.png.a3c585d34b9cea38c968f85935aa666c.png

 

Please help me.

 

Thanks

 

 

 

 

Link to comment
Share on other sites

Hey Akash.

You can do this a little more succinctly using staggers.

Here's a demo without react - try port this over and see if you run into issues.

If so - you may need to use useLayoutEffect instead of useEffect.

See the Pen ZEyGmOE by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Hello Cassie,

 

Thanks a lot for the help. This worked. The only issue I am seeing is that the images are not aligned to path when i load the page but when I refresh they appear correctly. The same this I am noticing with the pen you shared. Can you please help me with that.

 

motion-path-issue.thumb.png.18f8e51131dde49e89766fc51e5fa4c5.png


Thanks

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×