Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

4 Newbie

About jbonlinea

  • Rank
    Advanced Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Hi there I kind of knew I'll bump into this issue and after a long search in the forum I haven't found a clean solution yet. I do have two element that are animated using gsap.flip. the animation can be trigged when clicking on the button. Theses elements may also be dragged, and there are no issue with dragging them, per se. When the elements haven't been dragged, the animation works fine. However, once an element has been dragged, it's position after the animation is wrong. Indeed, the animation resize the element, but not to replace it where it would be if it hasn't been dragged before. The workaround I wanted to implement is to first "reset" the element position where it was before is had been dragged, then animate it. I do know how to define/record an element position with jquery, and send it back there, however it is not animated. I know I can place it in a flip animation, but I don't need it to go back to it's position before "basic" animation starts. The idea is the to animate to from where it is after being dragged to where it would have been if it hasn't been dragged The question is thus double : First, how to animate a element so it get back to the position it was before it was dragged (ever the many in between dragged position do not matter). Second how to animate an element so that it is lead to the same position whether it has been dragged or not. The Pen above provide the animation which show the stat/end position of the element , and thy are draggable. Hope I'm understandable Thank's in advance for your guidance
  2. Back here... 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 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 !
  3. 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 !
  4. yes I have to dig into that, I'm not sure how to implement it yet but it seems to be the key Oh, oh I got it know ! totally make sens thank's I thought that props was playing the animation of given properties one after the other, or with some timing somewhere, but no that I got the above I get that to many thank's for the explainer, and again sorry for being such a gsap noob and digging straight into flex animation (not the easiest) and beta plug-in ! At least I understand the javascript going on and have a pretty precise idea of what I want to acheive Regards
  5. 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
  6. Ok cool ! no worries about the doc. I know where I step and you know your plug-in and support very well I'm just a bit frustrated not to be autonomous and bother you with question I may avoid with some doc or a full feature plug-in, but hey, it work's awesomely considering the learning curve ! One question thow, if we have three css properties, can we list them in props so they are launch in three phase ? and should we do it like props: "zIndex, backgroundColor", or like props: "zIndex", props: "backgroundColor", or differently ? I'm thinking of a dumb property like background-color change, the color change but the opacity was and remain zero, we can play 2/3 1/3 ... anyway I'm more concerned about how to intertween animation as this could work to time and target changes in a more extensive manner like I'm trying to achieve here
  7. That's brillant ! But I have no clues what's going on 😆 😭 More seriously, I haven't find any documentation for the flip pluggin, assumed there isn't any yet, and did not spend to much time trying to figure if it how it was linked to the flip helper, that I haben't studied neither, my bad. The thruth is I do not understood what is the props property of the flip plug-in and how it works ! the follow up question of the stupid is, what if I want the css property to start it animation 2/3 after the begining and not 1/2 after the main animation ; what I have three css properties and want to time them ? I mean, I see that you've added line 14 and 15, I've read that all Css properties like background-color should be camel cased backgroundColor, but why props : zIndex delays it within the animation and why of half its duration ???? Sorry for that lame question ! and huge thank's for the development and support of gsap
  8. Ok that's fine ! I'not sure myself if the wish to time css properties is a because I'm lazy building css class and animation for each, or if actually is the best way to approach it ? Now let's say I have two class, respectively redefining position and z-index If I want the second class to change later, I have to create two animation. ok, but I 'm kind of bumping into a problem similar as the one described here so maybe the follow up will be there, an not here as this question has a stable answer (not how to, but what we can and can't)
  9. 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 https://codepen.io/jbonlinea/pen/qBZQXEY?editors=0011 Hope I'm understandable and that I took the right approach ? Thank's in advance
  10. 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
  11. hi there I wonder if it is possible to "time" the change of a css property within a css class ? Let me explain what I mean : I have a pen with a button, on click it toggle a css class on an element this class contain two css properties there is a flip animation to animate the change of the css class but all the properties are changed at the same moment (on click, no delay) and have the same duration is it possible, within a single animation to define that a property of the class is done in a certain manner (delay and duration) and a second property of the same glass is done in a different manner ? Or do I have to create two css class toggled with animations within a timeline ? in my example, I would like the position to start changing on click, but the Z-index to change only at the middle of the animation And for the sake of learning, what woud be the best way to implement that ? I do have few ideas on how to run two animation in a row, it' really for the books, I mean doing it the right way gsap would like, for stability, replicability and posterity thank's
  12. 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
  13. 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
  14. yes I've seen, and and I've also read the doc, really, really seriously, but I still don't get what to change to migrate this piece of code But we may forget it for now, and I may come back with an other pen that need migration if I bump into issue again transform: node._gsTransform, x: node.offsetLeft, y: node.offsetTop, node