CarlosG Posted July 15, 2023 Share Posted July 15, 2023 HI, i got this stacking cards but need to leave the last one visible when finish, also how to make all the cards to start scaling size together and avoid last card to had to scale all at once See the Pen yLQKJex by cgallardoBSA (@cgallardoBSA) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted July 16, 2023 Share Posted July 16, 2023 Hello Carlos. 14 hours ago, CarlosG said: i got this stacking cards but need to leave the last one visible when finish There's a couple of ways you could achieve that. One way would be to just add a class to your last card and exclude that class from the tween targets that are supposed to tween their opacity to 0. // HTML ... <div class="card last"></div> ... // JS ... tl.to(".card:not(.last)", { opacity: 0, ...}) ... Another would be to use the functional values as you do in your setup atop of your JS, and that way exclude the last index from the targets. 15 hours ago, CarlosG said: also how to make all the cards to start scaling size together and avoid last card to had to scale all at once For what I suppose it is you want to achieve, you will likely need to rethink your logic a bit anyway though, so I would suggest taking care about the part with the opacity of the last item not changing after you got that other part right. Right now, you are utilizing a staggered tween on all of the cards, that means every card will move from where it is now to what you set as the scale and y values to tween to, one after the other, delayed by that stagger value - which is exactly what your happens in your example. What I suppose you want to happen instead, is move all of the cards forward a fraction of those scale and y values bit by bit; and you want to repeat that procedure for whatever amount of cards you have, right? So I don't think staggers are what you'd want to use here. This is what I'd do: After setting up the timeline without adding something to it at first, I would create an array of all cards and loop over them with a forEach loop. For each of them add one tween to the timeline, that tweens ALL of them forward a fraction (which would correspond with the values you initially used to spread them apart) using relative values, so for the scale it would be "+=0.05" and for the y it would be "+=35". After that, for each of them add another tween to the timeline, that tweens ONLY the card that is being looped over at that moment to opacity 0. And if you then wanted to exlude that last card from the opacity tween, you could just wrap the creation of those second tweens added to the timeline in the forEach loop in an if statement to check whether the index corresponds to the last element or not, e.g. something like this: if (index !== cards.length - 1) { // if card element is not the last in the array ... add opacity tween } That should pretty much give you the desired behaviour then. Give it a shot and if you get stuck, post back with what a demo of what is making your head scratch, and I'll see how I can help. 3 1 Link to comment Share on other sites More sharing options...
CarlosG Posted July 17, 2023 Author Share Posted July 17, 2023 having problems applying the scale and y See the Pen poQLmBd by cgallardoBSA (@cgallardoBSA) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted July 17, 2023 Share Posted July 17, 2023 21 minutes ago, CarlosG said: having problems applying the scale and y Relative values go into quotation marks as a string, like so y: "+=35" I don't know where else this is mentioned, but you can find reference of it when you search for "relative" in the docs for the CSSPlugin or the Getting Started Article. You're almost there; but you shouldn't remove the initial .set() call you had, because that is responsible for getting the layout right to begin with, so I put it back in. Also, one little thing you just missed is to target ALL cards in the first tween added in the forEach loop. Those things changed, it should behave more like what you had in mind now, right? See the Pen BaGrgNp by akapowl (@akapowl) on CodePen Here's another variant, where the opacity gets tweened first - I technically just changed the order of the tweens in the forEach loop, and added the movement tween into the if statement checking for whether we are on the last element; else it would have moved too far in comparison to the others. Just to give you another idea for how to possibly tweak things. See the Pen jOQzjVZ by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
CarlosG Posted July 17, 2023 Author Share Posted July 17, 2023 that is perfect!!! one other question, i need to update an indicator about the slide number currently visible, which is the event to use? and how it is applied i will keep learning on this plugin is really amazing Link to comment Share on other sites More sharing options...
Solution akapowl Posted July 17, 2023 Solution Share Posted July 17, 2023 Sorry, but I don't think there is one silver-bullet event for that. You could e.g. use a .call() on your timeline that calls certain functionality at some point. https://greensock.com/docs/v3/GSAP/Timeline/call() Also, GSAP tweens have multiple callbacks that you could hook into - ScrollTrigger also has its own, but since you are only using one ScrollTrigger instance here, I don't think they will be that helpful; just wanted to mention that nonetheless. This here is just to demonstrate some options you have. See the Pen wvQmLEy by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
CarlosG Posted July 17, 2023 Author Share Posted July 17, 2023 ok it seems it works for me, thanks for your help Link to comment Share on other sites More sharing options...
CarlosG Posted July 24, 2023 Author Share Posted July 24, 2023 How can i achieve this effect, be able to see the previous and next sections without them to scroll, the slides take about 50% screen height, when it reaches the end you can see the next section scrolling into place See the Pen bGvazZg by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted July 24, 2023 Share Posted July 24, 2023 Your question looks like it has nothing much to do with what you originally asked in this thread. Please be so kind to create a new topic for your question. Thanks! Link to comment Share on other sites More sharing options...
Rodrigo Posted July 24, 2023 Share Posted July 24, 2023 Hi, Put all three sections (Blue, Green and Yellow) in the same parent, pin the parent and use the blue section as the trigger. Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Rodrigo Posted July 24, 2023 Share Posted July 24, 2023 Hi, This is something that came out by helping in another thread, here is a demo that illustrates what I mean: See the Pen abQaJQo by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
CarlosG Posted July 25, 2023 Author Share Posted July 25, 2023 thanks but in this case the next section is a different block it could be any of my options 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