pgobin/adjust landing page animations#135
Conversation
…nel Header and Content animation triggers
uellenberg
left a comment
uellenberg
left a comment
There was a problem hiding this comment.
Looks good, but IDs need to be unique. I've marked out some of the places where they conflict, but not all of them.
| {/* UWBHacks About Container */} | ||
| <Panel | ||
| className={`${panelMargin} aboutSectionContainer`} | ||
| id="aboutPanel" |
| > | ||
| {/* UWBHacks About Section Header */} | ||
| <PanelHeader | ||
| id="aboutPanel" |
| {/* UWBHacks About Section Content */} | ||
| <PanelContent className="z-[5] flex flex-col md:flex-row justify-center items-center gap-x-8 gap-y-4 overflow-hidden"> | ||
| <PanelContent | ||
| id="aboutPanel" |
|
|
||
| {/* UWB ACM Description Container */} | ||
| <Panel | ||
| id="uwbacmDescriptionPanel" |
| {/* Previous UWBHacks Fun Statistics Container */} | ||
| <Panel className={`w-full border-none ${panelMargin}`}> | ||
| <Panel | ||
| id="funFactsPanel" |
| <div className={`w-full grid md:grid-cols-2 gap-8 ${panelMargin}`}> | ||
| {/* Month of Hacking */} | ||
| <Panel | ||
| id="monthOfHackingPanel" |
| > | ||
| <PanelHeader as="h2">Month of Hacking</PanelHeader> | ||
| <PanelContent> | ||
| <PanelHeader id="monthOfHackingPanel" as="h2"> |
| <PanelHeader id="monthOfHackingPanel" as="h2"> | ||
| Month of Hacking | ||
| </PanelHeader> | ||
| <PanelContent id="monthOfHackingPanel"> |
| > | ||
| <PanelHeader as="h2">Last Year's Projects</PanelHeader> | ||
| <PanelContent className="h-full flex flex-col justify-around gap-y-4"> | ||
| <PanelHeader id="lastYearsWinnersPanel" as="h2"> |
| Last Year's Projects | ||
| </PanelHeader> | ||
| <PanelContent | ||
| id="lastYearsWinnersPanel" |
|
Not sure if there was an easier way to go about doing this, but I passed in an "id" as a prop to several Panel Header and Panel Content components so they would have a reference to their Parent Panel component (of which the id is assigned to). I use this parentPanelId in both of the components files as a trigger for their respective animations. Doing this allows for more reliable animation timing as the animation triggers for both the Panel Header and Content are located in the same location. As a reference, the animation code I pushed onto main, at times, resulted in the trigger for the Panel Content to be triggered before the trigger for the Panel Header (such as in the image below) |
|
That makes a lot more sense, I misread the original code. Having them be |
…tions pgobin/adjust landing page animations
3 participants
No description provided.