Umberto Posted June 25, 2023 Share Posted June 25, 2023 Hi, I have a problem with the horizontal scroll when I resize the layout, the width of the panel doesn't adjust to 100%, it stays cut. How can I do? Thanks See the Pen xxQRNVJ by umberto (@umberto) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted June 26, 2023 Solution Share Posted June 26, 2023 That's because you never updated your pinWrapWidth variable when the window resizes. Are you trying to do this?: See the Pen JjeErBw?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Umberto Posted June 27, 2023 Author Share Posted June 27, 2023 This is perfect. One last question: how can I disable horizontal sections on mobile and tablet? Thanks Link to comment Share on other sites More sharing options...
GreenSock Posted June 27, 2023 Share Posted June 27, 2023 Sure, there are many ways to do it. You might want to look into gsap.matchMedia(). Or you could just wrap your logic in something like: if (!ScrollTrigger.isTouch) { // your code here } Good luck! Link to comment Share on other sites More sharing options...
Umberto Posted June 28, 2023 Author Share Posted June 28, 2023 I already tried adding gsap.matchMedia(). , but when I resize it only scrolls the 1st panel/section, while the others remain hidden. I don't know how I can do See the Pen mdQWmwg by umberto (@umberto) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted June 28, 2023 Share Posted June 28, 2023 Hello Umberto, You didn't change your CSS styling in any way, for your layout to adapt to the different behaviour below 800px, so your sections in the horizontal container will still be aligned one beside each other and thus most of them will still be 'hidden' our of view to the right, of course. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries Here's an example; Please keep in mind though, this is just a quick and dirty fork of your pen, to give you an idea, and not intended to be an ideal fit for any case you may encounter, as this isn't really GSAP related but actually more general CSS layout handling. I hope it will help anyway. See the Pen jOQBwra by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
Umberto Posted June 30, 2023 Author Share Posted June 30, 2023 Thank you very mach! Link to comment Share on other sites More sharing options...
Umberto Posted March 8 Author Share Posted March 8 Hi, Sorry if I'm revisiting an old post of mine. I tried inserting images in the section to have the parallax effect. In the first section everything is ok, but from the second onwards a space is created between the images. See the Pen abxdwgN by umberto (@umberto) on CodePen Can I get some help? Thank you Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 8 Share Posted March 8 I've restructured your pen, mainly HTML and CSS what I would do is create an <img> element that is bigger than the current container it is in and then move the element minus on the x axis (I think you want it to move that way right) Always turn on makers so that you can see what it is doing. I've set your start and end marks to be left center and end right center, but be sure to tweak them to your liking. Still the images need to be bigger then how much you want to move them, that is not setup perfectly here. I've also moved the <img> instead of the container. Hope it helps and happy tweening! See the Pen MWRKvry?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
Umberto Posted March 10 Author Share Posted March 10 This work is perfect and I'm working on it. I found a new Horizolthal scroll, where I implemented SrollSmoother, but I have a problem when I widen and narrow the layout: In the first example, without SrollSmoother everything works See the Pen QWPNGLb by umberto (@umberto) on CodePen In the second example, with SrollSmoother, the image pops out of the container See the Pen xxeVRxP by umberto (@umberto) on CodePen The problem is that SrollSmoother doesn't refresh can you help me? Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 10 Share Posted March 10 I don't see any issues in either or the two demo's. But The blue is from the background of the image container right. Just remove all JS logic and try making the image bigger with CSS, so that is always is larger then the container it is in. Link to comment Share on other sites More sharing options...
Umberto Posted March 10 Author Share Posted March 10 ohhhh Sorry my friend, I entered the same code as Codepen. Now everything is correct, you can see the error when you expand and shrink the layout Thanks Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 10 Share Posted March 10 No normal visitor is resizing the browser halfway through browsing a site. That said as soon as you stop resizing ScrollTrigger refreshes it self and everything jumps back to normal. At least I see no issues on my browser with multiple different screen sizes. Link to comment Share on other sites More sharing options...
Umberto Posted March 11 Author Share Posted March 11 Thanks for the reply. I tried various browsers and resizing the layout, the space between the image and the section remains and Scrolltrigger does not refresh. To get everything back to normal I have to refresh the browser. Just to clarify, is the problem Scrollmother not updating when I resize? Thanks for the help Link to comment Share on other sites More sharing options...
Rodrigo Posted March 11 Share Posted March 11 Hi, I've been fiddling with this demo for a bit and resized the window to a bunch of different width/height combinations and I don't see the blue parts anywhere, maybe I'm missing something here but this seems to work as expected 🤷♂️ Happy Tweening! Link to comment Share on other sites More sharing options...
Umberto Posted March 11 Author Share Posted March 11 Ok, look this video: https://webgraphicart.com/video-h.mov Thanks Link to comment Share on other sites More sharing options...
GreenSock Posted March 12 Share Posted March 12 I see what you mean, @Umberto and I'm looking into it. I'll post back when I have answers/suggestions, but it may take some time. Link to comment Share on other sites More sharing options...
Umberto Posted March 12 Author Share Posted March 12 8 hours ago, GreenSock said: I see what you mean, @Umberto and I'm looking into it. I'll post back when I have answers/suggestions, but it may take some time. Of course, work calmly, I'm not in a hurry. The important thing is always to be able to solve the problem Thank you very much, I await with serenity Link to comment Share on other sites More sharing options...
GreenSock Posted March 12 Share Posted March 12 I figured it out. It has to do with the order that things get refreshed. ScrollSmoother forces ScrollTrigger.sort() to get called which orders things by the ScrollTrigger's start value which is a decimal for any ScrollTriggers with containerAnimations. So all you really need to do to fix it in the current version is to explicitly set a lower refreshPriority on the containerAnimation ones: See the Pen JjVKrEO?editors=0010 by GreenSock (@GreenSock) on CodePen (I set refreshPriority: -1) It should be resolved in the next release which you can preview at: https://assets.codepen.io/16327/ScrollTrigger.min.js (you may need to clear your cache) Does that clear things up for you? 1 1 Link to comment Share on other sites More sharing options...
Umberto Posted March 14 Author Share Posted March 14 You did an excellent job, it's what I wanted One last question: with the new version of ScrollTriggrer, I can eliminate refreshPriority: -1, and add invalidateOnRefresh: true? Or should I leave everything as it is? THANKS Link to comment Share on other sites More sharing options...
GreenSock Posted March 14 Share Posted March 14 57 minutes ago, Umberto said: One last question: with the new version of ScrollTriggrer, I can eliminate refreshPriority: -1, and add invalidateOnRefresh: true? Or should I leave everything as it is? It won't hurt anything to leave that in there, and it shouldn't be necessary in future versions. I'd just leave it. I don't think invalidateOnRefresh: true was ever needed in your animation because you don't have any dynamic tweening values anyway. Link to comment Share on other sites More sharing options...
Umberto Posted March 18 Author Share Posted March 18 Ok, thanks for your work 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