a bit of scrollTrigger help

[StudioProjects]

Hi Folks

 

What a wonderful thing GSAP is, thank you so much! I was a Flash AS2 developer 11 years ago and used your tween library religiously!

 

I've just finished Carl's wonderful GSAP express course and joined his wonderful Creative Coding Club, I've yet to do his scrollTrigger Express course (i'll start it tomorrow as per my usual Suzuki Method), I threw myself in the deep end and built my first hand coded website in over a decade - my how things have changed! It would appear that the DOM has now caught up with Flash - albeit 10 years later!

 

I have my little recording studio website attempt sitting on my dev server, I can't replicate the issues in CodePen and, to be honest, I don't like it anyway - I'm used to VSCode and Sublime text and a good old fashioned webkit browser. Please refer to www.studioprojects.com.au/dev - hopefully that will give you what you need to help me sort of the mess that I've created! I was feeling rather pleased with myself this morning until I started populating the site with content - such is life

 

The issue that I'm having is as follows - I' currently in Thailand and working on my laptop which only has 1366 x 768 resolution on both the laptop monitor and the AOC USB monitor that I use as a second monitor whilst travelling. What I have built kind of works  (at that resolution), but I can't add any more content to each section than is currently there already (it would appear that I can't have content any more than 200px above the bottom of the browser), it's most probably how I'm pinning things, I'm a little rusty with CSS, but it appears t be OK. When I test it on mobile (both off my dev and using dev tools) it breaks - no surprises given the complexity of what I'm trying to build as a first attempt after being relegated to  WordPress (yuk) for a decade.

 

It's probably something quite simple and I'm sure that I'll feel rather silly - any constructive criticism and advice are more than welcome - it's been a long time since I've tried to build something outside of the considerable constraints of WordPress.

 

Best Regards

 

Andy

[GreenSock]

Hi Andy! Nice to hear from a fellow AS2 developer from back in the day.

 

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? I know you said you were having a hard time reproducing the issue in CodePen, but we just can't effectively troubleshoot a live site. It's VERY time-consuming and I'd guess that in over 90% of cases, the problem ends up having nothing to do with GSAP anyway. 

 

Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[StudioProjects]

Hey Jack!

 

Thanks so much for your response!

 

It would appear that the answer to my question is contained in Carl's ScrollTrigger Express course - I have a lifetime membership so I'll have another crack at it, I've seen some pretty glaring errors already! I try to be as self sufficient as possible and don't want to burden you guys, so I'll have another crack at it and keep you updated on my progress on this thread. I'm battling a nasty dental problem at the moment, so it may take me a couple of days...!

 

Cheers

 

Andy