jbonlinea Posted September 17, 2020 Share Posted September 17, 2020 Hi there I'm learning how to implement flip animations, and I actually managed to get the expected behavior in most case ! Yet one flip animation contained in the function switchPip animate to the right destination (position + size), but do not always start from the actual div position. to reproduce the unexpedted behavious, lauch the pen, and : click on "switch pip order" : you can see the div are starting from their current position and lead where I want (position and size wise), cool then click again on "switch pip order" : the div position changes , we observe that : the smaller div, then with class .order-1, start from its actual position and is let to the right spot (position and size wise), cool BUT the bigger one, then with class .order-0, start from elsewhere, something like 60% of it width to the left, then it is lead at the right spot. The result is that when switching pip order, (and not switching from or to pip), the bigger div jumps, and it do not look very nice After a day, I could'nt understand why the flip animation of one single div and not the other, do not start from the actual position in this case, and only in this case. I hope you guys may clarify this with a little explainer ! Thank's in advance Cheers See the Pen vYGzjeN?editors=0011 by jbonlinea (@jbonlinea) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted September 17, 2020 Share Posted September 17, 2020 I didn't have time to wade through all the logic in the 200+ lines of code (please try to reduce things to the absolute minimum in the future to increase your chances of getting a good answer), but it looks to me like the problem is that you're creating competing flip animations. In other words, you're calling flip() for the elements to go to one place, and IMMEDIATELY you're also calling flip() on the same elements to go elsewhere. The Flip plugin will check to see if there are any in-progress flip animations on any given element and if so, it'll force them to completion immediately before performing the [new] flip. Trust me, that's a good thing You should set up your logic so that you make all your state changes in ONE flip(). Don't fire off multiple at the same time to different places. See what I mean? 2 Link to comment Share on other sites More sharing options...
jbonlinea Posted September 20, 2020 Author Share Posted September 20, 2020 Hi I've reduced the pen to the minimum, the code not involved in the specific phenomenon I'm describing is commented out. I've also slowed down the animation, and added some strong colors so it is easy to see what happens. I don't really know what's going on behind the scene of the flip plug-in, an I would assume that flip() is called only once (at least in the code), however it purposefully affect more than one element. As you may see, the lager div is animate to the right position, but do not start from it's actual position, but somewhere on its left. Regards Link to comment Share on other sites More sharing options...
GreenSock Posted September 21, 2020 Share Posted September 21, 2020 Ah, okay, that's because of the fact that apparently absolutely-positioned elements are still factored into the layout of flex parents unless they have a top or left specified. I forced that to happen in the latest Flip which seems to resolve the issue in your demo, right? (You may need to clear your cache). 1 Link to comment Share on other sites More sharing options...
jbonlinea Posted September 21, 2020 Author Share Posted September 21, 2020 Hi, Yes ! that's great ! I do have a question thow : what change have you made ? I can't figure out what line of code has chaged where ? (I haven't kept an other copy of this specific pen to compare !) about timmig/delaying css properties change within a single animation, but I'll open a new topic for better reference here Thank's Link to comment Share on other sites More sharing options...
jbonlinea Posted September 21, 2020 Author Share Posted September 21, 2020 Hello again I went furthuer in my UX developement and bumped in the same issue as above ! Basically, I'm nesting one flexbox in one other and I try to animate them concomitantly. basically the html looks like this flewWrapper (.group) box1 (.box) innerbox 1.1 (.innerBox) innerbox 1.2 (.innerBox) box2 (.box) innerbox 2.1 (.innerBox) innerbox 2.2 (.innerBox) at then end of the animation the box and innerbox rendering order looks like that MainFlexBox (.group) box2 (.box) innerbox 2.2 (.innerBox) innerbox 2.1 (.innerBox) box2 (.box) innerbox 1.2 (.innerBox) innerbox 1.1 (.innerBox) I did several attempt on where and how place the animation : one gsap.flip , affecting the .group .box and .innerbox (that the actual code) two gsap.flip at the same time, one affecting .group and .box, and one .box and .innerbox One timeline with the two flips strutured, but I still didn't reach a better result compared to below Now with everything in the same animation, the elements are led to their right spot, but they start from "somewhere" Moreover, as long as you switch .box order, whether .group is in column or row, the animation works, but as soon as you switch .group flex direction, the animation breaks, it jumps. if you want to revert to a working pen, but without changing innerbox order (and thus position) : line 40 : change target from "elems2" to "elems" line 46 : comment it out Ok, now you may hate me because my pen is not super short, but I don't think I can strip it more, and I'll still love you if you blame me I think you may not bother about switchLayout() as it only define wether switchOrder or switchDirection shoud be fired, depending of the curent .group flex direction See the Pen qBZQXEY?editors=0011 by jbonlinea (@jbonlinea) on CodePen Hope I'm understandable and that I took the right approach ? Thank's in advance Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 21, 2020 Share Posted September 21, 2020 Hey jbonlinea. I don't understand your goal or your code. It's hard to tell if it's a GSAP/FLIP plugin issue or a logical issue. Can you try to make your demo more clear and more minimal? Link to comment Share on other sites More sharing options...
jbonlinea Posted September 21, 2020 Author Share Posted September 21, 2020 24 minutes ago, ZachSaucier said: Hey jbonlinea. I don't understand your goal or your code. It's hard to tell if it's a GSAP/FLIP plugin issue or a logical issue. Can you try to make your demo more clear and more minimal? Haha, arf, yes sorry basically I want to play with four div and animate them between --- flexWapper flex column order standard 1 2 3 4 --- flexWrapper flex column order manually defined (could be reverse but will be problematic for later) 4 3 2 1 --- flexWrapper flex row half width 1 3 2 4 --- and flexWrapper flex row order maualy defined, half width 3 1 4 2 I considered having 4 div but it seems more complicated to manipulate than six so I builted 1 1.1 1.2 2 2.1 2.2 and want to animate 1 and 2 3 or 4 1 3 2 2 within its parent flexWrapper and x.1 and x.2 within their respective parent x I curated the code so it now only deal with the two first layouts, but I guess we'll bump into other problem when I'll reintegrate it ! or maybe not we'll see Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 21, 2020 Share Posted September 21, 2020 I feel like it'd be way simpler to just use CSS grid: See the Pen KKzrBNj?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted September 24, 2020 Share Posted September 24, 2020 Short answer: check out the new version of Flip that now lets you set "nested: true": See the Pen 5e185bb47052e42b61f93687e29c00bf?editors=0010 by GreenSock (@GreenSock) on CodePen Explanation: The challenge in what you were doing was that you had nested elements that were flipping, so when it looks at the end state and figures out where the elements are compared to where they were before the change (let's say container1 is 200px lower and child1 is also 200px lower), and it animates them accordingly. But of course if child1 is in container1, that means that for every pixel we move container1, child1 ALSO moves with it! So the delta of all the ancestor elements must be factored into the childrens' movement. Not a simple task...well, until now. Does that work the way you expected? (note: you may need to clear your cache). 1 Link to comment Share on other sites More sharing options...
GreenSock Posted September 25, 2020 Share Posted September 25, 2020 Also, here's a fork with the more complex functionality (extra button from your original): See the Pen aee24679fa5b33aed5617fab941a11ed?editors=0010 by GreenSock (@GreenSock) on CodePen 🎉 1 Link to comment Share on other sites More sharing options...
jbonlinea Posted September 25, 2020 Author Share Posted September 25, 2020 Hi there, I had to leave that aside for few days, and lucky me you were busy with hevy lifting of the flip plug-in ! The last pen is awesome, I'll complete it with the other functionalities I need and see how ti goes ! Thank's for all the advancement ! 1 Link to comment Share on other sites More sharing options...
jbonlinea Posted September 25, 2020 Author Share Posted September 25, 2020 Back here... 21 hours ago, GreenSock said: Explanation: The challenge in what you were doing was that you had nested elements that were flipping, so when it looks at the end state and figures out where the elements are compared to where they were before the change (let's say container1 is 200px lower and child1 is also 200px lower), and it animates them accordingly. But of course if child1 is in container1, that means that for every pixel we move container1, child1 ALSO moves with it! So the delta of all the ancestor elements must be factored into the childrens' movement. Not a simple task...well, until now. Does that work the way you expected? (note: you may need to clear your cache). yes I totally understand that the reference point of the animation is critical, we can't expect an animation to have the same behavior if the calculation of an element position is relative to it's parent element or to the window, for instance 21 hours ago, GreenSock said: Short answer: check out the new version of Flip that now lets you set "nested: true": Yop In barely one hour I was able to set all the animations we discussed (parent size, css timing, etc) plus some other. The coding was straight froward, the animation flawless, the behavior pleasant, a joy to use and see the result ! For instance, on my whole animation, 50% of the code was to deal with parent height, and involved quite a bit if else if to tests the parameters and do some basic math calculation of the elements height plus margins, it now take two lines ! I hope I havent't been too annoying with my questions, largely due to my lack or knowledge of GSAP, and I'm glad if it provided a good case study to push forward the flip plugin due to my animation "requirements" ! Many thank's for the support and the advancement ! Definitely looking forward for documentation that will permit to better understand what is behind the hood ! but there is already most certainly enough to do great animation super easilly ! What else ? not much, it's just a brilliant plug-in ! Cheers ! 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