Trouble getting ScrollTrigger and SplitText to run on individual panels on the same page.

[Evoke Canale]

I'm running into an issue where I have panels displaying content that are hidden/shown on click.  On click, the panel content loads and a three functions run, one runs scrolltrigger, one runs splittext and then one that animates the splittext.  When a panel is open and the close button is clicked, all three functions should reset.

 

The two issues that I'm running into are, not having the GSAP functions run properly on the click of the panel and the functions not resetting on the click of the close button.  The codepen contains my efforts so far. 

 

Thank you for any help.

See the Pen zYMePQB by canalecomm_dev (@canalecomm_dev) on CodePen

[Rodrigo]

Hi @Evoke Canale and welcome to the GreenSock forums!

 

Thanks for being a Club GreenSock member and supporting GreenSock!

 

I'm afraid that I'm a bit lost in terms of what the issue is here and your demo is not exactly minimal, actually is far too complicated to follow it since you have over 250 lines of HTML, 900 lines of CSS and over 200 lines of some inline JS script in your HTML tag, plus you're linking to an external CSS file with an extra 900 lines of CSS. That is far too much and we don't have the time resources to comb through all that trying to find problems.

 

There are a few things I was able to notice.

 

Clearing the global timeline is not going to revert the changes made by GSAP, it will only remove the instances you added to it up to that point nothing more. Also it could have some undesired/unexpected outcomes in some situations:

https://greensock.com/docs/v3/GSAP/Timeline/clear()

 

I think is better to use GSAP Context:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Then you are animating your projects elements out and at the same time you are creating the ScrollTrigger and SplitText instances. It might be a good idea to wait for that animation (projects animating out) to be completed in order to create the ScrollTrigger instances. Also it seems that the project details elements have display none at the CSS, be sure to have them in the DOM in order to be sure that the calculations ScrollTrigger does are accurate. You might want to have a look at this in order to know how correctly set your CSS and JS correctly:

Finally your CSS has a bunch of CSS transitions in it, those definitely won't play along with GSAP if they are targeting the same elements and same properties. You should never apply CSS transitions to elements that you're animating with GSAP because when GSAP applies a change, the CSS transition will interrupt that and say "NOPE! I won't allow that to happen yet...I'm gonna drag that change out over the course of my duration..." 

 

Here is a fork of your codepen that shows how to implement GSAP Context. Most definitely is not working as you expect but the main idea is for you to grasp the concept of how GSAP Context works in this cases:

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

 

I strongly recommend you to create a minimal demo with the barebones of your project in terms of HTML/CSS/JS and that clearly illustrates the issue you're having, so we can have a look at it.

 

Hopefully this helps.

Happy Tweening!

[Evoke Canale]

Thank you very much for the help!  I'll make sure the demos are much more minimal in the future. 

 

[Evoke Canale]

@Rodrigo Thank you so much for the updated demo and help.  Using context to revert on close was exactly what was needed.

 

thanks again!