Using a variable in Modifiers plugin

[celli]

I picked up the GSAP demo using the modifiers plugin, and I wanted to replace the number of the total width of the boxes in the carousel, with a variable called 'boxesLength' since I won't know how many boxes there will be. The number of boxes will change, so I wouldn't want to use a static number. Is it possible to use a variable like I have in my codePen ?

See the Pen BawpVwd by celli (@celli) on CodePen

[Cassie]

Definitely - but you'll need to get the length of ALL the boxes ✨

 

// bad - just getting one box
let boxLength = document.querySelector(".box").length;

// good - gets the length of an array of boxes
let boxLength = document.querySelectorAll(".box").length;

 

[celli]

Thank You Cassie! I totally missed that, thanks!

[celli]

I noticed one thing while inspecting and working with the demo — if I change the duration to something other than 1 (let's say .9) then the sync of the scrolling elements gets thrown off, you need to wait until the 7th or 8th element to scroll to see it.

Is there a way to compensate for a duration other than 1 ? You will see in my codePen I made some adjustments.

[Cassie]

Hmm, works fine for me - could you explain what issue you're seeing?

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

[celli]

Hi Cassie,

 

yes, 0.1 seems to work actually—did you try .9 ? The boxes eventually skip (usually at the 7th or 8th slide)... let me know if you see that happening? I changed it on your forked codePen and I get the same result

[Cassie]

Yeah I see, I'm not sure why that is at all. Sorry.

How about this option?

See the Pen dyVWYYM?editors=1010 by GreenSock (@GreenSock) on CodePen

[celli]

yep, I see. That's a nice way of doing it. I think maybe the .9 might be looked into just incase there is an issue somewhere, I can always use a different number. Anyway, thanks so much for helping me through it!

[PointC]

Looks like you're pretty close to what you want already, but I thought I'd point out the handy helper function for this type of animation. Works like a charm and is super flexible.

 

https://greensock.com/docs/v3/HelperFunctions#loop 

[celli]

thanks, that's nice PointC!

[PointC]

I'll take any opportunity to have Jack do my work for me. 🤣