Accordion style pined headings

[Sundararajan KS]

Hello,

I am brand new to GSAP (started yesterday) and I am trying to create an animation/scroll trigger like on this website https://www.bertani.net/style/ from the section "Bertani styles" in my current project. The closest I could find is this -  , but this is not same as on the above reference site.

 

Here, the heading is pinned on scrolled and on further scroll the image is also pinned and the next heading scrolls up as a layer and the image is pinned again and on scroll the next heading with image shows up as a layer and so on.

 

Can anyone help me here please?

 

See the Pen gOWVvzy by sundararajanks (@sundararajanks) on CodePen

[akapowl]

 

Hey @Sundararajan KS - welcome to the forum.

 

If you want the headings to each be visible but their content collapsed (except for the first one) like on the website you linked to, you will likely have to do some tweening on their height on scroll, simply just pinning won't be enough here.

 

For that I would probably first set things up via CSS, so the first item appears to be open with the other panels having a height of 100px e.g. respective to the height of the headline I set in the demo below - and calc the height for the first (open) item, so everything fits into 100vh.

 

With ScrollTrigger I would then pin a surrounding container once instead of each item seperately and via a scrubbing timeline with tweens on the height of the respective items, spaced out along the timeline via the position parameter, you could then achieve that accordeon like effect.

 

Maybe something like this - please note that this is not supposed to be undestood as the definitive way to go with this, but just as an example of an approach. Hope it helps though.

 

See the Pen 73791fb5b4eb4c770e8c33667584c37b by akapowl (@akapowl) on CodePen

 

 

[Thomas Günther]

Not as fast as the superhero @akapowl but I created a scroll-controlled accordion for you too: 

See the Pen YzVmvzY by medienbaecker (@medienbaecker) on CodePen

[akapowl]

😀 We can all be heroes, @Thomas Günther 💪

 

I tried sticking to the concept of that website with my example - yours is so much more versatile.

 

Awesome job, thanks for sharing  

[Sundararajan KS]

Thank you @akapowl and @Thomas Günther, you guys made my day  

[Sundararajan KS]

Hi @akapowl, @Thomas Günther - is it possible to keep the accordions open by default when scrolling down and closed by default when scrolling up?

I tried to remove/set the height (100vh) in the css, but it is giving a huge space at the bottom

[akapowl]

In my example you could add another tween on the last visible item's height, and to prevent the white space showing (which is the pin-spacer's background showing, I suppose) you could e.g. set the subsequent content up by tweaking its marginTop with a negative amount respective to the space neccessary to cover up that white space. In addition you would of course also have to tweak the duration of the pinning scrollTrigger.

 

The tweaking of the latter was just trial and error for me now as I'm a bit in a hurry, so I can not give you a proper explanation on those numbers used; meaning: if you wanted to adjust the number of items/tweens in that example, you would have to give some thought about the values yourself.

 

This here seems to be working fine for now though:

 

See the Pen 6724603a9d1d4d0a6a216fee1bdee0ef by akapowl (@akapowl) on CodePen

 

 

[Sundararajan KS]

I am using Thomas's script because the number of accordions are dynamic in my case and there can by any text/image before and after the accordion.

 

I tried to add height/margin-top as you suggested after the last item, but it does not seem to make any difference

 

[Cassie]

Hey Sundararajan

I've simplified down @Thomas Günther's example for you.

(Not that it needed changing, it's great - but as you're new to GSAP I thought it might help to *just* focus on the bare bones of the interaction you're trying to get working)

 

I see you picked up on Thomas's pattern of adding a timeline to the drawer object drawer.tl.to - and I just wanted to point out that you don't have to do that for every timeline. You won't find that pattern anywhere in the docs, so it could lead to confusion.

You wrote...
 

const drawer_last = document.querySelector(".drawer_content_last");

drawer_last.tl = gsap.timeline({
  scrollTrigger: {
    scrub: 1,
  }
});


drawer_last.tl.to(drawer_last, {
  height: "auto",
  autoAlpha: 1
});

// this would usually be written like...

let drawerTl = gsap.timeline({
  scrollTrigger: {
    scrub: 1,
  }
});

drawerTl.to('.drawer_last', {
  height: "auto",
  autoAlpha: 1
});

Here's a simplified codepen with the drawers open first and closing on scroll, and markers to show you what's happening. It's always handy to start small and layer up as you understand what's going on or things can get knotty really quickly!

Does this help?

See the Pen yLXLBpL?editors=0010 by GreenSock (@GreenSock) on CodePen

[Sundararajan KS]

Hi @Cassie, thanks for the script, but the only problem I am not able to resolve here is the extra space between the last drawer and the dummy content paragraph. Is there a possibility to reduce/reset the height after all the timeline is completed?

[Cassie]

Are you looking for pinSpacing:false ?

Make sure to check out the docs - a lot of the answers can be found in there!

 

pinSpacing

Boolean | String - By default, padding will be added to the bottom (or right for horizontal: true) to push other elements down so that when the pinned element gets unpinned, the following content catches up perfectly. Otherwise, things may scroll UNDER the pinned element. You can tell ScrollTrigger not to add any padding by setting pinSpacing: false. If you'd rather it use margin instead of padding, you can set pinSpacing: "margin". Note: pinSpacing works in most cases, but it really depends on the way you set up your DOM and CSS. For example, if you pin something in a parent that has display: flex or position: absolute, the extra padding won't push other elements down/right so you may need to manually space things out. pinSpacing is just a convenience that works in most situations.

[Sundararajan KS]

I already tried pinSpacing with various options, does not seem to work

[Cassie]

You can also set the height of the accordion to auto with an !important flag. It's a bit hacky though.

See the Pen abwbvwY?editors=0110 by GreenSock (@GreenSock) on CodePen

The strength of scrollTrigger is that its very flexible - but there's not going to be a 'one-size-fits-all' solution.

There are a lot of pens in this thread that will get you most of the way - but some CSS tweaks and logic tweaks will be needed to perfect it.

I'm sure akapowl is working on a great solution as we speak, but it's a bit beyond the scope of these forums to provide completely perfected solutions for people. We're here to help get you set on the right path and answer GSAP-specific questions.

[mikel]

Hey,

 

You could possibly try this variant

 

// Pin the accordion and move space
gsap.timeline({
  scrollTrigger: {
    trigger: ".accordion",
    pin: true,
    start: "top top",
    end: "bottom bottom",
    endTrigger: "body",
    scrub:0.5,
    invalidateOnRefresh: true,
    markers: true
  }
})
  .to('.space02', {marginTop:-320, duration:1, ease:'none'})

 

Does that help?

 

Happy tweening ...

Mikel

[akapowl]

1 hour ago, Cassie said:

I'm sure akapowl is working on a great solution as we speak

 

I was working on something but it turned out not to be working in the end, so I actually don't have a solution, sorry.

[Cassie]

No need to apologise! The solutions provided so far are great.

[Sijo]

I am working on a landing page using HTML, CSS & JS. It's almost completed but I'm stuck in one of the part. I have an accordion in which there are 4 sections that need to be handled using the scroll of page. I have got the solution from the GSAP forum but it is created on the black page. Whereas in my case I am creating my accordion above the footer section and I don't know how to handle it. I'm new to GSAP. I have searched entire web to get it work but failed. don't know how to handle the accordion in the middle of the page. Please, help me out. The image is the accordion design which I'm working on. During the initial load of the page, the first accordion should always be open and as I scroll the 1st one gets closed and the second on gets open and so on. Again when I scroll back the same should happen and 1st accordion should always be open when i scroll up. How to achieve this using GSAP?

[GSAP Helper]

Hi @Sijo and welcome to the GSAP Forums!

 

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

 

Finally maybe these demos can provide some inspiration:

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

 

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

[Sijo]

Thank you helping... The above code is working good but the only issue i am facing is that the background image or color is set to 100vh and when i scroll down to make the accordion work... it is working good though but when set the background color to 100vh and when i scroll down the accordion getting outside the div which i set to 100vh. The accordion and every operation of it's closing and opening should happen inside that 100vh. Is it possible?

[Sijo]

2 minutes ago, Sijo said:

Thank you for your help... The above code is working good but the only issue i am facing is that the background image or color is set to 100vh and when i scroll down to make the accordion work... it is working good though but when set the background color to 100vh and when i scroll down the accordion getting outside the div which i set to 100vh. The accordion and every operation of it's closing and opening should happen inside that 100vh. Is it possible? See... the blue background is 100vh and when i scroll down the accordion is working good but it is getting out of that div which is 100vh.

 

[Rodrigo]

Yeah those demos are only to show how that can be achieved, but specific styling is something you should sort out based on the needs you have.

 

If you keep having issues, remember to include a minimal demo that clearly illustrates the problem you're facing.

 

Happy Tweening!