Help with marquee style slider

[Unthink]

Hi there,

 

I found a really great example pen here: 

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

 

However i'd like to have variable widths on each slide as my gallery will have lot's of image types within e.g square, portrait and landscape

 

When i remove "width: 100%" from the slides they start to overlap and look glitchy

 

See actual w.i.p site: https://unthinktest.xyz/levine-leavitt/artist/peter-funch/

I've remade the slider section in codepen also: 

 

Any help or pointers would be much appreciated!

 

thanks

Philip

 

See the Pen WNJEoZe by phlp (@phlp) on CodePen

[Rodrigo]

Hi Phillip and welcome to the GreenSock forums!

 

Unfortunately the setup you're using, while si a good inspiration, is not suited for what you're trying to create, it needs something that adapts to the needs of your project.

 

I think the best approach is to first create the slider animation with the modifiers plugin in order to create the infinite loop. Once you have achieved that, start plugin in the rest of the functionality until you reached a point were you're satisfied.

 

Right now I ran out of time to create something that would be enough to get you started, sorry about that. This is a simple codepen that sets up the images regardless of their width:

See the Pen qBYXKOr by rhernando (@rhernando) on CodePen

That should be a good starting point to now add the animations and the modifiers configuration to keep the infinite loop. This codepen should be a good starting point as well:

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

 

As I said, once you get the infinite loop going you should be half way there.

 

Finally thanks for being a Club member and supporting GreenSock 🥳

 

Happy Tweening!!!

[GreenSock]

There's a demo on the helper functions page of the docs that might be very helpful, at least as a starting point: 

 

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

 

It's draggable, has inertia, accommodates variable width elements, snaps, and is responsive. Plus it lets you jump to whatever index you want. 💚

 

Enjoy!

[Unthink]

Hi Jack + Rodrigo!

 

Thanks alot for you time and input.. you got me pointed in the right direction for sure, I've updated my pen now: 

 

The only issue i noticed is when there is a <video></video> tag within the slide-box and you drag it across its like the video is on a separate axis - perhaps it's a simple fix and in fact it seems to resolve itself when you resize the screen, see: https://unthinktest.xyz/levine-leavitt/artist/steven-wilson/

 

Again, thank you so much for your help!

 

cheers

Philip

[GreenSock]

My guess is that you're running your code before the video loads (and then the layout shifts when the size is determined). Have you tried putting your code in a "load" event (so it runs when things are done loading)?

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

[Unthink]

Thanks Jack! Yes, that's fixed it! Thanks alot for your help

[Unthink]

@GreenSock Just a quick question, if i wanted to have multiple sliders running on the same page... (exact same functionality and markup - just with different content) is this possible? and is there an example of this in the documentation? thanks!

[Rodrigo]

Hi,

 

The code in the latest example is completely re-usable so all you have to do is pass the collection of dom elements you want to animate to the function as many times as you need. Just avoid giving all the elements the same class name or select them through their parent elements, in which case each parent should have it's own ID in order to differentiate each collection set.

So your HTML could look like this:

<div id="parentOne">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div id="parentTwo">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div id="parentThree">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

You can get three different set of boxes using GSAP's selector utility method:

// First Set of Boxes
const parentOne = gsap.utils.selector("#parentOne");
const boxesOne = parentOne(".box");
// Second Set of Boxes
const parentTwo = gsap.utils.selector("#parentTwo");
const boxesTwo = parentTwo(".box");
// Third Set of Boxes
const parentThree = gsap.utils.selector("#parentThree");
const boxesThree = parentThree(".box");

// Now create the animation for each set of elements
window.addEventListener("load", () => {
  const loopOne = horizontalLoop(boxesOne,{/*...*/}); 
  const loopTwo = horizontalLoop(boxesTwo,{/*...*/}); 
  const loopThree = horizontalLoop(boxesThree,{/*...*/}); 
});

If you run into an issue with this, please provide a simple minimal demo so we can take a look at it.

 

Happy Tweening!!!

[GreenSock]

Yep, or you could just loop through an Array of sections and set up a new one for each, like this: 

 

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

 

Have fun!