Having alot of trouble with FLIP and pinned elements, specifically getting the reversal/scroll up to work

[darkus]

This is a continuation of a prior thread 

 

In essence, I am trying to move a div that has an image inside of it, to the space of another div, in the meantime transforming the div/image into a circle and resizsing it to the target div size.

 

In this case, the sequence of events is:

1. Black box div should appear

2. Black box div should get pinned while the user scrolls

3. Black box div should fade away revealing an image underneath

4. Image will then transform into a circle and resize a little so that its truly circular (black box is actually a rectangle)

5. Using Flip, the image will then move from its pinned location to a final target as the pin is released

 

This is all working for the most part

 

My problem occurs if a user decides to scroll up during this set of events, where everything gets reversed with scrub.

 

1. If you try to scroll up, what you will notice happen is that the circular image will go back to the source div using Flip, but then if the user decides to scroll forward again, the image stops moving with the black box, and then the user can see it actually scroll up behind the black box as the black box is pinned.  Its as if the absolute posiitioning is not being undone somehow?

2. The image is not being properly resizes anymore, so that when you do scroll back forward again and the flip occrs a second time, the image is now larger then the target green box

3. This third problem is much less important, for some reason the resized image doesnt exactly lineup with the green box.  Not exactly sure why, because in my actual size it does line up perfectly.  I messed something up in the translation to codepen.  I can probbaly figure this one out.

 

 

Any ideas?

 

 

See the Pen mdQOjPW by darkuss (@darkuss) on CodePen

[Rodrigo]

Hi,

 

I think the biggest issue is on this part:

let t0 = gsap.timeline({
  scrollTrigger: {
    trigger: ".MediaArea",
    start: "center center",
    end: "bottom 20%",
    duration: 10,
    pin: true,
    scrub: true,
    //markers:true,
    onLeave: anim,
    onLeaveBack: anim
  }
});

You're creating an animation with a ScrollTrigger instance in it, everytime you pass certain points in t0 ScrollTrigger instance. That spells trouble to me. On top of that I'm having a bit of a hard time following the order of events in your code and finding out what does what exactly.

 

Keep in mind that the golden rule for ScrollTrigger is to create your ScrollTrigger instances in the order they happen, right now you're creating the animation with the scrubbed Flip instance after all your ScrollTrigger instances have been created. Strictly speaking that should happen after the pin of the first section but before the letters staggered animation. On top of that I set the everytime above in bold for a reason, there is absolutely no need to create that instance on every pass, just on resize, as the example I linked in the other thread does:

let flipCtx;
function anim() {
  flipCtx && flipCtx.revert();
  const p1 = document.querySelector(".p-1");
  const p2 = document.querySelector(".p-2");
  const bg = document.querySelector(".p-bg");
  p1.appendChild(bg);
  bg.style.cssText = ""; // clear out the inline styles (shouldn't be necessary beyond 3.11.5)
  
  flipCtx = gsap.context(() => {
    const state = Flip.getState(bg, {props: "transform"});
    p2.appendChild(bg);
    const flip = Flip.from(state, { absolute: true });

    ScrollTrigger.create({/*...*/});
  });
}

anim();

window.addEventListener("resize", anim);

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

 

Unfortunately your example has a lot of moving parts and we don't have the time resources to solve complex issues for our users. I can give you some advice on how I would tackle this:

• Make the black element and the image container children of the same element, that is also a child of the element with the MediaArea class. Right now the starting positions are a bit odd since you're pinning just the black element. With this approach you can pin the parent of the black box and the image without any issues.
• Focus on creating the Flip animation first and toggle it with a button. Forget about ScrollTrigger for now.
• Once the Flip animation works as expected add ScrollTrigger just for that animation and pinning that section, forget about the letters.
• Once the Flip animation works with ScrollTrigger add the letters back to the mix.

Hopefully this helps.

Happy Tweening!

[darkus]

1 hour ago, Rodrigo said:

Hi,

 

I think the biggest issue is on this part:

let t0 = gsap.timeline({
  scrollTrigger: {
    trigger: ".MediaArea",
    start: "center center",
    end: "bottom 20%",
    duration: 10,
    pin: true,
    scrub: true,
    //markers:true,
    onLeave: anim,
    onLeaveBack: anim
  }
});

You're creating an animation with a ScrollTrigger instance in it, everytime you pass certain points in t0 ScrollTrigger instance. That spells trouble to me. On top of that I'm having a bit of a hard time following the order of events in your code and finding out what does what exactly.

 

Keep in mind that the golden rule for ScrollTrigger is to create your ScrollTrigger instances in the order they happen, right now you're creating the animation with the scrubbed Flip instance after all your ScrollTrigger instances have been created. Strictly speaking that should happen after the pin of the first section but before the letters staggered animation. On top of that I set the everytime above in bold for a reason, there is absolutely no need to create that instance on every pass, just on resize, as the example I linked in the other thread does:

let flipCtx;
function anim() {
  flipCtx && flipCtx.revert();
  const p1 = document.querySelector(".p-1");
  const p2 = document.querySelector(".p-2");
  const bg = document.querySelector(".p-bg");
  p1.appendChild(bg);
  bg.style.cssText = ""; // clear out the inline styles (shouldn't be necessary beyond 3.11.5)
  
  flipCtx = gsap.context(() => {
    const state = Flip.getState(bg, {props: "transform"});
    p2.appendChild(bg);
    const flip = Flip.from(state, { absolute: true });

    ScrollTrigger.create({/*...*/});
  });
}

anim();

window.addEventListener("resize", anim);

 

 

 

Unfortunately your example has a lot of moving parts and we don't have the time resources to solve complex issues for our users. I can give you some advice on how I would tackle this:

• Make the black element and the image container children of the same element, that is also a child of the element with the MediaArea class. Right now the starting positions are a bit odd since you're pinning just the black element. With this approach you can pin the parent of the black box and the image without any issues.
• Focus on creating the Flip animation first and toggle it with a button. Forget about ScrollTrigger for now.
• Once the Flip animation works as expected add ScrollTrigger just for that animation and pinning that section, forget about the letters.
• Once the Flip animation works with ScrollTrigger add the letters back to the mix.

Hopefully this helps.

Happy Tweening!

 

Thanks for the detailed reply, I went through what you said with a fine toothed comb

 

Just somenotes/follow-up questions if I can pick your brain

1. The black box (.blackbox) and the image container (.MediaAreaImage) are both contained/parented by .MediaArea and it is .MediaArea that is getting pinned

2. The flip animation without the scrollTrigger does work very well, but because of the attempt to make it scrub, I decided to go ahead and integrate it with scrolltrigger per your prior suggestion and its so close now

3. The reason I have anim() starting with each scrolltrigger at the onLeave point is because if I just run it at page load, it immediately removes the target .MediaAreaImage from the .MediaAream and does not respect the pinning of its container (.MediaArea)

 

You can see that in the following variant CodePen where the image scrolls in under the black box

 

In actuallity, the black box and the image are absolutly positioned div and are supposed to be on top of each other, with the black box fading away to show the image under that is at the same time going to Flip to the final target

 

See the Pen BaGQGrx by darkuss (@darkuss) on CodePen

[Rodrigo]

Hi,

 

This seems more related to all the opacity stuff you're doing. Actually right now your image is moving back and forward as expected, the problem is that going back (scrolling up) the opacity of the image is zero, that's why you can't see it.

 

Unfortunately I don't have time to go through all that code and find out when/where you should add that in order to restore the opacity of the image, but I would start in the onEnterBack of the ScrollTrigger instance that scrubs the Flip animation.

 

Hopefully this helps.

Happy Tweening!