The Old Designer

I thought that's what I did with just CSS as well? If the footer is fixed to the bottom and higher than 100vh (as I think you ,mentioned above) surely you are going to have a problem with the content at the top of the footer being hidden?

You don't actually need GSAP unless you want to animate it, its simple CSS Create a div container for the content and give it a bottom margin of (for example) 230px; then below that add the footer with position of fixed, left: 0, width:100% and a z-index of -10. You can then animate the content div to for example scale downwards a little as it reached the end of the page to create a nice effect

Not sure why the image needs to be position:absolute? Why not just set the image as a background to the .container then use the CSS declaration 'aspect-ratio: ' to keep the image a constant size and then just animate the container?

Not sure if this helps, I too only use FTP. I bundle the JS files locally using ESM so it compiles into 1 minified JS file which I then upload. I tend to do this through Codekit as it saves me a lot of fiddling about.

Cassie has a good explanation here..

Hi Cassie thanks for the response, sorry if I was unclear. The example I was thinking of, basically the same as the gallery example above but each image (maybe 20-30) animating to a state where there are more related images, and formatted text, pretty much like an agency portfolio/case study idea. Yes using Flip as I understand view transitions are a way off, have no desire to use SPA's or a library like Baba unless I have to, and anyway I prefer GreenSock ?

Hi, Just a question on using Flip for this, I have user cases where this could be really useful but... What's the effect on page load/size if you need to add quite a bi of "stuff" to the flipped to state? I am thinking of a couple of images, divs and texts for each element targeted as per the example above. Is this an intended/viable use or are page transitions or even the new view transitions testing in Google Canary / single page applications a better bet? Obviously I would love to use Flip but wondered if you had a clarification or advice please

I think it's important to know how you define "beginner" you are going to need reasonable HTML and CSS skills to create anything you may want to use commercially, plus you are going to have to have a basic (and I mean very basic) understanding of Javascript conventions. I would consider myself pretty bad at the javascript side, I can work out what's happening and even write a little bit, and thanks to lurking here I have incorporated some GSAP into some sites with client feedback that seems to assume I am some sort of genius. ? My advice is to dive in and mess it up as I have done many times, this forum is one of the friendliest tech forums around (and a rarity for it) so help is always at hand.

Not going to be specific because my coding skills leave a lot to be desired by you only need to define the animation once. This may server as a good starting point.. and part of an excellent course I would thoroughly recommend BTW. Coden Snorkel TV

Quick thought (not gasp related) but I would probably look at a 3 divs each containing both the relevent sidebar and the panel. You can then play with positioning, either stacking them on top of each other on the left or side by side. Probably easier to animate that way.

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.