Jump to content
GreenSock

Matija

Using The GSAP Flip Plugin With Svelte

Go to solution Solved by GreenSock,

Recommended Posts

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.
 



🔗 Svelte REPL
https://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.

 


🔗 Svelte REPL
https://svelte.dev/repl/9f36c3b2a6504f9c9522cc8cf54e10fa?version=3.49.0

Thank you for your help! 😄

Link to comment
Share on other sites

  • Solution

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? 

  • Like 3
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×