keep adsorption element with window resize

[lich0320]

Question: How can I achieve this kind of function?
Demo: 
Targets: I have a node and a target node, and I want to make the current node and the target node overlap in position and size.

Descriptions: 
In this demo I implemented such a function, but when the window changes, I can't update the value in gsap.to, what should I do.
Or is there a better implementation?


Thanks for help !!!!!

See the Pen yLPjLPb?editors=0010 by liar0320 (@liar0320) on CodePen

[mikel]

Hey @lich0320,

 

Take a look at GSAP Flip.

 

Happy flipping ...

Mikel

[akapowl]

Hey there @lich0320

 

Since you are already making use of function-based values, you've got that part covered already.

What you want to be taking a look at with regard to ScrollTrigger is invalidateOnRefresh

 

This is from the docs:

 

invalidateOnRefresh

Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values.

 

See the Pen dyZeYgL by akapowl (@akapowl) on CodePen

 

 

And as mikel said, taking a look at the FLIP-plugin for something like that will definitely help, especially for when things become a bit more complex.

 

Hope that helps. Happy scrolling!

 

 

Edit:

An additional sidenote:

You'll probably want to change your

 

    x: () => red.getBoundingClientRect().left,
    y: () => red.getBoundingClientRect().top,

to

    x: () => red.offsetLeft,
    y: () => red.offsetTop,

 

...because with the getBoundingClientRect() values things 'break' (meaning the blue box doesn't appear where you'd want it to) once you resize when in or scrolled past the section.

 

This should work a bit better:

 

See the Pen NWwMxXX by akapowl (@akapowl) on CodePen