Jump to content


Create Accordion sticky with Scroll

Moderator Tag

Recommended Posts

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..


Link to comment
Share on other sites

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.



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


Good luck and happy tweening!

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

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


Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.