lich0320 Posted February 21, 2022 Share Posted February 21, 2022 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 Link to comment Share on other sites More sharing options...
mikel Posted February 21, 2022 Share Posted February 21, 2022 Hey @lich0320, Take a look at GSAP Flip. Happy flipping ... Mikel 2 1 Link to comment Share on other sites More sharing options...
Solution akapowl Posted February 21, 2022 Solution Share Posted February 21, 2022 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 2 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now