jillianadriana

I've got a site nearly ready to go live but I'm having a couple random issues and I can't quite tell if they are purely GSAP-related or just pure JS incompetence. If someone can take a look and shed some light on which direction for me to take in terms of troubleshooting, I would really appreciate it. Problem #1: The menubar layout seems to be messed up on the blog index and blog archive pages, and it won't open. I see that the console is giving me a TypeError but I don't know why it's happening or how to fix it. I can also see that somehow some of the menu divs on those templates aren't in the correct places. The div setup is supposed to be: [left div] [middle div > logo] [right div > menu overlay divs] Problem #2: I've added a Swiper slider to my blog posts. It's conditional and should only appear if the ACF fields I created for it aren't empty. But the page doesn't scroll down all the way. If I inspect the page, it seems to fix itself, but that doesn't help me when I try to troubleshoot. I'm also seeing several "GSAP target null not found" errors throughout the site and I can't pinpoint where they are. I'll peruse the Googles for a JS forum to post in as well, since I'm not sure if the error is in my GSAP code or somewhere else. Thanks in advance!

That makes total sense and as someone with an inbox full of unopened emails, I appreciate that. I would certainly appreciate a notification for patches, but I understand that's a whole new SOP for your team and can be time consuming. I will try to be more diligent in checking.

Thank you for that explanation! That's kind of what I've been doing all weekend. I didn't actually realize there was another update to GSAP. Is there a way for me to be notified when it is? Maybe I'm just missing it somewhere.

Oh, it's just that bottom section of the page, above the footer. Sorry if I am misunderstanding what you mean. The issue is that my CodePen works properly but the code doesn't appear to work on my actual site.

Oh! I mean, it's not actually live. Last week Cassie helped me with the header/menu. I will keep playing, I guess. Oh, duh. Thanks!

Hey friends, I have an animation/ScrollTrigger setup that I've designed and it works as it should in CodePen without ScrollSmoother added. https://codepen.io/jillianadriana/pen/MWQYwJP But it doesn't seem to be working with ScrollSmoother. And then in my actual development environment, the code just doesn't work as it should. The only way I can even get the animation to play is to scroll back up and scroll back down ? What am I doing wrong, here? I've been trying to figure it out for 3 days.

THANK YOU! I could've spent days trying to figure this out.

Here is a minimal demo https://codepen.io/jillianadriana/pen/dyJxWae

@Cassie That code definitely prevents the scroll from happening but it seems to break the actual header animation. You can take a look on the test page again: https://mattiejames.flywheelstaging.com/test-page/

Hey GSAP friends, I recently found this handy post/CodePen by @mikel , which was exactly the solution I needed. I have a header with 2 parts -- the top bar has social media and some other links -- and then the bottom part is the header where the logo sits, as well as the menu and I'm going to put a search box in the far left. On scroll down, I want to hide the bottom part of the header but keep the top part sticky. I had tried using headroom.js but I couldn't figure out how to get the top bar to remain sticky. I also do prefer to use GSAP where possible because it gives me so much more control. My issue is that when my menu opens, there's a bit of extra room to scroll down because the GSAP pushes the menu up, and I don't know how to fix it. Here's a test page with 200vh of empty space so you can see what I mean. Sidenote: I don't know why the logo isn't sitting properly in the header. It was working fine and then suddenly it shifted and I haven't been able to pinpoint the issue there, so if you happen to notice what's going on there, any help would be appreciated, but since I feel like it's a CSS thing, my biggest concern is the GSAP stuff.

I knew it was an easy fix. I thought I had tried facts but I guess not. Thank you, both!

Hey folks, I am trying to create a SplitText that plays on each iteration of the indicated class. I have done this before but for some reason it just isn't working. I've looked at and tried tons of code from various examples but I just can't make it work. What am I doing wrong?

Thank you for explaining this! It's working now.

Would it be better to use pinning instead of a fixed CSS property?

You read my mind because I posted the link at the same time you that you responded! See above.