scrolltrigger How to create accordion with click and scrolltrigger

[Gravitas]

Hi there,

 

I'm working on creating an accordion that should function with both scrollTrigger and click functionality. I've attached an example that expands the accordion on scroll, but I'm unsure how to implement the click functionality to open it as well.

 

Let me know if you can provide any help!
Thanks

See the Pen jOZezwa by supah (@supah) on CodePen

[mvaneijgen]

Hi @Gravitas welcome to the forum and thanks for being a club member! 

 

I've installed the ScrollTo plugin and add some labels to your timeline and then we can use .labelToScroll() ( https://gsap.com/docs/v3/Plugins/ScrollTrigger/labelToScroll()/) to tell it to scroll to that point in the timeline, you of course want to tweak the timings a bit, but hope this illustrates a solution. Hope it helps and happy tweening!  

 

See the Pen KKELYqY?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Gravitas]

On 2/23/2024 at 1:14 AM, mvaneijgen said:

Hi @Gravitas welcome to the forum and thanks for being a club member! 

 

I've installed the ScrollTo plugin and add some labels to your timeline and then we can use .labelToScroll() ( https://gsap.com/docs/v3/Plugins/ScrollTrigger/labelToScroll()/) to tell it to scroll to that point in the timeline, you of course want to tweak the timings a bit, but hope this illustrates a solution. Hope it helps and happy tweening!  

 

 

 

Thanks mvaneijgen
but I want to create the according which can be opened by clicking the specific element and on scrolling as well

[mvaneijgen]

2 minutes ago, Gravitas said:

but I want to create the according which can be opened by clicking the specific element and on scrolling as well

Can you maybe explain what the elements are doing now and what you want them to do instead? 

 

To me the demo seems to do exactly want you want them to do, but I might be missing something. 

[Gravitas]

On 2/26/2024 at 2:20 PM, mvaneijgen said:

Can you maybe explain what the elements are doing now and what you want them to do instead? 

 

To me the demo seems to do exactly want you want them to do, but I might be missing something. 

 

 

Here is the reference site https://runway.com. I want to create an accordion that works both on click and scroll. For example, if I click on the third accordion item, only the third accordion item should be opened.

[mvaneijgen]

41 minutes ago, Gravitas said:

Here is the reference site https://runway.com. I want to create an accordion that works both on click and scroll. For example, if I click on the third accordion item, only the third accordion item should be opened.

A I see now, but the you've animation build doesn't do that, so there is no amount of ScrollTrigger code that is going to fix that animation. So before figuring that all out you have to create the animation first, so for now I would forget all the scrolling and clicking and build the animation you want to happen (on scroll). I've written a guide how you can go about creating a card stacking animation and the last example already has some effects you'll also want to use. It uses clip-path to mask and show content. 

 

 

This is going to be fairly complex to build, so I would focus on one part of a time and start with just the animation, leave ScrollTrigger and click functions out of it, when you have that tackled the rest will be a lot easier to implement.

 

Good luck and happy tweening. If you get stuck just post back here with the current question you have and someone will be sure to point you in the right direction. 

 

See the Pen gOEYewo by mvaneijgen (@mvaneijgen) on CodePen

[Rodrigo]

Hi,

 

Maybe this demo can provide a good starting point:

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

 

Happy Tweening!