mhkey

Hello Rodrigo, I also did that, as you can read in my first post.

Yes I did. Thats why Ive explained that less or more height breaks the scrolling effect

Hey there, I'm building a website with vertical split screens and full viewport sections. Each section is divided in half where both sides can have overflow content. When theres no overflowing content, the page should scroll to the next section. When theres overflowing content, it first should scroll to the bottom/top and then to the next/previous section. Unfortunately it doesnt work properly in mobile devices with the auto hide adressbar. This breaks the section scrolling and the sections either have a gap (with 100vh) or an overlapping section (with 100%). Even with ignoreMobileResize or normalizeScroll. So the idea is to wrap everything in a parent container with 100% height and set body overflow to hidden - this prevents the animation of the adressbar. But then the animation of window doesnt work.

thanks akapowl! Im very new to gsap and not that experienced with javascript. But with this first project Ive learned really a lot. You guys really do an incredible support!

Hey Jack, sry for open up the topic again. If I resize the main window, the end-function doesnt work. https://codepen.io/mhkey/pen/WNLORPL

Hey Jack, thanks for your support. Your solution works perfect! Amazing!

Hi Rodrigo, thanks for your reply. As I said, I have an Booking Form which is in an iframe. Everytime something changes within this frame, it changes its inline-style height. Right now I have this let height function setHeight() { height = container.clientHeight document.body.style.height = height + "px"; } function contentHeight() { gsap.to(container, { y: () => -(height - document.documentElement.clientHeight), ease: "none", scrollTrigger: { trigger: document.body, start: "top top", end: `${height}px bottom`, scrub: 1.5, invalidateOnRefresh: true } }) } if ( $("#app-booking-container iframe").length ) { let resizeObserver = new ResizeObserver(() => { console.log("Frame was resized"); setTimeout(function() { setHeight(); contentHeight(); ScrollTrigger.refresh(); }, 400); }); resizeObserver.observe(myframe); } Unfortunately the observer fires the functions two or three times. So with markers on, I can see two or three endpoints which breaks the scrolling. In my external booking-form script, the iframe gets build like this: var target = document.getElementById(appId); var appFrame = document.createElement('iframe'); var iframeSrc = appDomain; if(target) { appFrame.setAttribute('src', iframeSrc); appFrame.setAttribute('frameborder', '0'); appFrame.setAttribute('scrolling', 'no'); appFrame.setAttribute('width', '100%'); } target.appendChild(appFrame); function windowScrollTo(frame, scrollTo) { const scrollingElement = document.scrollingElement || document.documentElement scrollingElement.scrollTop = scrollingElement.scrollTop + frame.getBoundingClientRect().top + parseInt(scrollTo) } function handlePostMessage(e) { if (e.origin === appDomain) { var data = JSON.parse(e.data); var frame = document.getElementById(appId).querySelectorAll('iframe')[0]; // Sync App height if(data.hasOwnProperty('appHeight')) { frame.style.height = data['appHeight'] + 'px'; } // handle scrolling if(data.hasOwnProperty('scrollTo')) { windowScrollTo(frame, data['scrollTo']); } // rebuild iframe if(data.hasOwnProperty('reload')) { target.innerHTML = ""; target.appendChild(appFrame); } } } function getUrlVars() { var vars = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars; } window.addEventListener('message', handlePostMessage, false); I also tried to add the refresh() there ('// Sync App height'). But then it refreshes permanently. Im trying to get this done for days, but I guess my knowledge ends here

Hey there, I need to include a booking form in my website, which adds an iframe with dynamic heights. I also want to have a smooth scroll effect for the whole page, so I was happy to have found a nice workaround on codepen: gsap.registerPlugin(ScrollTrigger); const container = document.querySelector("#scroll-container") let height function setHeight() { height = container.clientHeight document.body.style.height = height + "px" } ScrollTrigger.addEventListener("refreshInit", setHeight) // smooth scrolling container gsap.to(container, { y: () => -(height - document.documentElement.clientHeight), ease: "none", scrollTrigger: { trigger: document.body, start: "top top", end: "bottom bottom", scrub: 0.5, invalidateOnRefresh: true } }) While working with the booking system, the iframe dynamically change its heights. So I try to detect those changes like this myframe = $("#app-booking-container iframe")[0]; if ( $("#app-booking-container iframe").length ) { let resizeObserver = new ResizeObserver(() => { ScrollTrigger.addEventListener("refreshInit", setHeight) }); resizeObserver.observe(myframe); } Unfortunately this works only half way. I get strange scroll jumps. I would like to share a codepen but the booking app is live. Is there a way to hide it from the public?