RawrBear

Wow... Thank you so much! I now get what is going on! You guys are awesome! No doubt I will be back again with more questions later lol. Have a great weekend!

Hey all! I've been using GSAP on and off for quite while, and I thought I understood it well enough to do what I want but.. I guess not. This was originally in a Nextjs app and I though Next was causing the problem so I broke it out into vanilla, but I'm still getting this weirdness happening. If you look at the pen, you'll see "IMAGE<number>" scrolling in each section (not always in the same place but that's because I'm tired and don;t want to fix the alignment of the flex lol). My goal here is to have a horizontal scroll section (which is working currently) and in each panel, have an info section and an image slideshow. I've been hacking on this for a couple of weeks and no matter what I do, I can't get it to work. Today, I found a pen (and video) by Gary Simon, and a pen (and video) by Snorkl TV. They both have what I want so I figured I'd bolt them together and use that as a jumping off point to reach the end goal. Gary's Code: https://codepen.io/designcourse/pen/gOjZKOO Snokl's Code: https://codepen.io/snorkltv/pen/ExVEOPa The problem is the "IMAGE" section is not firing properly. It works for the very first "change" and then you get this huge blank spot. Sometimes they fire off at almost the same time, sometimes they don't fire at all. I can't upload the Nextjs problem or code because its huge and a mess but it's doing pretty much the same thing as this vanilla example. I'm pretty sure something is screwed up between ScrollTrigger and the staggers but I don't know what that is. What am I missing? Any help is greatly appreciated! P.S Please explain it like I'm 5, my brain hurts lol P.P.S Codepen seems to me screwing up the layout and pushing everything to the bottom.. Hopefully you can see the demo, if not, I'll see if I can fix the pen. Cheers!

@chacrasoftware Thank you for posting a fix! This worked for me!

@Lamonier I'm almost done with it. TypeScript has been a huge pain in the butt so it slowed me up a ton trying to fix the errors. I'm working on a slider thing right now, then I'll add some animations on the other pages and it will be ready to go live. (then I'll be bugging you to test it and make suggestions lol) Trying to make a slider with GSAP in Nextjs13, pulling the image src from a prop containing a list, is a lot more work than I expected ? I've always got ideas bigger than my skills but that's what makes me improve I guess @MichaelVazquez I'm always looking for good companies to work for but they're hard to find. If you're not picky, put together a beefy portfolio like Lamonier said, and join the big job sites. Every time something comes along that has some of your skill set, apply for it. Seems to be a game of "beat the algorithm" these days. I wish you luck!

@Lamonier Absolutely! I'd love to see the parts you used to make up your site. I used a bunch of similar sites to get inspiration for my portfolio design, which I'm trying to code up. Trying to get React (or in my case, Nextjs) to work well with GSAP is a nightmare. The "context" addition helps with some of the pain points but React is still painful to animate. You did an awesome job!

@Lamonier Congrats on the J.O.B! That's awesome! I opened that link expecting a disaster with random animations and all kinds of craziness but what you have built is epic! I'm currently re-building my portfolio and messing with some GSAP animations.. I can only hope my results look as cool as yours Good luck on the new chapter! ?

I REALLY appreciate that you supplied a working follow up! I've been having issues getting GSAP and React/Nextjs to play nice and your code really helped! Between your code and the other posts on here from the awesome people, I finally have a very bad looking but functional animation! Thank you, bro!

Hey OSUblake! Thanks for the info and link. My JS skills are not up to scratch to be honest so that hasn't crossed my path before. Now I know I need to go learn some more lol. GSAP is a beast of the plugin! I'm looking forward to using it more and hanging out here on the forums. Thanks for all the help

Hey Jack!! Thank you so much for this, it's exactly what I need. Looking at your code it seems I wasn't as close as I thought. If there's a way to set the menu to be hidden from the start without using Tailwind, I'm all for it! I'm still learning the ways I can use GSAP so if you have more examples, I'd love to see them so I can learn more. Could you explain what "isHidden ? 0 : 1," is, please? I'm guessing its like an IF statement with 0 : 1 being the boolean states? Thank you again for the code, you guys rock

Hey guys, I've been messing with GSAP for a while but I still don't really understand all the bells and whistles.. Yeah, that's why I'm turning to you guys. I feel like I have all the pieces between the docs and some tutorials I've seen but I just can't bolt them together into something that works. So, I'm trying to make a simple mobile nav that that shows when a button is clicked. This project is also using Tailwindcss which isn't making my life any easier right now. I have been trying to figure this out all day but after 6 re-writes of the idea, I can't get it working. I want to animate the opening, either by a simple opacity (like the demo should be doing) or sliding down from above. I think I understand how to animate things but the problem is toggling the "display: none" (class of 'hidden' in Tailwind) at the right time. It should be hidden by default, unhide, animate and display until either a link is clicked or the user clicks out of the menu. Then is should reverse the animation and the hide should then happen AFTER the animation ends. I can toggle the hidden class easily but.. How do you do it when you need it hidden at the start and then stay showing until the reverse of the animation happens? I've tried writing my own kind of toggle, I've tried using callbacks.. I've now worked myself into a corner because I have no idea where I'm at. Hopefully you guys can show me how this is supposed to be done. Thanks for making this awesome tool for noobs like me to tinker with lol EDIT: I've tried a few more things which still don't work. I've added the code to the CodePen and commented it out. If you can tell me where I' going wrong here, I'd greatly appreciate it