Carousel seamless loop animate active item width

[chacrasoftware 2 Likes (Newbie)]

Hello! can anyone help me to figure out how to animate the width of the active item? I'm using the horizontalLoophelper function and triggering the animation on the onChange callback but the carousel got messed up. thank you in advance!

See the Pen poVKJqd by davidkhierl-the-selector (@davidkhierl-the-selector) on CodePen

[Rodrigo 5,087 Likes (Superhero)]

Hi,

 

I've been fiddling around with the example and to be honest I don't know if this is intended for the use you're giving it. Perhaps it can be done but it's better for @GreenSock to give the verdict on that since the helper functions are His creations.

 

My guess is that the issue you're seeing comes from the fact that the elements are supposed to be translated a specific percentage amount, which changes when the active element becomes wider and the previously active element goes back to it's normal width. Maybe the fact that the percentage translation of a non-active element considers it's own width and not the width of an element that becomes wider.

 

The best I can come with is this. At the end of the helper add this:

tl.refresh = refresh; // <- give access to the refresh method outside the helper
return tl;

And then this:

let activeElement, loop;
loop = horizontalLoop(boxes, {
  paused: true, 
  draggable: true, // make it draggable
  center: true, // active element is the one in the center of the container rather than th left edge
  onChange: (element, index) => { // when the active element changes, this function gets called.
    if (activeElement) {
      activeElement.classList.remove("active");
      gsap.to(activeElement, {width: '20%'});
    }
    element.classList.add("active");
    
    activeElement = element;
    
    gsap.to(element, {width: '40%', onUpdate: test })
    
  }
});

function test() {
  loop && loop.refresh(true);
};

It's closer but it looks bad 🤕

 

I know the helper comes a long way in simplifying stuff but I would explore other avenues if possible but creating something like this might not be the simplest thing to do.

 

Sorry I can't be of more assistance.

 

Happy Tweening!

[GreenSock 18,264 Likes (Superhero)]

Yeah, that's definitely beyond the scope of what we can provide in these free forums, sorry. That helper function isn't made to accommodate messing with the widths after creation (aside from normal responsive percentages). With enough code, it's definitely possible to accommodate - just not simple. If you'd like to hire us to dig into that for you on a paid consulting basis, feel free to reach out and we can talk scope/costs. Or you can post in the "Jobs & Freelance" forum to see if someone else is willing to jump in on a paid basis. Or of course if someone has time and willingness to do it for free here, awesome. 👍