Ellipse carousel

[FilipSzemraj]

Hello,

I have a couple of questions and one dead end that I can't seem to solve. I am attempting to create an ellipse carousel, essentially similar to this one made in a circle: 

 

My main issue lies in the fact that I'm attempting to move objects along the path using the progress parameter, and I don't know how to achieve this functionality. I have tried to add animation to the timeline, but currently, it isn't moving even with the basic rotation for the div, which acts as a wrapper. I've added numerous console.log statements to track progress changes, and they seem to be updating correctly. The relevant code for inspection is from line 65 to 177, with some comments interspersed.

 

From the side problems I'm also struggling to track the active element using animation added to the timeline, similar to the example provided by GSAP example pin (lines 83-97, currently commented out). Currently, I am changing this value within the 'moveWheel' function at line 162.

 

Here's StackBlitz link for the above questions: https://stackblitz.com/edit/stackblitz-starters-4p7twq?file=src%2Fcomponents%2FroundComponent.js

 

Another issue I need assistance with is the 'convertToPath' function. I am attempting to obtain a path from an ellipse, but when I position the SVG beforehand (for example, by centering it using cx and cy values), obtaining the path doesn't reflect this position. Additionally, if I try to directly add a translate into the generated path, it doesn't work. How can I accomplish this correctly? I have provided separate code to visualize this problem: https://stackblitz.com/edit/stackblitz-starters-6mzrk4?file=src%2FApp.js

 

P.S. Regarding the issue with converting the ellipse to a path, I've noticed that if I comment out line 57 within my code, it looks as it should, but now the entire path isn't visible 😕. I've saved the StackBlitz project with a comment on that line. Perhaps you could provide me as I think with some simple solution to get a whole path of svg visible?

 

Thanks in advance.

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

[GSAP Helper]

One problem for sure is this: 

gsap.timeline({defaults: {paused: true, reversed: true}});

 

That means that EVERY child tween that gets added will be paused and reversed. The playhead on a paused tween is as if it is "locked" in terms of the parent's playhead (as the parent's playhead moves across a paused tween, it won't move that paused tween's playhead). I'm curious why you tried setting the defaults to be paused: true and reversed: true. 

 

As for the rest of what you're asking, I'm having a very difficult time understanding what you're looking for here, sorry. 

 

My suggestion would be to Keep it simple. Don't list a bunch of requirements ("it should ___, and ____, and then also ____ while _____ ..." - that's too difficult to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I get the <div> elements to move along the path to wherever I clicked?" Keep your CodePen/Stackblitz focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 🙂

 

Before you know it, things will fall into place one at a time.

 

Don't worry - this community has got your back when it comes to GSAP-specific questions. I just wanted to provide some pointers on how to help us help you. 

[GSAP Helper]

Also, for the path conversion, I think the issue is that you're using percentage values which aren't compatible. Use normal SVG units and it should be fine. Maybe like: 

 <ellipse
  cx={window.innerWidth / 2}
  cy={window.innerHeight / 2}

Or you can set a viewBox and have the SVG scale/stretch accordingly so you can hard-code numeric values in there while keeping it somewhat responsive. 

[Rodrigo]

Hi,

 

You might want to have a look at this thread, especially the posts by @mvaneijgen and @PointC:

 

Happy Tweening!

[FilipSzemraj]

I have figured out the solution to the first question using a simple function. Now, I will attempt to make it dynamically adaptable to a changing number of divs on the path, and to add a div displaying for the active element.

12 hours ago, GSAP Helper said:

Also, for the path conversion, I think the issue is that you're using percentage values which aren't compatible. Use normal SVG units and it should be fine. Maybe like: 

 <ellipse
  cx={window.innerWidth / 2}
  cy={window.innerHeight / 2}

Or you can set a viewBox and have the SVG scale/stretch accordingly so you can hard-code numeric values in there while keeping it somewhat responsive. 

Thank you very much with this help, such a small change and everything now works perfectly.

 

This is the code for the ellipse carousel activated by clicking on some element: https://stackblitz.com/edit/stackblitz-starters-b86qnv?file=src%2Fcomponents%2FroundComponent.js

[FilipSzemraj]

For everyone who will look at this topic in the future, here is the code for an ellipse carousel, which includes a function to display the inner div for the active element: https://stackblitz.com/edit/stackblitz-starters-b86qnv?file=src%2Fcomponents%2FroundComponent.js