Jump to content
Search Community

MotionPath-seamlessly loop logos along the defined curved path movement (which is red dashed line shown in pic)

kok siang test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Dear Sir/Madam, 

 

I wanna do the animation same as title written: seamlessly loop logos along the defined curved path movement (which is red dashed line shown in pic). 

 

I have found the similar example but the the elements (eg. mosh products) are loop along the x-axis infinitely (website link:  https://moshlife.com/?ref=ecommdesign). However, I wish to loop the elements along the defined curve path movement as shown in below attached picture. 

 

I think MotionPath plugin tool might help, but I am beginner who don't know how to do it and ask for help. 

 

Thank you. 



gsapforum_motionpath-01.jpg.cfc9229feaa0ab83645cf0baad834338.jpg

Link to comment
Share on other sites

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

Link to comment
Share on other sites

  • Solution

There is a lot here you can gather from reading the forum or the docs. I would create several timelines that get added a master timeline, which move the elements along a path and have them set to loop. If you could get them to move from off screen to the other side offscreen you could create the effect that they are looping. 

 

I don't have time to create a whole demo from scratch, so if you could post a pen with all the elements in place (and just try to get it working, that is the best way to learn) we could take a look and try to help you out. 

 

 

And here are a lot of demos to get you started

https://codepen.io/collection/DYRzxd?cursor=ZD0xJm89MSZwPTEmdj0z

  • Like 3
Link to comment
Share on other sites

15 hours ago, GSAP Helper said:

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

Dear Sir/Madam, 

Noted. I will learn to create a minimal demo

 

Thank you for your message. 

 

 

Link to comment
Share on other sites

15 hours ago, mvaneijgen said:

There is a lot here you can gather from reading the forum or the docs. I would create several timelines that get added a master timeline, which move the elements along a path and have them set to loop. If you could get them to move from off screen to the other side offscreen you could create the effect that they are looping. 

 

I don't have time to create a whole demo from scratch, so if you could post a pen with all the elements in place (and just try to get it working, that is the best way to learn) we could take a look and try to help you out. 

 

 

And here are a lot of demos to get you started

https://codepen.io/collection/DYRzxd?cursor=ZD0xJm89MSZwPTEmdj0z

Dear Sir, 

Thank you for your help (& the hints too) .

 

I will learn and create the minimal demo via using codepen if I still have the problem with your minimal help ( or your guidance advice). 

 

Thanks again. 

 

 

 

Link to comment
Share on other sites

  • 1 month later...
On 6/16/2022 at 7:48 PM, Cassie said:

This thread too -

 

 

Dear Ms. Cassie, 

 

I enclosed herewith the minimal demo:- 

See the Pen yLKzXKL by koksiang (@koksiang) on CodePen

 

It seem weird and cannot get what I want as shown in picture posted at 16 June 2022 (the green background ones). Here is the problem as listed below:- 

 

1. I want to show only 5 items which is div class namely "item" (etc. logo1, logo2, logo3, logo4, logo5) during the loop. However, If I have 20 items in loop , all items are overlap each other and there is no spacing between the items. 

 

2. If I try to change orbitTime=20 and orbitTiming=4, it will overlap between the item as shown in attached picture below. 

 

Appreciate if you could give me any suggestion to solve the problems? I just wan to appear only 5 items during the loop. 

 

Thank you. 

 

 

 

 

 

Capture.PNG

  • Like 1
Link to comment
Share on other sites

3 minutes ago, kok siang said:

Dear Ms. Cassie, 

 

I enclosed herewith the minimal demo:- 

 

 

 

It seem weird and cannot get what I want as shown in picture posted at 16 June 2022 (the green background ones). Here is the problem as listed below:- 

 

1. I want to show only 5 items which is div class namely "item" (etc. logo1, logo2, logo3, logo4, logo5) during the loop. However, If I have 20 items in loop , all items are overlap each other and there is no spacing between the items. 

 

2. If I try to change orbitTime=20 and orbitTiming=4, it will overlap between the item as shown in attached picture below. 

 

Appreciate if you could give me any suggestion to solve the problems? I just wan to appear only 5 items during the loop. 

 

Thank you. 

 

 

 

 

 

Capture.PNG

@Cassie

Link to comment
Share on other sites

This goes well beyond the scope of help we normally provide here, but I was curious and I wanted to make it easier for you, so here's a way you can limit the number of items visible on the curve at once, and seamlessly loop them: 

See the Pen RwMLZLO?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It isn't a trivial thing to do the seamless stuff because you have to work through the logic involved in overlapping the first ones, starting part-way into the timeline (the point at which the first group are all visible), hiding/showing them at the right spot, etc. 

 

I hope that helps. 

  • Like 1
Link to comment
Share on other sites

4 hours ago, GreenSock said:

This goes well beyond the scope of help we normally provide here, but I was curious and I wanted to make it easier for you, so here's a way you can limit the number of items visible on the curve at once, and seamlessly loop them: 

 

 

 

It isn't a trivial thing to do the seamless stuff because you have to work through the logic involved in overlapping the first ones, starting part-way into the timeline (the point at which the first group are all visible), hiding/showing them at the right spot, etc. 

 

I hope that helps. 

Dear Mr. Jack, 

 

Thank you for your help & the hints. It's what I am looking for. 

 

I have tried its working and am going further understanding the logic of the script. 

 

Thanks a lot. 

@GreenSock

 

 

  • Like 2
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.
×
×
  • Create New...