carousel - find the center item and scale; draggable, scrolltrigger

[Alphan]

Hello,

I am new to gsap and gsap forums. I've been playing around with gsap and it's a lot of fun.  🙂 

I have few questions regarding these two examples:   + 

See the Pen mdROBXx by creativeocean (@creativeocean) on CodePen

.

 

1) I am trying to create a scale effect to the item that's in the middle. Maybe something like scale from .6 to 1, maybe opacity change the opacity .6 to 1 too. How do I determine which item is in the middle? What's the cheapest way to do that?

2) Can I use scroll trigger and use draggable at the same time? If yes, how does that work with scrollbar? 

 

3) Lastly with this example, what do I need to do to be able to create multiple scrolltriggers?

 

 

 

Thank you!

See the Pen LYpwjBW by creativeocean (@creativeocean) on CodePen

[Rodrigo]

Hi @Alphan and welcome to the GreenSock forums!

 

First thanks for being a Club GreenSock member and supporting GreenSock! 🥳

 

I think this example might provide the right inspiration for what you're trying to achieve:

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

 

I believe that example should provide answers for 1) and 2).

22 hours ago, Alphan said:

Lastly with this example, what do I need to do to be able to create multiple scrolltriggers?

I'm not sure I follow this. Why do you need multiple ScrollTrigger instances on that particular example? What exactly are you trying to achieve with that?

 

If you keep having issues, please post a minimal demo showing what you have already.

Happy Tweening!

[Alphan]

Hi @Rodrigo. Thanks for your reply.

3) I have two sets of logos in two different rows that utilizes ScrollTriggers (e.g. ScrollTrigger.create({})). Very similar to this example (), but I rotate them in y axis. I saw some examples where ScrollTriggers can be embedded into a timeline. How does that work? 

 

 

1 and 2) I played around with this example (

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

) for a bit. I find this one to be little bit hard to understand for a gsap beginner. There is too much going on.

In this example (), what's the best way to find the mid point in a carousel? Screenshot attached. Once I know how to do that I think I can add/change opacity/scale.

Thanks.

 

 

[Cassie]

Hey there!

 

There's no easy way I can see to find the center item in that demo because that's not how the demo has been built. Each of those boxes is set up on it's own timeline and they're each starting and ending at  different rotation values. So even if you detect the mid point in each timeline they'll be in different places!

I'm sure there's a way to figure it out but it's certainly going to be a better plan to start from what *you* need and build it out to those specs rather than reverse engineer.
 

"box1" 0 - 360
"box2" 12 - 372
"box3" 24 - 384

etc for 30 boxes

This might be a good base point for the functionality you need?

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

 

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

[Alphan]

@Cassie, thank you. This gives me a good direction.

[Dennyno]

Or basically use Observer to get z-index values, the highest one it always the middle one.

This is the same, using gsap.ticker

 

const listItems = document.querySelectorAll('.list-container li');
let highestZIndexItem = null;

function updateHighestZIndexItem() {
  const newHighest = Array.from(listItems).reduce((highest, item) => {
    return parseFloat(item.style.zIndex) > parseFloat(highest.style.zIndex) ? item : highest;
  });

  if (newHighest !== highestZIndexItem) {
    if (highestZIndexItem) highestZIndexItem.classList.remove('highest-z-index');
    highestZIndexItem = newHighest;
    highestZIndexItem.classList.add('highest-z-index');
  }
}

gsap.ticker.add(updateHighestZIndexItem);

I used this quick solution once, as I didn't want to make another carousel my own.. and simply I used the one provided by the examples.

Tbh, there are many better ways, as @Cassie said

EDIT: on the second example, should be good going by size intead, as there's no z-index diff