Jump to content
Search Community

Flip animation : start at curent position

jbonlinea test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

I didn't have time to wade through all the logic in the 200+ lines of code (please try to reduce things to the absolute minimum in the future to increase your chances of getting a good answer), but it looks to me like the problem is that you're creating competing flip animations. In other words, you're calling flip() for the elements to go to one place, and IMMEDIATELY you're also calling flip() on the same elements to go elsewhere. The Flip plugin will check to see if there are any in-progress flip animations on any given element and if so, it'll force them to completion immediately before performing the [new] flip. Trust me, that's a good thing :)

 

You should set up your logic so that you make all your state changes in ONE flip(). Don't fire off multiple at the same time to different places. See what I mean? 

  • Like 2
Link to comment
Share on other sites

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

 

 

 

 

 

 

Link to comment
Share on other sites

Ah, okay, that's because of the fact that apparently absolutely-positioned elements are still factored into the layout of flex parents unless they have a top or left specified. I forced that to happen in the latest Flip which seems to resolve the issue in your demo, right? (You may need to clear your cache). 

  • Like 1
Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

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 ;)

 

 

Link to comment
Share on other sites

Short answer: check out the new version of Flip that now lets you set "nested: true":

See the Pen 5e185bb47052e42b61f93687e29c00bf?editors=0010 by GreenSock (@GreenSock) on CodePen

 

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

  • Like 1
Link to comment
Share on other sites

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 !

 

  • Like 1
Link to comment
Share on other sites

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 !

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...