Flip a dynamically added class

[Mattrudd]

Hi there GSAPpers, 

I'm aiming to make an element in a vertical scroll of images flip into a central container.
The idea is, the carousel of blocks will eventually hold videos.

> video (housed in ".stack__item" container) clicked
> video flips into a larger, centred container, lightbox style
> video plays

> click video container again, video stops and returns to original position nested in carousel

 

The trouble I'm having is I'm not sure how best to manage the dynamically added class... I only want the 'flip' to occur on the active highlighted element ('stack__item--current'). 

I'm stuck on how to manage the logic so that this dynamically added class is available to the Flip function. 
Maybe it needs to be in some kind of onComplete as part of a timeline?

The pen shows it (very clunkily) working on the parent element ('.stack')

Here's a pen without the Flip/flip container, for reference: 

See the Pen PoLWQdb by matt-rudd (@matt-rudd) on CodePen

 

Hope that makes sense... I'm stretching my knowledge as ever! Any big or small nudges in the right direction greatly appreciated 😬.

See the Pen XWGpZdE by matt-rudd (@matt-rudd) on CodePen

[Rodrigo]

Hi,

 

Sorry but your demo is a bit far from being minimal and I don't have time to go through all that in order to find what could be the issue.

 

Instead I created a minimal demo that is close-ish to what you're doing that shows what I believe you're trying to achieve:

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

 

Remember that this is an approximation to what I think you're trying to do. You can only click on the active element (white border) which will Flip to a full screen display. Inside the doFlip method you can add other custom logic in order to play/stop the video, etc.

 

Hopefully this helps.

Happy Tweening!

[Mattrudd]

@Rodrigo  Wow thanks for this! Appreciate my pens aren't very minimal but grabbed a template that has lots of related parts.

I'd still like each panel to snap to centre like my initial pen - I know I could work out a snap on the ScrollTrigger but I like the measured way the Observer works in my pen. 

The Observer way misses out the lag of ScrollTrigger's snap, which is what I'd prefer here. I'll try and replicate the Observer method in your pen, then it's just a case of triggering the text swapping on the left, adding the vids et voila!

 

[Mattrudd]

I've managed to get very close with the original version... if you'll permit me the less than minimal pen (although I think I'm running very low on permits!), the flip code in question is in the last 40 lines... 

 

See the Pen BabWoeP by matt-rudd (@matt-rudd) on CodePen

All I need to figure out is how to get the flip-back working so that it reparents... I must be doing something wrong with :

 

    if (video.parentNode === newContainer) {
        flipBackToOriginalParent(video);

Then there's the small matter of getting the background to "rgba(0, 0, 0, 0.75) for the flip and then back to 0,0,0,0,0!

[Rodrigo]

Hi,

 

Basically this logic is not running as you expect, see the comments:

function flipToNewContainer(video) {
  let state = Flip.getState(video);

  newContainer.appendChild(video);

  Flip.from(state, {
    duration: 1,
    ease: "power2.inOut"
  });
}

function flipBackToOriginalParent(video) {
  // THIS NEVER RUNS
  console.log("FLIP BACK")
  let state = Flip.getState(video);

  video.originalParent.appendChild(video);

  Flip.from(state, {
    duration: 1,
    ease: "power2.inOut",
    onComplete: gsap.to(".vid_flip_container", {
      background: "rgba(0, 0, 0, 0.75)",
      duration: 0.5,
      delay: 0.25,
      ease: "power4.inOut"
    })
  });
}

stackItems.forEach((stackItem) => {
  stackItem.addEventListener("click", () => {
    let video = stackItem.querySelector(".video_block");
    console.log(video); // -> null NO PARENT NODE HERE
    if (video) {
      // ALWAYS FALSY
      if (video.parentNode === newContainer) {
        flipBackToOriginalParent(video);
      } else {
        flipToNewContainer(video);
      }
    }
  });
});

IMHO you are over engineering this quite a bit. My advice would be to get the Flip logic working as expected first and then add the extra hundreds lines of code for the Observer animation. The logic for the Flip animation in both directions should be a simple one like the one I had in the demo I linked in my previous post.

 

Hopefully this helps.

Happy Tweening!

[Mattrudd]

Thank you! I've just been doing exactly that - stripped it right back.

See the Pen mdoWMZv by matt-rudd (@matt-rudd) on CodePen

Managed to get it how I need, save for one aspect - ensuring the flipped element stays on top during the flip box?
I've set absolute: true in both Flips, but I'm sure I've seen some documentation on this kind of z-index issue during flip but can't seem to find it again!
 

[Rodrigo]

Hi,

 

Since you're adding/removing this class to the video element, use that to increase the z-index of that element:

// After expanding Flip is complete
videoBlock.classList.add("isFlipped");

// After Flipping back to normal is complete
videoBlock.classList.remove("isFlipped");

.vid_flip_container {
  /*...*/
  /* This z-index value has to be less than the isFlipped class */
  z-index: 100;
}

.video_block {
  /*...*/
  /* Add a position property to the element */
  position: relatve;
}

.isFlipped {
  z-index: 110;
}

That seems to work the way you expect:

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

 

Hopefully this helps.

Happy Tweening!