Matija Posted September 1, 2022 Share Posted September 1, 2022 Thank you for making this great plugin! ? I'm trying to recreate the Shuffle and FLIP example in Svelte but I have run into a problem where it doesn't work when you reparent elements. gsap-flip.mp4 ? Svelte REPLhttps://svelte.dev/repl/0ebcbfc6eacb457f954cee131cc2075c?version=3.49.0 I understand how declarative JavaScript frameworks like Svelte recreate those elements when you change them but I assumed when it came to the FLIP technique that it only cared about the before and after changes based on some identifier like data-flip-id. I made another example using Flipping.js where it works as expected. flip.mp4 ? Svelte REPLhttps://svelte.dev/repl/9f36c3b2a6504f9c9522cc8cf54e10fa?version=3.49.0 Thank you for your help! ? Link to comment Share on other sites More sharing options...
Solution GreenSock Posted September 1, 2022 Solution Share Posted September 1, 2022 That's because you forgot to define the targets. Remember, when you just feed in a state object, it'll use the targets that were captured in that state by default but in your example, those elements were completely removed from the DOM and there are entirely new ones that got rendered, hence the need to tell the Flip "use these new targets and search the state object for the IDs that match..." // BAD Flip.from(state, { duration: 1 }); // GOOD Flip.from(state, { targets: ".box", // <-- BINGO duration: 1 }); Does that clear things up? 3 Link to comment Share on other sites More sharing options...
Matija Posted September 2, 2022 Author Share Posted September 2, 2022 Thank you, that works! ? If I might add a suggestion this is knowledge that any JavaScript framework user might find useful so perhaps it would be wise to update the Flip documentation to at least include a mention of it under "Caveats & Tips" because I would have never thought of it even after reading the documentation. In an ideal scenario having examples for at least one popular JavaScript framework would be great because it would let you translate the concept to other JavaScript frameworks. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted October 8, 2022 Share Posted October 8, 2022 @Matija I just wanted to let you know that I followed your suggestion and added some notes to the docs about this to make it clearer. ? 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