Timing of css proprety change or two animations ?

[jbonlinea]

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

[ZachSaucier]

Hey jbonlinea. Thanks for bringing this up. This is a good time to use the props property that we just added to the flip plugin. But it doesn't work great with zIndex in your demo so we'll investigate and get back to you.

 

Side notes: 

• Use .addEventListener() to make sure your event listeners don't get overwritten.
• Use let instead of var.
• When making demos, please strip out all of the superfluous stuff (including comments) so that we can help you more quickly. Here's a more stripped version of your demo for example.

[jbonlinea]

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)

[GreenSock]

1 hour ago, ZachSaucier said:

This is a good time to use the props property that we just added to the flip plugin. But it doesn't work great with zIndex in your demo so we'll investigate and get back to you.

Apparently some browsers have started ignoring any zIndex updates that contain decimals. I'll update the next release to always force zIndex to round, but in the mean time you can simply add snap: { zIndex: 1 } to the flip() vars object (or any zIndex tween). Seems to work well in your demo: 

See the Pen 43188ce41661f330ca8fdb1c176b62e1?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

[jbonlinea]

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

 

[ZachSaucier]

1 hour ago, jbonlinea said:

I haven't find any documentation for the flip pluggin

There's isn't any yet - that's what you get for using our beta version pre-release  We do appreciate people testing it and finding cases like this though.

 

1 hour ago, jbonlinea said:

I do not understood what is the props property of the flip plug-in and how it works !

It essentially says, "Hey GSAP, look for these properties (besides things like width/height - it does those automatically) and animate between the differences please".

 

1 hour ago, jbonlinea said:

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 ?

Currently the FLIP plugin doesn't have support for specific timing like this. We will discuss and investigate how we might add support for use cases like that because I can see it being useful for a subset of FLIP animations. 

 

Currently the FLIP plugins animates all values using the same duration and ease.

[jbonlinea]

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

 

 

[GreenSock]

16 minutes ago, ZachSaucier said:

Currently the FLIP plugin doesn't have support for specific timing like this. We will discuss and investigate how we might add support for use cases like that because I can see it being useful for a subset of FLIP animations. 

 

Currently the FLIP plugins animates all values using the same duration and ease.

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. 

 

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? 

 

20 minutes ago, jbonlinea said:

One question how, 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",

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".

[jbonlinea]

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