Toggle action target specific panel

[Ian Robinson]

Been hacking away at this and managed to target each panel as it comes into viewport, but having trouble figuring out how to have the previous panel run reverse animation as the one I'm scrolling into runs regular/forward. Or at the least have the previous animation simply reset so when scrolling back up you can see it happen again. The "best" I've been able to do is make the next panel run reverse along with the previous. Feeling it more has to do with my JS (which is not my strong suit).

See the Pen BamVvNo by ilrobinson (@ilrobinson) on CodePen

[GreenSock]

Hey, @Ian Robinson. I'm having a hard time understanding what you're asking here. I read your post about 5 times.

 

Could you please make a more minimal demo that only has the absolutely essential code to show the particular issue you're asking about? Hopefully that'll be well under the 100+ lines of JS you've got in there now. 

 

Are you trying to make one ScrollTrigger control the animation from a totally different ScrollTrigger? 

[Ian Robinson]

Hi Jack! Sorry about that as I didn't double-check how it looked in the smaller view which made it even more confusing so I trimmed it down in a new pen. I wrote in the JS for it to run the animation of the header and paragraph to animate in when the section is in the viewport. It works fine for the first section (header fades in from side, paragraph from bottom) the first time,  but when you scroll to the next section it doesn't quite work as ultimately I'd like the animation to run in reverse as you're leaving one section while forward in the next section so you see animation regardless of if you're scrolling up or down.

[GreenSock]

Ah, okay. A few notes:

1. There's no such thing as an "ease" in ScrollTrigger, so there's no point in setting the default to "expo.out(1.7)"
2. You've got a ".textbox" animation, but there's no such element. Same for "#vert-logo"
3. You're looping through each section and creating a tween of ALL "h2" and "p" elements on the entire page for EACH section. So, for example, if you've got 4 sections, you'll have 4 different timelines that are trying to animate ALL those same elements each time a section enters. That's your main problem. Just use querySelector() on your section element instead: 

   // BAD
   tl.to("h2", {...});
                
   // GOOD
   tl.to(section.querySelector("h2"), {...});

    

4. You're looping through anything with a "panel" class, but you've got a nested element inside the "about" panel that has a "panel" class too, so that's pretty funky. I assume that was an error in your markup.

So I assume this is more of what you wanted?

 

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

[Ian Robinson]

Yes! Thank you Jack. I had hastily stripped out much of the code to give you a basic idea of what I was trying to figure out which is why some of the items are funky or non-existent, but appreciate it!