Create Accordion sticky with Scroll

[20ldiego 1 Likes (Newbie)]

Hi master,

I see this page https://www.lifeatspotify.com/
 

and I was wondering if it's possible to replicate an animation as the site shows, specifically with the sections of: Who we are, Where we belong and How we act

I appreciate all the help you can give me..

 

[Cassie 5,164 Likes (Superhero)]

Yes it's possible!

 

You'll need to take a look at ScrollTrigger - specifically pinning. It isn't an 'out of the box' feature though so you will have to write some custom JS and custom CSS to create it.

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Pop back with a minimal demo if you get stuck and need more help. 

 

Good luck and happy tweening!

[20ldiego 1 Likes (Newbie)]

Hi Cassie, tk for your answer.

I don't have idea where I can start, if you can help me I would really appreciate it.

This the pen and I'll work on it

See the Pen OJvpWXP by 20LDiego (@20LDiego) on CodePen

 

Ty for your help

regards

[GSAP Helper 89 Likes (Contributor)]

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 if they'd like - we just want to manage expectations.  

 

I would suggest that you start out by structuring your HTML so that the chunks that you need pinned are each in one element. Currently, you have the tab-header and tab-body all separate as siblings, but you'd need to be able to pin the header and body together, so put them into one element each (a container for each header/body). 

 

Then, I suggest you look at https://greensock.com/st-demos and look for something that is similar to the effect you're trying to create, and then analyze the code and structure to see how it was done so that you can apply your learning to your project. 

 

If you're still stuck after that, post your revised minimal demo here with a GSAP-specific question and we'll do our best to help give you an answer. 

 

Good luck!