jbonlinea

Just for info, I have found a solution by changing height calculation method in iframe resizer Thank's for your input anyhow

well the fact is that it is not really regular content

Hi Yes no worries I knwo it is not a pure GS issue, but see below portabiity, scalability, maintenance, etc. or maybe I could go with a php script that append an external html... that might be better actually "this" is iframe size perceived as being 0px for some time during the animation. the ifrrame resizing script do not speak to GSAP, basically the iframe-resizer has a script in the host and in the child and they speak togather GSAP is changing page height, which is the data read by iframe resizer. knowing some bit of GS behaviour may help, for instance my animation use the flip plug-in, and as I understood GS knows the start and end size before starting to move things Here is a demo with iframe resizer here is the animation alone the vertical arrow do not change page height, the horizontal one do change page height Althous the intend of both is not to change height but move dom element which result in page height change

Hi there, I'm throwing a bottle in the sea, without codepen as this involve iframe, but we could share code diferently afterward. Basically I have a GS animation (awesome one actually), which involve some resizing of the main content div. This all works great. Then I placed the page containing my animation into an Iframe, also no issue on a technical standpoint. But as the animation resize the content of the page, having an iframe with a fixed height is not nice at all, design wise at least. So I added the js library iframe resizer to handle the resize. Which works, to a certain extend : at load the iframe size is spot on, when I start the animation, the iframe height is set to 0px; after a certain amount of time* the iframe size it back to normal, here normal is not the size it had before the animation, but the size it should have once the animation if finished. More technically, iframe-resizer console log that (for the key logs) : mouse down on the iframe --> basically clicking on a button that start the animation mouse up on the iframe --> follow up of above send a request to the iframe content get a response from the iframe content set iframe size to 0px then say : "Hidden iFrame detected, creating visibility listener" then iframe-resizer routinely check if the iframe content has changed, and retunr no, untill some point in time when it again send a request and get a response from the iframe about the size set the iframe height to it's "final height" to baiscally stat and end size are ok, but in the meantime size is 0px, and it only get to its realy size a long moment after the animation is over. The question are : is there anything is GS that may cause this, as in my case the content of the iframe is never 0px in height have you any similar exeprience, with iframe resizer, or any other way to wrap an animation in an iframe and have a decent front-end result. any idea how to fix that Regards

Indeed, excellent ! thank's

Hi there, I've been adding drag functionality to a pen we've been busy with recently. Broadly speaking it works but the draggable element jumps on first after the animation, only if a bounds is defined ?! To reproduce the issue Dragg the small div --> all is fine, Click on swich pip order --> click and hod on the "new" small div, like if you were planing to drag it, but don't drag it==> you'll see a transform is applied, the small div jumps some pixels toward the right and the bottom ; Note that this jumps only occurs when dragging after the animation; once you have dragged the element once it won't jump anymore until you run the animation If you remove the bounds line 45, the element do not jump anyore... ?! thank's for your attention

Hi, in order to provide a smooth feedback to the user, I wanted to change some CSS parameter during the animation. When static, my element have an opacity of 1, but I would like their opacity to be 0.5 during the animation. Well obviously I would like the opacity to go from 1 to 0.5 and back to 1 during the animation. After some search on the forum I couldn't come up with a better solution than that : toggle a/some class.es that contain some transform with duration and delay to time the change. However it seems very inelegant, and problem prone. Is there a proper/elegant way to implement this with gsap or idealy within a flip animation set with the flip pug-in ? on the pen attached, the opacity change would apply to the .box elements Thank's in advance for your hindsight

hi, Thank's for your prompt reply ! First was aware that dragging an element is exactly like applying a transform that's why I could think of a workaround buy "removing" the applied transform through jquery before running the animation. But... So, yes it totally make sense, in a way, but from an other perspective not so much. let me explain : It seems it is all about the way gsap.to or gasp.fromTo works. If the destination "to" of the animation is calculated like "take this element and move it 200px left" then the result if different than if the destination "to" is "take this element and place it there". So yes there is a transform after an element has been dragged, but it relate to the actual position so it may affect the animation "from", but not necessarily the "to". In the end, I do understand what you have done, reset props, which is pretty similar, with gsap mindset, to what I had in mind (reset element position with jquery before the animation) , but not really why the animation takes the "from" into account this way while I only specify the "to" Again thank's for your support

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

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 !

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 !

ok thank's for the update !

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

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

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

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

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)

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

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

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

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

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

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

Hi there I'm facing the same issue as describe above, and see that all the pen that solved the issue are brocken now Any update on that topic ?! If no I may well send new pens to display the issue I encounter Cheers

Hi the answes is yes and no No, I don't, basically since i don't mind this pen anymore since I go with the other one, much simplier and at least as efficient. Yes, because many pens still use the older syntax, and I stil havent figures out how to change this specific peice of code into the new one, so the issue will probably rise again soon or later ! transform: node._gsTransform, x: node.offsetLeft, y: node.offsetTop, node