Alphan Posted February 15, 2023 Share Posted February 15, 2023 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted February 16, 2023 Share Posted February 16, 2023 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! 1 Link to comment Share on other sites More sharing options...
Alphan Posted February 17, 2023 Author Share Posted February 17, 2023 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.   Link to comment Share on other sites More sharing options...
Cassie Posted February 17, 2023 Share Posted February 17, 2023 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 2 Link to comment Share on other sites More sharing options...
Alphan Posted February 20, 2023 Author Share Posted February 20, 2023 @Cassie, thank you. This gives me a good direction. 1 Link to comment Share on other sites More sharing options...
Dennyno Posted March 1, 2023 Share Posted March 1, 2023 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  1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now