Samuele

Hello @akapowl, I beg your pardon to return into this topic but I noticed something strange once resized the screen. Actually this not happen in the codepen but in my website, so I cannot figured out where the bug is. Basically when I click to an anchor link and then resizing the page the screen goes just a little bit further than the initial alignment. I tried this method but nothing occured: function resize() { width = window.innerWidth; height = window.innerHeight; } ScrollTrigger.addEventListener("refreshInit", resize); resize();

There it is, thank you!

Hi again, sorry for bother you but I still have a doubt. Is it possibile to set a scroll animation for the elements inside the sections? I'm trying this method but obviously the page doesn't scroll, any advice? Thanks //text animation gsap.to(".second-slide-text", { scrollTrigger: { scroller: "", trigger: "#third-slide", start: "top 30%", end: "center 15%", scrub: true, toggleActions: "play pause reverse reverse", invalidateOnRefresh: true, markers: true, }, y: -400, opacity: 1 });

What should I say? Thank you both, that's exactly what I was looking for! Nice explanation by the way.

You're right! I'm expecting that the panel will be lined up to the navbar. A perfect scenario is what you've attached above. The panel will scroll and "snap" until it reaches the navbar. If there is not enough space, a good compromise is to scroll the container as far left as possible.

Sure! I just edited my code. So i just keep the ScrollTween part and simplify the style: //horizontal scroll let scrollTween = gsap.to(sections, { x: () => -(scrollContainer.scrollWidth - document.documentElement.clientWidth) + "px", ease: "none", scrollTrigger: { trigger: scrollContainer, invalidateOnRefresh: true, pin: true, scrub: 1, end: () => "+=" + scrollContainer.offsetWidth, }, }); return () => { scrollTween.kill(); drag.kill(); }; https://codepen.io/sml-k/pen/oNGNXRB

Hi there, thanks for your help. As you suggested I'm trying to understand how to calculate the scroll position for the horizontal section. I created a new cpen: https://codepen.io/sml-k/pen/oNGNXRB This is how I declare the horizontal scroll (whereas by drag or scroll): //Scroll and drag ScrollTrigger.matchMedia({ "(min-width: 1080px)": () => { let scrollTween = gsap.to(sections, { x: () => -(scrollContainer.scrollWidth - document.documentElement.clientWidth) + "px", ease: "none", scrollTrigger: { trigger: scrollContainer, invalidateOnRefresh: true, //check pin: true, scrub: 1, end: () => "+=" + scrollContainer.offsetWidth, }, }); var dragRatio = scrollContainer.offsetWidth / (window.innerWidth * (sections.length - 1)); var drag = Draggable.create(".proxy", { trigger: scrollContainer, type: "x", onPress() { this.startScroll = scrollTween.scrollTrigger.scroll(); }, onDrag() { scrollTween.scrollTrigger.scroll( this.startScroll - (this.x - this.startX) * dragRatio ); }, })[0]; return () => { scrollTween.kill(); drag.kill(); }; }, }); I think that the correct process would be define all the anchors, add an addEventListener and then run some function? I didn't quite catch how to create and calculate the section's width and then run a scroll animation, could you help me? (for newby sake)

Hi there! Is it possible to add an anchor menu navigation that linked to the several section of the website? (one / two / three and so on..)? Based on this Codepen: https://codepen.io/GreenSock/pen/YzygYvM I started using the href tag with the "#{namesection}" and addEventListener("click") scrollIntoView() but it didn't work.

Hi there! I saw this website in the showcase section: https://www.davidwilliambaum.com/ I was just wondering what going on there for what concern the images follow mouse and gallery/zoom effect? The result is really smooth! Is there any possibility to reproduce it with GSAP?

Oh I see. Very appreciate thanks!

Hi everyone, I'm trying to set an Horizontal Scroll for the desktop version and a Vertical scroll for the mobile. In order to do that I use the "matchMedia" property in my JS and is pretty cool, but once you resize the screen the scroll is not working as it should. The scroll behavior in the responsive mode works only if the screen is resized. Any thoughts about that? Thanks.

Thank you @Cassie! That's exaclty what I'm looking for

Ok maybe I figured out what is causing trouble. https://codepen.io/sml-k/pen/RwpxPKb This trick works very fine but when I use a margin-top it actually doesn't aligned properly (please see the previous comment). Basically I used margin top in css combined with an opposite transition value in gsap. IE: move "mydiv" of y: 100px, and then in css "mydiv" margin-top: -100px (this allows me to aligned an element in his original position when scrolled)

Yeah I'm uploading my Codepen, but I didn't understand how do I insert a function in order to grab the updated values on resize...

Thanks for the feedback! So to update my value I need to use a function, but would be something like that: ScrollTrigger.refresh(); y: (refresh) => -height / 2.5 (I'm sorry but I will eventually need some lessons of javascript)

That's what I'm trying to resolve. For every images that has a transition effect passed by GSAP, in IOS Safari will be not aligned properly due the browser chrome. (as you can see there is a white space under the bar) I'm looking for a solution like refreshing the animation on window resize or something like that... would be that possibile?

Hi there, You are right! I tried to reproduce what i'm trying to achieve here: https://codepen.io/sml-k/pen/RwpxPKb Basically when I use an Iphone the images are not aligned as they should: https://cdpn.io/sml-k/debug/RwpxPKb/PNkvYXDxRoBA

Hi there! I'm approaching GSAP during these week and I have noticed something odd that affects the layout when the screen is resized (responsive mode) I've already set all the value to percentage in the js file, and so in .vh for the css margin. I think that a solution could be refresh the element position once resized a page Considered all the device (IOS UI bar)