ScrollTrigger smooth scrolling iframe

[mhkey]

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?

[Rodrigo]

Hi @mhkey and welcome to the GreenSock forums!

 

I'm not 100% sure I follow exactly what you're trying to do here, but it definitely looks like an issue to add an event listener to ScrollTrigger every time the iframe size changes.

 

Instead of adding an event listener to the refresh init, something you already did somewhere else in your code, simply call ScrollTrigger.refresh() in your resize observer's callback:

myframe = $("#app-booking-container iframe")[0];
		
if ( $("#app-booking-container iframe").length ) {
	let resizeObserver = new ResizeObserver(() => {
        ScrollTrigger.refresh();
    });
	resizeObserver.observe(myframe);
}

Even further you could call the setHeight method before refreshing ScrollTrigger:

myframe = $("#app-booking-container iframe")[0];
		
if ( $("#app-booking-container iframe").length ) {
	let resizeObserver = new ResizeObserver(() => {
        setHeight();
        ScrollTrigger.refresh();
    });
	resizeObserver.observe(myframe);
}

Unfortunately I have no other suggestions as tinkering with iframes is something that I have always avoided, it's like opening pandora's box and breaking all hell loose . I only compare it with messing with tables  

 

Hopefully this helps.

Happy Tweening!

[mhkey]

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

[GreenSock]

You definitely shouldn't be calling contentHeight() on every resize because that's creating a duplicate tween and ScrollTrigger every time, so they're fighting with each other. And you're baking the initial height into the "end" value, so it's not getting updated on refresh. So just change this: 

gsap.to(container, {
  y: () => -(height - document.documentElement.clientHeight),
  ease: "none",
  scrollTrigger: {
    trigger: document.body,
    start: "top top",
    end: () => `${height}px bottom`, // <-- changed to a function!
    scrub: 1.5,
    invalidateOnRefresh: true
  }
});

Since invalidateOnRefresh is true and it uses function-based values, those will get re-invoked on refresh. 

 

If you still need help, please make sure you provide a minimal demo that clearly illustrates the issue, like in CodePen or Stackblitz. 

[mhkey]

Hey Jack,

thanks for your support. Your solution works perfect! Amazing!

[mhkey]

Hey Jack,

sry for open up the topic again. 

 

If I resize the main window, the end-function doesnt work.

 

See the Pen WNLORPL by mhkey (@mhkey) on CodePen

 

[akapowl]

 

Hi there @mhkey

 

5 hours ago, mhkey said:

If I resize the main window, the end-function doesnt work.

 

That likely is because you never update the values that you only set once initially via your setHeight() function.

You could e.g. do so in a ScrollTrigger 'revert' eventListener. More on that in the docs.
 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.addEventListener()

 

See the Pen rNowpwL by akapowl (@akapowl) on CodePen

 

[mhkey]

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!