Stacking cards fade out but keep the last one

[CarlosG]

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

[akapowl]

 

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.

 

[CarlosG]

having problems applying the scale and y

See the Pen poQLmBd by cgallardoBSA (@cgallardoBSA) on CodePen

 

[akapowl]

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

[CarlosG]

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

[akapowl]

 

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

[CarlosG]

ok it seems it works for me, thanks for your help

[CarlosG]

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

[akapowl]

 

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!

[Rodrigo]

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!

[Rodrigo]

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!

[CarlosG]

thanks but in this case the next section is a different block it could be any of my options