Flip pluggin, scroll triggered flexboxes

[JosieLearnin]

Hello, 

Im new here, glad to enter the GSAP community
I have an issue that Im trying to fix since quite a white, 

The idea would be to have a flex box, flex-direction column (with a certain font-size) that flips to flex-direction row (with new font size) on scroll, for now I use the appendChild method but im not sure its the best...

Also the animation make the text go out of the viewport while its suppose to be sticky (header to be) and, the cherry on the cake, I would like it to be working with the scroll, I found an example here 

See the Pen vYppeBE?editors=0010 by scottnj (@scottnj) on CodePen

 but i cant figure it out with my work, as I said, new to GSAP.. 

Thanks a lot to anyone who could have an idea on how to make it work smoothly, that would be wonderful, 

excuses in advance, if I didnt post in the right section or the right way

Have a great day, 

Josie

See the Pen wvOMzNX by josielearnin (@josielearnin) on CodePen

[GreenSock]

Welcome to the forums, @JosieLearnin

 

I'm not entirely sure what you're looking for, but here's an example that does that Flip animation when the trigger becomes active: 

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

[JosieLearnin]

Thank you so much for answering, its already way way better !

 

In an ideal coding world I would love to be able to control text movement proportionally to scroll, like the animation would be complete when end reaches scroller-end but in the mean time movement can stop and scrolling back we could have it back to column

At some scroll point the user could stop for example in the position in the screenshot  (not ver aesthetic at the moment, I admit) if he stops scrolling.

 

This example is a very good illustration of the scroll dynamics I would want to reach

See the Pen bGxOjeP by GreenSock (@GreenSock) on CodePen

 

Should I change my appendChild method and go back to, according to this example, for example       
onLeave: () => {
        intro.classList.add("row"); 

       intro.classList.remove("column"); 
      },

(with the according classes declared)

 

Or is there a way to do it with the method I already have (appendChild)
Thank you again, 
J

 

 

 

[JosieLearnin]

I managed to do this with OnEnter / OnLeave

See the Pen GReoOpa by josielearnin (@josielearnin) on CodePen

 

But I still have few issues... 

Why does my container not pin to the top during the animation ?

And it seems that when the page loads, it loads in row, then goes to column, then to row on scroll, but i guess its an issue with my toggle function, but changing it makes the animation crash...

(and it still  would be perfect if my "virtual play head" could follow the advance of my scroll, like 10% scroll, 10% animation played)

Also maybe there is a better way because I know we are not suppose to use Tween method anymore 🙈 (old topics helped)

Again, thank you so much for your time
J

[Cassie]

If you want it to pin to the top you'll need to change your markers. Here's an example using FLIP, in your previous pen you're kinda reinventing the wheel and doing what flip does under the hood, that was likely from an old pen made before FLIP plugin existed. 💚

See the Pen GReoxjb?editors=0011 by GreenSock (@GreenSock) on CodePen

✨ Tip - You can set markers:true to debug.

 

In your example your start point has already been 'passed' so the animation plays on load. 
 

Quote

(and it still  would be perfect if my "virtual play head" could follow the advance of my scroll, like 10% scroll, 10% animation played)

 

Scrubbing is possible but scrubbing and FLIP are inherently going to fight with each other as one is a stored pre-calculated animation which gets scrubbed, and the other (FLIP) is very dynamic in nature, grabbing state at any given time and animating between states. So everything would need to be recalculated on window resize or whenever the DOM changes in any way.

That's what this pen is doing, it's storing the animation in a context and then reverting and recreating it.

 

See the Pen bGxOjeP by GreenSock (@GreenSock) on CodePen

 

This one is particularly tricky because of flexbox too - I gave it a go but I'm really not sure how to get around the fact that the classes have changed? FLIP tries to put the elements back, but there are different flex rules in place which break things. Maybe someone else can jump in?

See the Pen KKEVoqa?editors=0011 by GreenSock (@GreenSock) on CodePen

[GreenSock]

Like @Cassie said, Flip effects are typically for very dynamic situations where you immediately capture the state, change it, and then animate to the new state (and you're done), but it looks like you're trying to go backwards again and scrub that animation, reusing it over and over. The issue here is that Flip intentionally removes the position: absolute on the elements when the Flip animation completes. So then when you're scrubbing backwards, those elements don't have position: absolute again. You can use an onUpdate to sense that and fix it: 

See the Pen WNmwXRv?editors=0110 by GreenSock (@GreenSock) on CodePen

 

But again, that's not typically what Flip is for, especially because it isn't really responsive since all the positioning is grabbed at the time you start the animation, thus if you resize the window that could change. You could work around that in various ways, but I just wanted to make you aware of it. 

[JosieLearnin]

Hello !

Thank you so much for your answers, 

Im so sorry i didnt get your answer notification @GreenSock and was working hard by my side to get and post a well updated answer / situation to @Cassie and her very didactic and helpfull proposition 💚 I was still lost  (and checked my mail to find back that post and saw the notifications !) but learned quite a lot about GSAP since 

In any case thank you so much that's exacly what i was looking for !! Just for science, what would you have used in the case where the main expectations would be both, that smooth flip action, but with a scrub true and the ability to go backward and forward ? 

A million thanks to you both for your help, can wait to keep progressing with GSAP 🌱