Jump to content
Search Community

Accordion with First and Last item expanded

itsmidhun test
Moderator Tag

Recommended Posts

Hello,

I am new to GSAP, i have made an accordion referring some codes and currently stuck on some scenarios. 
1. The first and last items on the accordion should be  expanded
2. The first item head should be out from viewport after the third item head is stacked

and also if it is possible please give a solution to replace the down icon to a text button when the accordion is expanded

 

Thanks in advance

See the Pen ExLmLjj by itsmidhun (@itsmidhun) on CodePen

Link to comment
Share on other sites

Hi there, welcome to the forums!

 

We love helping people learn, get unstuck or understand the tools more deeply in these forums, but we're mainly staffed by volunteers and don't have the resources to build out solutions based on lists of requirements.

Here are some tips to set you off in the right direction - feel free to pop back as you figure it out if you have any questions about the API or how GSAP works...

  • At the moment your solution is using staggers. Staggers are great for concise code but it sounds like you need a bit more control and flexibility. I'd suggest taking a lot at timelines instead.
  • Start by creating the animation timeline you're after without scrollTrigger. Get the timing and animation looking right first, don't worry about writing repetitive code for now, add a tween for each animation if that makes sense to you. You can always refactor it to staggers or use a loop after you get it working.
  • When your timeline is working, go ahead and add scrollTrigger. Now you can think about trigger positions and speed, how you want the animation to relate to the scroll.

Hope this helps, give it a go - the best way to learn is by taking a series of challenges (like you have) and working them out one by one.

 

  • Like 1
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...