Jump to content
Search Community

YouTube Video + Flip + ScrollTrigger

jillianadriana test
Moderator Tag

Recommended Posts

Hey friends!

 

I am trying to create a video that shrinks on scroll, so it's still in frame while the user is reading the content on the page. I am using a combination of

See the Pen zYEqYZJ by GreenSock (@GreenSock) on CodePen

and

See the Pen EZoYjx by kelvinqueiroz (@kelvinqueiroz) on CodePen

.

 

It works fine in Codepen, but the issue I am having is happening in Wordpress, when scrolling back up and them down again. The video seems to disappear, although its container remains. See here.

 

I'm not sure if this has to do with the iFrame embed from YouTube, but I could use some help figuring it out.

See the Pen bGYamVX by jillianadriana (@jillianadriana) on CodePen

Link to comment
Share on other sites

It definitely seems like an iframe/YouTube issue to me. Iframes can be a little difficult to deal in how to they can reload. Does it work using a normal video? And maybe try removing the scale. Outside of that, I'm not sure what to suggest.

 

Flip.from(state, {
    // scale: true,
    ease: "power3.out",
    duration: 0.9
  });

 

Link to comment
Share on other sites

19 hours ago, OSUblake said:

It definitely seems like an iframe/YouTube issue to me. Iframes can be a little difficult to deal in how to they can reload. Does it work using a normal video? And maybe try removing the scale. Outside of that, I'm not sure what to suggest.

 

Flip.from(state, {
    // scale: true,
    ease: "power3.out",
    duration: 0.9
  });

 

Doesn't work, sadly. Thanks for taking a look. I'll have to see if there's another way to output the video on the site.

Link to comment
Share on other sites

Update: got it to work by targeting the iframe specifically...

 

gsap.registerPlugin(Flip, ScrollTrigger);

let video = document.querySelector(".video");
let embedContainer = document.querySelector(".embed-container iframe");

ScrollTrigger.create({
  trigger: ".video-container",
  start: "top top",
  onEnter: () => toggleVideo("add"),
  onLeaveBack: () => toggleVideo("remove"),

});


function toggleVideo(action) {
  let state = Flip.getState(embedContainer);
  video.classList[action]("video-fixed");
  Flip.from(state, {
    scale: true,
    ease: "power2.out",
    duration: 0.9
  });
}

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Updating this thread because I need help.

 

Why is the page jumping when I scroll down? I want it to just be a nice smooth transition as people are reading the blog post, but for some reason either the ScrollTrigger or the Flip is making the page jump.

 

EDIT: Sorry, forgot the link to the page! https://mattiejames.flywheelstaging.com/recap/test-recap/

Link to comment
Share on other sites

You're going to have be more specific than that. What page? And have you tried commenting out the code to verify that the issue is related ScrollTrigger/Flip. The code in the demos shouldn't cause a jump as the only thing it's doing is changing the videos position from block to fixed.

 

Link to comment
Share on other sites

2 minutes ago, OSUblake said:

You're going to have be more specific than that. What page? And have you tried commenting out the code to verify that the issue is related ScrollTrigger/Flip. The code in the demos shouldn't cause a jump as the only thing it's doing is changing the videos position from block to fixed.

 

You read my mind because I posted the link at the same time you that you responded! See above.

Link to comment
Share on other sites

I see the jumping, but I don't know what is causing that. For example, I don't see the video-fixed class being added to the video. Maybe something with your theme is interfering with it.

 

Even if I do manually add the video-fixed class, its styles don't take effect because they have lower specificity due to your theme classes.

 

image.png

 

 

 

Link to comment
Share on other sites

21 minutes ago, jillianadriana said:

Would it be better to use pinning instead of a fixed CSS property?

No, this won't help. You'll just need to add a class to your ct-section-inner-wrap to make it the same height as your video, or put an aspect-ratio on it and position your video absolutely inside of it to ensure the height isn't collapsing when the video gets a position fixed added to it.

I added a fixed height in the inspector for this, and the jumping went away.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

16 minutes ago, elegantseagulls said:

No, this won't help. You'll just need to add a class to your ct-section-inner-wrap to make it the same height as your video, or put an aspect-ratio on it and position your video absolutely inside of it to ensure the height isn't collapsing when the video gets a position fixed added to it.

I added a fixed height in the inspector for this, and the jumping went away.

Thank you for explaining this! It's working now.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...