trying not to go outside panel

[sunirmalya]

Sorry i am a real noob (this is my first project) but i have been having trouble trying to understand what is going on

i have plagiarized a template that has a menu top left and then home and 5 panels 

My problem is i cant figure out how to keep everything inside a panel especially when i resize the screen .. i am trying to make a website that is very mobile friendly and i have seen that mostly you dont seem to have create 2 lots of code but rather as the window becomes smaller the content still stays within the smaller screen. Mine just move outside

Also i would like to understand what is going wrong with my scrolltrigger. Eventually i would like to fade the pics out as i scroll and fade new pics in but nothing seems to be happening for me to play with..

Last but not least and i know this was somewhere in the tutorials but i cant find it again, i would like this animation to happen every time i go to the page not just when i reload the site..

Sorry so many questions, so little understanding

See the Pen bGMEPOg by sunirmalya (@sunirmalya) on CodePen

[GSAP Helper]

One problem for sure is that you're making one of the common mistakes - nesting multiple ScrollTriggers inside tweens in a timeline. That's logically impossible to have the timeline's playhead control the tween AND the scrollbar's position ALSO control the playhead (they could be going in very different places). 

 

You've got a lot of questions here - why don't you just tackle one at a time? Create one new question in the forums with a VERY simplified demo that only focused on that one thing. For example, if you want things to stay in the viewport when being resized, create a CodePen that just has a couple of colored <div> elements that show what you're trying to do. It's fine if it's broken - you can say "how can I create the red and purple <div> elements inside the viewport at all times?" for example. 

 

Once you get that figured out, we can move to your next challenge. Create a minimal demo that's only focused on that one thing, and post it as a new thread. Fair enough? 

 

By the way, if you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

Don't worry - you can do this. We're here to help with any of your GSAP/ScrollTrigger-specific questions (we just can't provide free consulting for all the other logic, CSS, etc.)  👍

[sunirmalya]

ok thanks will do - appreciate your time