Change the scale of current element in Horizontal Loop (helper function)

[giovannimalausa]

Hi everyone,

I'm trying to make a slider using this helper function (horizontalLoop). I've read the documentation and I don't understand how to change the scale of the current element (the one centred) in the loop, in a way that makes the current (centred) element bigger than the rest.

 

I tried applying a custom class each time an element is "current"

 

.current {scale: 1.2}

The class applies correctly but the the inspector shows it is bypassed by 

 

 

element.style {
	translate: none;
	rotate: none;
	scale: none;
	transform: translate(0px, 0px);
}

 

I think these values are applied by the helper function.

 

I'm kinda stuck, so any help would be much appreciated.

 

Thank you,

Giovanni

 

 

See the Pen NWEbRPV by giovannimalausa (@giovannimalausa) on CodePen.

Edited June 23, 2023 by giovannimalausa
added a codePen, I hope it helps

[Rodrigo]

Hi Giovanni,

 

Unfortunately with the current state of the helper function that is not possible. The helper function bases it's functionality on elements having a static width when the function is created. Each element can have different widths, that's no problem, but they shouldn't change during the loop's lifetime, as Jack explained in this thread:

 

Maybe you could look at other alternatives out there, but that is definitely not a simple thing to tackle.

 

Good luck with your project.

Happy Tweening!

[GreenSock]

Yep, it's all doable with enough custom logic for sure. Definitely not simplistic, though. You're welcome to reach out to us if you'd like to hire GreenSock for paid consulting services.