Is it possible to move a pinned div to overlap a second pinned div?

[darkus]

So what Im trying to do is take an image from an initial content area, have it change its shape and move to overlap a second content area, specifically the location of a #finalTarget div.  I do this by pinning the image while it changes shape (from a square to a circle) and then determining the coordinates of the final destination div (#finalTarget).  The problem I'm having is that it seems to be moving my div only witin the intiial pin area, and will not move beyond the pin area (first content area) into the second content area to overlap.

 

Maybe its not actually possible to move an object from one containing div to another?

 

Hopefully my codepen does a better job explaining then my words, but here is the expected sequence of events

 

1. Yellow box content area should pin and then "Some cool text" and image should reveal --- Success!

2. Image should then change size and become a circle as the user scrolls while staying on screen, ideally sort of center screen-ish --- Success-ish! (the image moves down very quickly and does not center, but that might be an issue with the timing and I can play with that)

3. Image should also move to a final destination which is going to be wherever #finalTarget is (could be different location depending on screen size) --- FAILURE

4. The Grey background content area should pin --- Success

5. The letters 'C  o  D I N G !' should appear (the o is formed by the circular image) --- FAILURE

 

A second problem has to do with #5.  The letter inside the grey box never appear for some reason.  I can sort of fix it by adding 'immediateRender:false'.  The problem with that is that on the first cycle the letters are visible, and you have to scroll through it once and then it will properly dissapear and appear.  Not sure what that is about, but that is a secondary problem.  Main problem is trying to get the image to overlap the green square

 

Is this even possible?

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

[Rodrigo]

Hi,

 

For the image part you could use the Flip Plugin in combination with ScrollTrigger. There are two approaches and both rely on reparenting the target element. This one uses ScrollTrigger srcub for the Flip animation and is a bit more complex in order to accommodate for window resizes:

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

 

This one is simpler and it uses the callbacks ScrollTrigger has for moving the image:

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

 

As for the letters, you are making one of the ScrollTrigger mistakes we have referenced in the docs:

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".secondPinArea",
    pin: true,
    markers: false,
    start: "top top",
    scrub: 1,
    end: "+=" + pinAmount
  }
});

///Fade the letters C(O)DING in -- more failure
gsap.utils.toArray(".secondPinArea div").forEach((section) => {
  tl.from(section, {
    opacity: 0,
    immediateRender: false,
    scrollTrigger: {
      trigger: ".secondPinArea",
      anticipatePin: 1,
      start: "top top",
      end: "+=50",
      markers: true
    }
  });
});

Here you have a Timeline instances. Timelines are, among other things, containers of animations and they control the position of each animation's playhead. On top of that you have ScrollTrigger that ties up the progress of the Timeline to the scroll position. So far so good. Then you add an instance for each element in the loop to the same Timeline and create a ScrollTrigger for each particular instance. So now you have the Timeline trying to control the playhead of each instance, that particular timeline progress is updated by the scroll position, but at the same time the ScrollTrigger instance of each instance is also fighting to control each instance's progress with a different scroll amount. Sure the start point is the same but the end point is not. So at the end who has control of the instances in the loop? The timeline, ScrollTrigger? See the issue? The main point is not put ScrollTrigger on instances that are in a Timeline, create your ScrollTrigger in the timeline. Also you don't need to run a loop and add each instance to the timeline, just pass the selector to GSAP and use Staggers:

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".secondPinArea",
    pin: true,
    markers: false,
    start: "top top",
    scrub: 1,
    end: "+=" + pinAmount
  }
});
tl.from(".secondPinArea div", {
  opacity: 0,
  stagger: 0.1,
});

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!

[darkus]

WOW.  I've learned alot already from this post--- but yet much more to learn.

 

One thing is that, the way the fork appears on my screen, the image sits at the bottom of the pinned area (yellow box) and doesn't go into the grey area.  But when the grey area sticks the image is in the right spot ultimatly, but it does not actually animate there.  It just appears there later.  Is that the way you are seeing it too?

 

 

 

[darkus]

Actually, ok I made a fork of yours and got it much closer! It was because my old may of moving was still there, so I removed that part and now the flip seems to properly move it!  

 

However, whats interesting is that in converting the image to a circle with the GSAP animation, it goes back to a square with the flip.  If I made the green target box into a border-radius:50% with overflow:hidden then it hides the entire flip animation, any ideas?

 

PS.  Adding flip seems to make the entire page very laggy, is that soemthing to deal with for now?

 

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

[darkus]

More updates, I have solved the square to circle issue, with some CSS changes, and the animation stays.  YAY!

 

Some outstanding questions:

 

1. Is it possible to have the flip be part of the scrub as the user scrolls the wheel?  Right now if the user is scrolling slowly, then the flip happens very fast and goes beyond the screen until the user catches up to the position.  This problem is exacerbated when the user goes backwards up the screen, as the flip animation only happens when back at the top of the area

2. Flip seems to add some noticable lag to the screen, can all this be done without flip in order to improve performance?

 

 

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

[Rodrigo]

Hi,

 

I updated the codepen to make the image animation visible as you scroll using the callback events:

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

 

As for scrubbing the image Flip animation you can check this example:

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

 

Making it work like that would require a second ScrollTrigger instance for moving the image to the final position, maybe using a wrapper around the image. Unfortunately we don't have the time resources to provide custom solutions for our users. I suggest you to study that codepen and see how it works. In this thread you can find some explaining about how that particular approach works:

I'm not seeing any performance issue on Chrome and Firefox in Ubuntu 20 && 22. As for doing that without Flip, sure it can be done but it would require for you to create all the custom logic for that, something that Flip already does and it's highly optimized as it is.

 

Hopefully this helps.

Happy Tweening!