ScrollTrigger and cards animating vertically

[Fernando Matias Cohen]

Hello! I haven't asked for help in a while, but I haven't used Gsap in a while, so I'm a little rusty.

I'm having trouble with a transition that I think should be pretty easy, but I'm getting tangled,

I just need the section to be pinned, and that as you scroll, a card is positioned in the middle at the title level, and in the next scroll, that card goes up, and the second one remains, etc.. then I have I have to refer it to a page that is on the right side vertically, but I later see how to solve it, mainly I am getting dizzy with the snap and stagger

See the Pen bGybyrd by designfenix (@designfenix) on CodePen.

[Rodrigo]

Hi,

 

I think you should simplify your approach a little bit, get the animation with ScrollTrigger working first and then add snapping to the mix.

 

I recommend you to have a look at this threads in order to better grasp the stacking card concept:

 

 

Hopefully this helps.

Happy Tweening!

[Fernando Matias Cohen]

Hola Rodrigo!!

Thanks for the help, the problem is that basically I need it to behave like a vertical slider with navigation etc., but for the timeline to be the scroll, and in the examples you gave me I don't see that it's close to what I'm looking for .. but hey, thanks anyway, I'll keep trying

[Rodrigo]

Hey Fernando!

 

I don't know if there is a single demo around that does everything you need, so most likely this will reduce to get inspiration and bits from several of them. Here are others that can definitely help:

See the Pen poBRQRj by GreenSock (@GreenSock) on CodePen.

 

See the Pen BaMOapv by GreenSock (@GreenSock) on CodePen.

 

See the Pen rNbELKO by GreenSock (@GreenSock) on CodePen.

 

See the Pen xxjErmp by GreenSock (@GreenSock) on CodePen.

 

See the Pen wvrXRdZ by GreenSock (@GreenSock) on CodePen.

 

It's always a good idea to keep these collections in your bookmarks just in case:

https://codepen.io/collection/AEbkkJ

 

https://codepen.io/collection/DkvGzg

 

Hopefully this helps,

Happy Tweening!

[Fernando Matias Cohen]

I feel like I'm close to achieving at least the vertical slide animation, the cards appear one at a time correctly and go up, but I have 2 problems.
The snap is not positioned well, since the card is not centered in the scroll, and when I scroll up, it seems that there is a glitch in the animation, could you guide me a little with that?

See the Pen bGybyrd?editors=0010 by designfenix (@designfenix) on CodePen.

[Rodrigo]

Hi,

 

I don't have time now to dig into your code, but you could check @Carl's video on staggers and sequences:

 

Hopefully this helps.

Happy Tweenig!

[Fernando Matias Cohen]

I really can't do it, I'm nowhere near crying,

I already achieved the transition like the video you shared with me, but I still need to make some changes that I can't achieve.

I thought about doing a forech to be able to detect if it is the first card, that it is visible and only goes up, the rest of the card should act normally, they appear and disappear, and if it is the last one it only appears, it does not have to disappear. like a vertical slider.

and then I have to apply the same logic with the navigation, once I achieved those animations I thought to see how to add a label to each card animation, to relate the navs when clicking to make me scroll to that card animation.

could you give me a little help? Tell me that I'm doing everything wrong.

 

[Rodrigo]

Hey Fernando!

 

Indeed this is mostly about JS logic. What you have to do is check if a previous element exists in the array based on the current index value inside a forEach loop:

const elements = gsap.utils.toArray(".list-element");

elements.forEach((element, i) => {
  const previousElement = elements[i - 1]; // undefined for 0
  if (previousElement) {
    // Create your animations for current and previous the elements, in/out
  } else {
    // Set the initial state (visible) of the first element
  }
});

Checking for the previous element guarantees that the out animation won't be created for the last element and the in animation won't be created for the first one.

 

I simplified the demo to remove the nested loops with just one set of elements:

See the Pen pomvabo by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.

Happy Tweening!

[Fernando Matias Cohen]

ok thank you very much I made it! The only thing I don't see where the error is, is that there is 0.50 dead time at the beginning of the scroll trigger with the snap, has this ever happened to you?

See the Pen bGybyrd?editors=1011 by designfenix (@designfenix) on CodePen.

[GreenSock]

Yeah, it's just a logic issue in your code: 

// bad
.to(item, { background: "#ed3c3c",boxShadow:'0 0 16px #ed3c3c' }, 0.5 * i)

// good
.to(item, { background: "#ed3c3c",boxShadow:'0 0 16px #ed3c3c' }, 0.5 * (i-1))

You were running that logic on only the 2nd item and after. Thus everything starts at 0.5 seconds into the timeline. 

 

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

[Fernando Matias Cohen]

Thank you all for the collaboration, it was perfect!

[soydannybrooks]

Hello to everyone.
@Rodrigo hope you're doing great.

I followed your example (

See the Pen poBRQRj by GreenSock (@GreenSock) on CodePen.

) and I've created this page https://neostelladev2.wpengine.com/neotalentlab/temp/
But I'm having an issue because if I add more than 4 cards, the next section of the page appears under some of the cards (https://prnt.sc/QC2MmlvgAXRs), and I don't know what to do, because if I increase the 'end: "bottom 550" ', if I add just 4 or less cards the distance will be too high.
Is there any way to have some fixed space between the last card and the next  section? (Reference image: https://prnt.sc/kqcYC6FONU_o)

I appreciate your help in advance.

Have a great day.

Daniel

[Rodrigo]

Hi,

 

The code is fully dynamic so there shouldn't be any issues regarding the amount of cards. The problem I think stems from the fact that the demo I created uses a fixed height for the cards (500px) and the wrapper around all the cards has a padding bottom of 50px, hence the end is bottom 550, that means when the bottom of the end trigger reaches 550 pixels from the top of the viewport. You have to adjust that to the height of the card elements you're using.

 

Hopefully this clear things up

Happy Tweening!