Pinning an element starting at position absolute top 0 at the bottom of a container when coming in view

[greedyboi.]

Hello,

As said in title, I'm building a leaderboard and I need to achieve the following:
The user rank card is absolutely positioned at the top of every other cards and start at the top of a container div and when scrolling in view I want to have this card to be "pinned" at the bottom of that container div. (the video explains the behavior I need to achieve)
Tried with a scrolltrigger and position fixed when entering the trigger no success, tried also with pin: true but I keep getting the error
'Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.' 

FYI I'm already using useLayoutEffect to avoid this error, still no success

It works in the codepen but I'm not using the static usage of ScrollTrigger, instead I'm passing it into a timeline.
FYI 2, the leaderboard and the user card are conditionally rendered according to server response.
 

See the Pen abPOEyL by greedyboi- (@greedyboi-) on CodePen

[mvaneijgen]

Hi @greedyboi. welcome to the forum!

 

I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums... Keep it simple. Don't list a bunch of requirements ("it should animate over each section, and gradient colors over those children, force animation on hero load and then have ScrollTrigger take over dynamically...and I think my code is a mess so please help clean it up" - that's too hard to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Also you're not having the issue on Codepen? You can use our Stackblitz starter templates to share a demo in React (You said you're using proper clean up, but just to be sure please read this article!)

 

Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

Maybe something like this:

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

 

Hopefully this helps.

Happy Tweening!

[greedyboi.]

Hi @mvaneijgen, @Rodrigo, thanks for your reply !
I managed to get It working by changing the way I implemented the animation 😊

Rodrigo, thanks a lot for the pen, It helped me understand a few things !