[GS animation in Iframe : dynamic iframe-resizer size set to 0 durint GS animation]

Just for info, I have found a solution by changing height calculation method in iframe resizer

 

Thank's for your input anyhow

[GS animation in Iframe : dynamic iframe-resizer size set to 0 durint GS animation]

3 minutes ago, ZachSaucier said:

Ya, I would not choose an iframe for those reasons. iframes are by nature very separate from your other page. It doesn't make sense to have regular page content in an iframe.

well the fact is that it is not really regular content

[GS animation in Iframe : dynamic iframe-resizer size set to 0 durint GS animation]

Hi

 

30 minutes ago, ZachSaucier said:

Hey jbonlinea. I've never heard of iframe resizer. This is definitely not a support forum for it  But if you make a clear, minimal demo of the issue perhaps we can take a look.

 

Yes no worries I knwo it is not a pure GS issue, but see below

 

30 minutes ago, ZachSaucier said:

Why do you need to use an iframe at all?

 

portabiity, scalability, maintenance, etc.

or maybe I could go with a php script that append an external html... that might be better actually

 

30 minutes ago, ZachSaucier said:

I'm not sure exactly what you mean by "this", but the chances that the issue stems from GSAP are very small. It's likely some issue related to the resizing script or the iframe telling GSAP the wrong dimensions or something.

 

"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

[GS animation in Iframe : dynamic iframe-resizer size set to 0 durint GS animation]

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

 

[Draggable jumps on first click after animation]

2 hours ago, GreenSock said:

Looks like that was already fixed in the upcoming Draggable which you can preview at https://assets.codepen.io/16327/Draggable3.min.js

Indeed,  excellent !

thank's

[Draggable jumps on first click after animation]

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

 

See the Pen MWyqrML?editors=1010 by jbonlinea (@jbonlinea) on CodePen

[CSS parameter : change during the animation]

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

See the Pen 38e53f4da66c134a385f3d74dec6374f by GreenSock (@GreenSock) on CodePen

[Animate element after drag : animation end position relative to element start position]

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

[Animate element after drag : animation end position relative to element start position]

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

See the Pen vYGzjeN?editors=0111 by jbonlinea (@jbonlinea) on CodePen

[Flip animation : start at curent position]

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 !

[Flip animation : start at curent position]

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 !

 

[animate flex-intem resize on flex-direction change]

ok thank's for the update !

[Timing of css proprety change or two animations ?]

1 minute ago, GreenSock said:

If you want to customize timings of various things that aren't directly related to positioning/size, that's easy - just do it with your own tweens. Remember, gsap.flip() returns a timeline, so you can even nest them in there if you want. In fact, you can return a tween/timeline in your change() function and it'll automatically nest that for you.

 

yes I have to dig into that, I'm not sure how to implement it yet but it seems to be the key

 

 

 

1 minute ago, GreenSock said:

And to be clear there was nothing fancy about that zIndex stuff where it was timing things to happen at exactly 50% through the animation. It's just that the zIndex was animating from 100 to 200 in one, and the inverse for the other, so of course they'd cross in the middle. Make sense?

 

Oh, oh I got it know ! totally make sens thank's

 

 

1 minute ago, GreenSock said:

I'm not sure what you mean by "three phase", but to tell flip() what CSS properties to interpolate (beyond x/y and width/height or scaleX/scaleY), you just do a comma-delimited list like props: "zIndex,backgroundColor".

 

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

[Flip animation : start at curent position]

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

 

 

[Timing of css proprety change or two animations ?]

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

 

 

[Timing of css proprety change or two animations ?]

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

 

[Timing of css proprety change or two animations ?]

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)

[Flip animation : start at curent position]

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

 

 

[Flip animation : start at curent position]

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

 

 

[Timing of css proprety change or two animations ?]

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

 

 

 

See the Pen vYGzjeN by jbonlinea (@jbonlinea) on CodePen

[Flip animation : start at curent position]

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

 

 

 

 

 

 

[Flip animation : start at curent position]

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

[migration to gsap3 -> _gsTransform]

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

[Iframe in Draggable]

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

 

[migration to gsap3 -> _gsTransform]

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