Search the Community
Showing results for tags 'flip plugin'.
Found 3 results
-
Hi all, I am new to gsap and this library has been fantastic so far. I was looking to recreate the following effect where you click an image, and it flips to the corresponding page. https://dribbble.com/shots/17535054-Homepage-Animation-for-Melbourne-Wooden-Showroom After doing a bit of digging, I thought I could use the following demo below as a base to toggle between component states. https://codepen.io/GreenSock/pen/OJzRdBj To start, I thought it would be best to observe how the component would behave when used multiple times within another component, like a list. Here is where I'm at: https://codesandbox.io/s/gsap-flip-react-test-t3odk8?file=/src/App.js I expected there to be some problem with the states, but I'm not too sure why clicking on any of the three list items only triggers a flip from the last item in the list. It would be super helpful if someone could help me with this, or point me in any direction if this is not the ideal way to approach this. Please let me know if I can provide any additional information. Thank you in advance. -
Hello, I am trying to animate an input element using Flip for when the user is typing something, but when Flip is called my input is loosing the focus. I tried calling a onComplete: function() { input.focus() }, but that doesn't work...
-
I am getting an error from the Flip.min.js file before I even register the plugin. <script src="../js/gsap/minified/gsap.min.js"></script> <script src="../js/gsap/minified/Flip.min.js"></script> And here's what I get in the console... Flip.min.js:10 Uncaught TypeError: Cannot read properties of null (reading 'appendChild') at o (Flip.min.js:10) at Function.register (Flip.min.js:10) at _createPlugin (gsap.min.js:10) at gsap.min.js:10 at Array.forEach (<anonymous>) at Object.registerPlugin (gsap.min.js:10) at Flip.min.js:10 at Flip.min.js:10
