Flip & Resize background image with Context

[mixagai]

My background image is not recalculated when the window is resized. I tried creating a second context separately from the video using the same logic as the video block, but it didn't help. Can you advise me on how to implement this?

See the Pen ogjxVqN by mixagai (@mixagai) on CodePen.

[Rodrigo]

Hi,

 

Your demo has over 200 lines of code that is too much code to comb through and trying to figure out what could be the issue. Unfortunately we don't have the time resources to go through all that code and find the possible problems you could be having. On top of that you have some Flip instances outside your GSAP Context instance, so that is bound to create problems when resizing the browser window, that's the reason for using GSAP Context in these cases. Please reduce your demo to the minimal instance to show the issue you're having and nothing more, simplifying the code as much as possible. I tried removing some of the code but not knowing exactly what's going on the code since video and hero image are not visible, I assume that something in the rest of the code that shows them.

 

Also this is not really needed:

.add(
    Flip.to(state, {
      duration: 1,
      absolute: true,
      ease: Power4.easeOut,
      delay: 0.5
    })
  )
  .to(
    originalImage.querySelector("img"),
    {
      scale: 1,
      duration: 1,
      ease: Power4.easeOut
    },
    "<1" // This position parameter
  )

A Flip.to() instance returns a Timeline (https://gsap.com/docs/v3/Plugins/Flip/static.to()#returns--timeline) so the Timeline will add the next instance after the add() method after the Timeline returned by the Flip instance, unless you specify something different with the position parameter, so this is the same:

.add(
  Flip.to(state, {
    duration: 1,
    absolute: true,
    ease: Power4.easeOut,
    delay: 0.5
  })
)
  .to(
  originalImage.querySelector("img"),
  {
    scale: 1,
    duration: 1,
    ease: Power4.easeOut
  })

You have this as well:

gsap.to(originalImage, {
  scale: 1.2,
  scrollTrigger: {
    trigger: ".hero",
    // markers: true,
    scrub: 2,
    start: "top top",
    end: "120% 50%"
  }
});

The target of that Tween is the same of the Flip instance I mentioned above, so this could be causing some problems not only with the Flip instance but also with animations with the img element inside that particular originalImage element, because those instances could happen at the same time if the user starts scrolling immediately.

 

Finally you can do this:

gsap.registerPlugin(ScrollTrigger, Flip, ScrollSmoother, SplitText, GSDevTools);

No need to call the registerPlugin method over and over again, nothing wrong with doing it multiple times, the code just looks more concise to me like that, just a matter or preference.

 

Happy Tweening!

[mixagai]

See the Pen xbwodqm?editors=1010 by mixagai (@mixagai) on CodePen.

 

Reduced the amount of code. When resizing the screen, I don't need to replay the entire animation, but rather get rid of the white bars at the edges by stretching the background image across the entire width of the screen.

[Rodrigo]

Ahh yeah, much clearer now, thank you for taking the time to reduce the code, really appreciate it 🙏

 

The issue is that you are reparenting the element after getting the state and before creating the Flip animation BUT, you're not moving the element back to it's original parent, so the next time the function that creates the Flip animation runs, the element is still in the final parent element so the state you're recording with the getState method is wrong in terms of what you want to do since it considers that the original and natural place for the element is the final parent and not the original one, just adding these two lines solves the issue:

const originalParent = document.querySelector(".hero__image");
const imageOriginalHero = originalParent.querySelector(".hero__originalimage");
const img = imageOriginalHero.querySelector("img");
const containerForCloneImage = document.querySelector(
  ".hero__headingimage"
);
const createTweenHero = () => {
  ctxHero && ctxHero.revert();
  gsap.set([imageOriginalHero, img], { clearProps: "all" });
  ctxHero && originalParent.appendChild(imageOriginalHero);
  // ...
};

Here is a fork of your demo:

See the Pen dPYBVdb by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!