Jump to content
Search Community

Create Accordion sticky with Scroll

20ldiego test
Moderator Tag

Recommended Posts

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!

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

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.
×
×
  • Create New...