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