Leemoon Posted August 10, 2021 Share Posted August 10, 2021 why it doesn't into the onEnter function? and how to add an animation with the created div node? See the Pen OJmrEGw by leemoon123 (@leemoon123) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted August 10, 2021 Share Posted August 10, 2021 You probably need to use the targets property. If you need more help, please provide a minimal demo. Quote targets String | Element | Array | NodeList - by default, Flip will use the same targets from the state object provided in the first parameter, but if you'd like it to only animate a subset of those, you can define them here as either selector text (".class, #id"), an Element, an Array of Elements, or a NodeList. If any of the targets provided are NOT found in the state object, they will be passed to the onEnter and not included in the flip animation because there's no previous state from which to pull position/size data. Link to comment Share on other sites More sharing options...
Leemoon Posted August 10, 2021 Author Share Posted August 10, 2021 53 minutes ago, OSUblake said: You probably need to use the targets property. If you need more help, please provide a minimal demo. i have updated. please take a look . Link to comment Share on other sites More sharing options...
Cassie Posted August 10, 2021 Share Posted August 10, 2021 Hi @Leemoon Could you explain what you're expecting the outcome to be? Are you trying to create an element that fades in when added to the DOM? If so you can do that without FLIP. Flip stands for 'First, Last, Invert Play' - in order for it to work there needs to be a first and last state to animate between. If you're adding something to the DOM the first state is 'not existing' so there's no previous state to pull size or position from. 3 hours ago, OSUblake said: If any of the targets provided are NOT found in the state object, they will be passed to the onEnter and not included in the flip animation because there's no previous state from which to pull position/size data. 2 Link to comment Share on other sites More sharing options...
nico fonseca Posted August 10, 2021 Share Posted August 10, 2021 Hi @Leemoon.@Cassie is right! Btw, I created a simple demo to try to resolve your issue. See the Pen 0ec223512264e19bf2730569eef0df80 by nicofonseca (@nicofonseca) on CodePen Cheers, Nico. 2 1 Link to comment Share on other sites More sharing options...
OSUblake Posted August 10, 2021 Share Posted August 10, 2021 It needs targets as Flip doesn't know about the new box. Quote targets String | Element | Array | NodeList - by default, Flip will use the same targets from the state object provided in the first parameter, but if you'd like it to only animate a subset of those, you can define them here as either selector text (".class, #id"), an Element, an Array of Elements, or a NodeList. If any of the targets provided are NOT found in the state object, they will be passed to the onEnter and not included in the flip animation because there's no previous state from which to pull position/size data. See the Pen ZEKVwaZ by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted August 10, 2021 Share Posted August 10, 2021 I added a new demo to the Flip How-To Demos. This will add, remove, and shuffle elements. See the Pen BaRvbmE by GreenSock (@GreenSock) on CodePen 6 Link to comment Share on other sites More sharing options...
nico fonseca Posted August 10, 2021 Share Posted August 10, 2021 @OSUblake that is awesome ! 👏 1 1 Link to comment Share on other sites More sharing options...
PointC Posted August 10, 2021 Share Posted August 10, 2021 27 minutes ago, OSUblake said: I added a new demo to the Flip How-To Demos. 1 2 Link to comment Share on other sites More sharing options...
Leemoon Posted August 11, 2021 Author Share Posted August 11, 2021 Thanks for you all! Totally solved my problem. That is what i want. 2 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