Horizontal scroll resize

[Umberto]

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

[GreenSock]

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

[Umberto]

This is perfect.

 

One last question: how can I disable horizontal sections on mobile and tablet?

Thanks

[GreenSock]

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!

[Umberto]

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

[akapowl]

 

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

 

[Umberto]

Thank you very mach!

[Umberto]

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

[mvaneijgen]

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

[Umberto]

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?

[mvaneijgen]

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. 

[Umberto]

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

[mvaneijgen]

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. 

[Umberto]

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

[Rodrigo]

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!

[Umberto]

Ok, look this video:

 

https://webgraphicart.com/video-h.mov

 

Thanks

[GreenSock]

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. 

[Umberto]

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

[GreenSock]

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? 

[Umberto]

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

[GreenSock]

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. 

[Umberto]

Ok, thanks for your work