Pinned Tabed Content

[rubiksx]

Hi, i am looking to create similar pined content like this https://www.3coresec.com/platform/mdr where you see cards on the left for innovation, Unprecedented Stability etc.. but I want the content to change on the right for each one when its at the top.

not sure how to go about this any help would be appreciated 

[GSAP Helper]

This might be a good starting point for you:

Combine that with a timeline that changes the opacity of the content section that's pinned as well. Some examples of how to do this can be found: https://gsap.com/docs/v3/Plugins/ScrollTrigger/ and https://codepen.io/collection/AEbkkJ?cursor=eyJwYWdlIjoxfQ==

Beyond that:

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[Rodrigo]

Hi,

 

@mvaneijgen one of our superstars here in the forums wrote this guide about creating stacking cards animations:

 

Hopefully this helps.

Happy Tweening!

[rubiksx]

Thank your both this is ace think I be able to sort it from these articles  

[rubiksx]

I just sorted this out now, but i have a couple of questions that I am not sure how to solve 

When it turns active (yellow), I want it to stick on the scroll for a short period before it starts fading out.

With the content on the right, how can I set the visible to 0 so I cannot see the other videos (I tried doing two timelines, but it wasn't really working)

See the Pen mdgeNKv by mattbay (@mattbay) on CodePen

[mvaneijgen]

18 minutes ago, rubiksx said:

tried doing two timelines, but it wasn't really working

You don't have two timelines you have five! This will be so much easier if you create just one timeline and remove ScrollTrigger for now, the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

I see @Rodrigo already shared my post. It explains how you can stack the cards so that they are at a know position and then animating them will be so much easier. Then adding some other animation to the right will be also a piece of cake. I would really advise you to take a look at that post and see if it helps you restructure your animation.