The Old Designer

You can also look into CSS filters https://www.w3schools.com/cssref/css3_pr_filter.php Trust me we all start somewhere and when I see some of the code solutions here seemingly just added off the top of the head I despair I will ever get that good.. still keep trying, I do!

You can also try this CSS "solution" body { min-height: 100vh; /* mobile viewport bug fix */ min-height: -webkit-fill-available; }

You can do a fair bit to the scrollbar with CSS as well https://css-tricks.com/the-current-state-of-styling-scrollbars-in-css/ Whoops sorry just noticed someone beat me to it..

One answer would be not to use GSAP or JS in general given your circumstances. Yes I know it's a GSAP forum but why are you knocking yourself out attempting to offer something you can not really do? No shame in that, I am far from a JS expert, not bad at CSS and HTML but would not consider myself a guru at anything. Sell yourself and sell to your strengths, it far easier and far more rewarding. I also work with clients with limited budgets or who have some hanger on willing to make things for nothing. That's fine, the clients that take that advice are not for you, competing with an omnipresent relative picking away all the time is always going to be a loosing proposition. If your strengths are marketing then sell the marketing benefits of having the website and just learn or use something like Wordpress with its myriad of themes and plugins to suit most situations. (Disclaimer I do not like WP, rarely use it but do understand why people do). I am really not sure from what you said why you are knocking yourself out trying to fit a square peg (you) into a round hole (js based animation) as you said yourself you really have very little interest in it. This is not meant as a criticism, we probably skill wise have a fair bit in common, the main difference is I can understand the GSAP basics and most importantly enjoy working with it even with my limited skills.

As someone with very limited JS skills I would thoroughly recommend Carl's course above. I had used animation in Flash before so had some idea of when to use it (sparingly). I guess I am lucky in that my clients tend to trust me to do the "right" thing. I usually just use previous work as an example of what can be done but a lot IMO comes down to the client believing in you and your ability to get it right for them. Never add things just to prove how clever you are, add things that bring real value to the client, tangible or otherwise and be prepared to explain why which is often more powerful than the details of what.

OK you need to do a lot of changes, this is not basically a Greenock issue but a combination of HTML, CSS and JS "issues" Firstly the HTML you should use <div class=" col-sm"> not <div class=" col"> as per the docs https://getbootstrap.com/docs/4.0/layout/grid/ to get a flexible grid that stacks. Next CSS .my-boxes should only have the display:flex class applied on sizes above phone ie 800px only, otherwise leave it as Bootstrap sets it. Lastly the JS needs a rewrite. console.clear(); // Start with a clean console on refesh gsap.registerPlugin(ScrollTrigger); let mm = gsap.matchMedia(); const imageSection = document.querySelector(".main-editions"); const container = document.querySelector(".container-main"); mm.add("(min-width: 800px)", () => { const timeline = gsap.timeline({ scrollTrigger: { trigger: '.container', pin: true, scrub: true, markers:true, // end: () => "+=" + (imageSection.scrollWidth - document.documentElement.clientWidth), // invalidateOnRefresh: true } }) timeline.from('.my-boxes', { xPercent: 100, ease: "none", }); }); I tested this quickly by playing around with your codepen and it seemed to work, if nothing else it will give you something to move forward from. Disclaimer I don't use Bootstrap, and the JS change was a quick and dirty copy and paste, likely a lot could be improved.

Here's the docs, https://greensock.com/docs/v3/GSAP/gsap.matchMedia() It's pretty easy (it must be if I can use it) just wrap the sideways scroll within the function so it only fires if the screen is over a certain size.. Taken for the docs.. let mm = gsap.matchMedia(); mm.add("(min-width: 800px)", () => { // desktop setup code here... }); mm.add("(max-width: 799px)", () => { // mobile setup code here... });

One option is to use the GSAP matchMedia() function and turn off horizontal scrolling on mobile (which may be best anyway)

First guess your using the bootstrap container element which like the Zurb Foundation one restricts the width of the content within it so if your trying to scroll the "col-3" boxes its unlikely that will just hit the width of the container and therefore not work. Lo0king at the bootstrap documentation https://getbootstrap.com/docs/5.0/layout/containers/ you may have a problem. I do not use bootstrap but certainly in foundation you can just remove the .container element although bootstrap seems to require it.

All seems OK for me on Safari 16 in the demo, I also checked a couple of sites I had built using it and no issues.. using a 2018 MacBook Pro and an external apple trackpad if that's relevant.

import ScrollTrigger from 'gsap/ScrollTrigger' You missed a semi colon ; ? --- and on the first line

Very new here so may be completely wrong but have you tried ScrollTrigger.batch

Can you use this for the parent element? display: flex; /* equal height of the children */

Just to echo everyone else, yes an inspiring post. As another older person (seriously really old), and coming from an HTML/CSS coding background I was worried about asking a dumb question as my JS knowledge is limited. Finally plucked up the courage partially thanks to this post and I am glad I did. Keep up the good work everyone, this forum is a testament to what the internet should be and so often isn't.

Thank you, much appreciated that works perfectly. Not easy to make the first post on a dev forum and thank you for the welcoming vibe there is here.

Firstly new poster and more a css/html person so I maybe being stupid here.. I have tried the codepen included which works fine... until the page is more than 100vh; Am I missing something really simple? Sorry I just realised I should have provided an explanation, the mouse follower seems to dive down the page when scrolling past the page fold and appears again when above it..