ScrollTrigger overlaid sections with iFrame videos

[LukeMeyer]

Hi all,

New to GSAP but super excited with the possibilities. I'm trying to create the scroll effect from the post below, but with iFrame videos. I can get it to work with images and with HTML videos, but can't recreate the effect with iFrame elements, which is what I ideally need. 

 

Any help would be appreciated! 

 

Got the idea from this post, which does the same with just divs:

 

CodePens:

With images: 

See the Pen YzapapP by fromluke (@fromluke) on CodePen

With HTML video (working): 

See the Pen mdxOLMp by fromluke (@fromluke) on CodePen

Attempt with iFrame (not working): 

See the Pen dymOKXK by fromluke (@fromluke) on CodePen

[GreenSock]

Thanks for the minimal demos, @LukeMeyer. 

 

It looks like you just forgot to set overflow: hidden on the panels. Also pointer-events: none because it the iframe is absorbing pointer/mouse events so they don't trigger your 3rd party scrolling library. 

 

See the Pen abYBKPK?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help?

[LukeMeyer]

10 hours ago, GreenSock said:

It looks like you just forgot to set overflow: hidden on the panels. Also pointer-events: none because it the iframe is absorbing pointer/mouse events so they don't trigger your 3rd party scrolling library. 

Ah yes perfect!  Guess I just needed a fresh set of eyes, been staring at it for too long. 

Many thanks for you assistance!