S3BASTIAN Posted April 6, 2023 Share Posted April 6, 2023 Hi everyone! Thanks in advance for your help. I've read lots of examples and videos but I guess I'm not understanding the main concept of something here. I want to have this carrousel spin as it is, but it happens way too fast, it does not let you see each slide properly. In every example I saw, each "slide"covers the whole view area, but I want to maintain this small slides, and I want to leave the section below it (the footer) attached below it (guess that with pinSpacing: true may help... don't know really. I would like to have the horizontal scroll pinned in place until you reach the last slide, so I can have time to read each one. MAYBE watching this codepen example in full screen show better the problem Again, many thanks for your help! Sebastian See the Pen vYVYWPB by soporo123 (@soporo123) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted April 7, 2023 Solution Share Posted April 7, 2023 Hi @S3BASTIAN welcome to the forum! Indeed it is a bit weird to wrap your head around. Normally in GSAP things work based on durations, but with ScrollTrigger that all gets thrown out the window (not really it still matters if you have multiple animations), but in ScrollTrigger the whole animation gets played over the scroll distance you've set. Now was your scroll distance not that big. You'd it set to start at the top of .hscroll and and 90% of its height, which was around 100px and in that space you move the container 3000px, which as you figured out is really fast! So what if we set the scroll distance to be also 3000px? Much slower right? See the Pen gOBOyar?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen But now we have weird gaps in our work, it would be better if we could pin everything in place and then move the element, so why not do that? Pin can be true, or it can be an element (see the docs for more info ScrollTrigger docs). So what if we wrap your whole page in an element called .pinMe and set that as the pin. An other option would be to wrap the .hscroll element and the footer in an element called .pinMe and have the header do scroll away and only keep the element and the footer on screen, but I'll leave that to you. Hope it helps and happy tweening! See the Pen mdzdgrV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 5 Link to comment Share on other sites More sharing options...
S3BASTIAN Posted April 10, 2023 Author Share Posted April 10, 2023 Dear @mvaneijgen thanks for your help and clear explanation!! Yes, I saw the first demo that it left some weird spaces on top and botton of the carousel that in a website made it look weird and had no clue how to solve it! Thanks again for your time and help. Have a great week, Sebastian 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now