ScrollTrigger and Flip help

[K.C.]

Hi,

Flip and/or ScrollTrigger is jumping around and not behaving the way that I want them to.  I'm working on something that sounded simple, but I'm having all kinds of trouble.  So, I'm just trying to move 3 words from 1 layout to another in 2 separate containers.  The first is a grid with 3 rows and 1 column and each word should fit into the grid cell and not overflow (css issues).  The 2nd is grid with 1 row and 3 columns.

Blank grid:  => Filled grid:  One Two Three
Filled grid:  => Blank grid
One
Two
Three
Here is my code pen: 
Any help would be much appreciated!
If at all possible, I'd like the flip to work with the scrolltrigger (scrub), but I was only able to get it to work without the scrub.

See the Pen qEBvvXj by Evil-Donkey (@Evil-Donkey) on CodePen.

[Rodrigo]

Hi @K.C. and welcome to the GSAP Forums!

 

I couldn't really tell you what could be the issue in your demo since I'm not really an expert when it comes to CSS Grid, but this (using Flexbox) seems to work as expected:

See the Pen XJWQGgb by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[GreenSock]

@K.C. you've got some fundamental logic flaws in that approach:

1. You're creating conflicting animations. If the user scrolls back up, for example, you'd have the flip animation trying to animate the fontSize/color and ALSO the scrubbing ScrollTriggered one fighting for control of the same things. The values can't be going to two different places.
2. You're changing the DOM structure itself at a particular spot which would affect where the elements show up. Flip can solve that problem, of course, by applying transforms to make it LOOK like the element is in the previous position and smoothly resuming, but a Flip by its very nature is entirely dependent on where the elements are at in the particular moment. In your setup, you're creating animations that could put the elements almost anywhere, thus you cannot logically have a pre-baked scrubbed animation. For example, let's say the user scrolls when the elements are halfway through their tween...I assume you want the Flip to just naturally pick up from there and animate to the new positions. But what if the user scrolls and the elements are only 25% through their original animation this time...that's a completely different starting point for the Flip animation.  And remember, this is all happening when you're completely shifting the elements in the DOM itself, restructuring the layout very suddenly. 

Is it possible to pull off with enough elbow grease? Maybe...but it'd take a lot of time to figure it all out for you and it's well beyond the scope of help we can provide for free in these forums. Feel free to post in the "Jobs & Freelance" forum. But I'd recommend just rethinking your approach from the ground up. 

[K.C.]

On 4/7/2025 at 1:31 PM, GreenSock said:

@K.C. you've got some fundamental logic flaws in that approach:

1. You're creating conflicting animations. If the user scrolls back up, for example, you'd have the flip animation trying to animate the fontSize/color and ALSO the scrubbing ScrollTriggered one fighting for control of the same things. The values can't be going to two different places.
2. You're changing the DOM structure itself at a particular spot which would affect where the elements show up. Flip can solve that problem, of course, by applying transforms to make it LOOK like the element is in the previous position and smoothly resuming, but a Flip by its very nature is entirely dependent on where the elements are at in the particular moment. In your setup, you're creating animations that could put the elements almost anywhere, thus you cannot logically have a pre-baked scrubbed animation. For example, let's say the user scrolls when the elements are halfway through their tween...I assume you want the Flip to just naturally pick up from there and animate to the new positions. But what if the user scrolls and the elements are only 25% through their original animation this time...that's a completely different starting point for the Flip animation.  And remember, this is all happening when you're completely shifting the elements in the DOM itself, restructuring the layout very suddenly. 

Is it possible to pull off with enough elbow grease? Maybe...but it'd take a lot of time to figure it all out for you and it's well beyond the scope of help we can provide for free in these forums. Feel free to post in the "Jobs & Freelance" forum. But I'd recommend just rethinking your approach from the ground up. 

I'm a bit confused.  Are you saying that you can't flip with a scrolltrigger?

[GreenSock]

6 minutes ago, K.C. said:

I'm a bit confused.  Are you saying that you can't flip with a scrolltrigger?

No, I'm not saying that. Flip just spits back a GSAP animation anyway which you can put into a timeline that has a ScrollTrigger. There are lots of ways to use Flip and ScrollTrigger together in fact. But you're doing some things that fundamentally break the laws of logic, that's all. For example, make the same property to go to completely different values at the same time. 

 

ScrollTrigger and Flip are just tools that are super flexible. You get to decide how you want to use them (without violating the laws of logic) 🙂

[K.C.]

7 minutes ago, K.C. said:

I'm a bit confused.  Are you saying that you can't flip with a scrolltrigger?

Or are you saying that I need to use the data-flip-id?

[K.C.]

3 minutes ago, GreenSock said:

No, I'm not saying that. Flip just spits back a GSAP animation anyway which you can put into a timeline that has a ScrollTrigger. There are lots of ways to use Flip and ScrollTrigger together in fact. But you're doing some things that fundamentally break the laws of logic, that's all. For example, make the same property to go to completely different values at the same time. 

 

ScrollTrigger and Flip are just tools that are super flexible. You get to decide how you want to use them (without violating the laws of logic) 🙂

Of course it's wrong, or I wouldn't be here.  Can you explain what I'm doing wrong?  I'm obviously new to this and am looking for help. 

[GreenSock]

5 minutes ago, K.C. said:

Of course it's wrong, or I wouldn't be here.  Can you explain what I'm doing wrong?  I'm obviously new to this and am looking for help. 

I already explained it above in my first response. Is there something that wasn't clear there? I shared some of the logic issues you're creating with your approach. 

 

I concluded with: "Is it possible to pull off with enough elbow grease? Maybe...but it'd take a lot of time to figure it all out for you and it's well beyond the scope of help we can provide for free in these forums." 

[K.C.]

Can I please get an admin who will help me and not just berate me?  Aren't this public where anyone can read these?

The  first guy tried to help, let me talk to him again.

[GreenSock]

I certainly didn't intend to berate you. Not at all! You're welcome here and of course anyone can chime in and help you if they'd like. I'd encourage it! 

 

We want people to feel well tended to here in the forums...we just have to have boundaries because a lot of times people don't realize how much time they're asking us to spend on their question. It's a little bit like if you went into a mechanic shop with a blown engine and the mechanic says "your engine needs to be replaced..." and your response is "yeah, I don't really understand the engine stuff and I don't want my engine replaced...but can't you just fix it for me please and not charge me anything?"

 

If @Rodrigo wants to chime in with other suggestions, he's totally welcome to. Perhaps I'm missing an easy fix. 🤷‍♂️

 

Either way, though, please know that I want you feeling welcome here and I had no intention of berating you. I was merely trying to explain the reason things aren't working and express that I don't have the time to find some kind of solution that works around fundamental logic problems in your current approach. 

 

Good luck. 👍

[K.C.]

For anyone else reading these.  I'm simply trying to use a pinned, scrubbed, scrolltrigger with a flip animation.  I can do the flip and I can do the scrubbed pin, but I'm unable to do them together.  Is there anyway to do this?

[K.C.]

I'm not sure how that is "fundamentally flawed", but maybe someone else won't think that.  And no, you are not making me feel welcome.  Are you new?

[GreenSock]

1 hour ago, K.C. said:

Are you new?

I'm literally the founder of GreenSock and I wrote the entire GSAP codebase. I've been doing this since around 2007. I've responded over 23,500 times in these forums. 

 

No, I'm not new here 🙂

 

1 hour ago, K.C. said:

no, you are not making me feel welcome.

Very sorry about that. 

 

1 hour ago, K.C. said:

I'm not sure how that is "fundamentally flawed"

I explained this in my original response. You're creating a condition where fontSize must animate to two completely different values simultaneously. How would you expect that to happen? For example, "please set fontSize to 1.5em and also 3.5em at the same time." How could it be both? 

[Rodrigo]

Hi,

 

I updated the demo to use ScrollTrigger, GSAP Context and a single Timeline that is scrubbed with ScrollTrigger:

See the Pen VYwOxyB by GreenSock (@GreenSock) on CodePen.

 

Sorry to hear that you're not feeling welcome here, but let me assure you that these forums are a safe place and sometimes our communication can feel or be perceived as dry or blunt, but there is never any intent on our part to berate anyone. Just a few weeks ago another user got the same feeling for a response I wrote. I've been a part of this community for almost 14 years now and if it wasn't for Jack's (@GreenSock) demeanor and reception I wouldn't have lasted this much. He and @Carl cemented the way we behave in these forums and the standard of the support we provide on a daily basis, but unfortunately sometimes we just can't help every user in the way they need, want or expect. We try to do as much as we can but as humans we have limits based on the rest of the tasks we must tend to and, again as humans, sometimes we made mistakes, but we own and learn from them in order to improve.

 

Finally in terms of your code, my advice would be to simplify as much as possible. My approach is always try the simplest possible solution, the demo I created kind of reflects that, but also is worth mentioning that what you're trying to achieve, while simple in terms of the reasoning which is moving some <h1> from one container to another, is not the simplest thing to achieve and thinking in terms of how Flip works is quite challenging and I know that for a fact, when I first started using Flip it was daunting and confusing at some points, but with practice and perseverance I got to understand the Plugin well enough to help users. If you are just starting maybe try something simpler first and then keep moving up and always check the docs, they are a great learning resource and you can catch some neat tricks from it. It just takes time, patience and dedication to move on and learn from the frustrations.

 

Any questions you have will be answered in these forums, sometimes it can take a bit longer but we'll do as much as we can to help you learn and improve 👍

 

Hopefully this helps

Happy Tweening!

[K.C.]

Hi, I appreciate the reply Rodrigo, This is what I was looking for.

 

Hopefully, it didn't take too much elbow grease or too much time. In terms of doing 2 different fonts, I'm still unsure what the problem is with that. When the text is in the initial grid, it's at 1.5rem. The newer grid has it at 3.5rem. So, it's flipping and one of that states that changes is the font size, the other is color. I figured that Flip could handle those state changes, since I've been able to get them to work before. This code was quickly ported over from svelte into CodePen, because I didn't want to get ridiculed like some of the other posters for not having it.

 

I also thought the code was pretty minimal for what it was trying to do. Could you be specific with the lines of my code that are fundamentally flawed? I would need to know for the future as well as I have people to answer to as well who are curious.

 

To the admin who's not new: Not being new is not an excuse to be rude to those of us that don't know this code like the back of our hand. Pleas use more empathy in the future.

 

On 4/8/2025 at 11:55 PM, Rodrigo said:

 

Sorry to hear that you're not feeling welcome here, but let me assure you that these forums are a safe place and sometimes our communication can feel or be perceived as dry or blunt, but there is never any intent on our part to berate anyone. Just a few weeks ago another user got the same feeling for a response I wrote. I've been a part of this community for almost 14 years now and if it wasn't for Jack's (@GreenSock) demeanor and reception I wouldn't have lasted this much. He and @Carl cemented the way we behave in these forums and the standard of the support we provide on a daily basis, but unfortunately sometimes we just can't help every user in the way they need, want or expect. We try to do as much as we can but as humans we have limits based on the rest of the tasks we must tend to and, again as humans, sometimes we made mistakes, but we own and learn from them in order to improve.

 

Finally in terms of your code, my advice would be to simplify as much as possible. My approach is always try the simplest possible solution, the demo I created kind of reflects that, but also is worth mentioning that what you're trying to achieve, while simple in terms of the reasoning which is moving some <h1> from one container to another, is not the simplest thing to achieve and thinking in terms of how Flip works is quite challenging and I know that for a fact, when I first started using Flip it was daunting and confusing at some points, but with practice and perseverance I got to understand the Plugin well enough to help users. If you are just starting maybe try something simpler first and then keep moving up and always check the docs, they are a great learning resource and you can catch some neat tricks from it. It just takes time, patience and dedication to move on and learn from the frustrations.

 

Any questions you have will be answered in these forums, sometimes it can take a bit longer but we'll do as much as we can to help you learn and improve 👍

 

Hopefully this helps

Happy Tweening!

 

[K.C.]

On 4/8/2025 at 3:41 PM, GreenSock said:

I'm literally the founder of GreenSock and I wrote the entire GSAP codebase. I've been doing this since around 2007. I've responded over 23,500 times in these forums. 

 

No, I'm not new here 🙂

 

Very sorry about that. 

 

I explained this in my original response. You're creating a condition where fontSize must animate to two completely different values simultaneously. How would you expect that to happen? For example, "please set fontSize to 1.5em and also 3.5em at the same time." How could it be both? 

The code isn't setting those simultaneously.  It's setting it to 1.5rem for the first grid and 3.5rem for the 2nd grid.  I'm not sure I see how that is happening at the same time.  Could you point out what you are referring to?  From what I'm seeing, the animation first increases the size of the fonts so that it looks like they grow.  Then, the flip happens.  In one direction, the font size is 1.5rem in the other direction is 3.5rem.  If there is an error, please point it out so that I can address it.  However, the code doesn't appear to be doing what you're claiming it is.  I could be wrong, but you could too.  More information from you could determine that.
 

[Cassie]

Hey! Just jumping in here to say that one of the most difficult things about text-based communication is that people can read messages in tones that aren't intended by the person writing the message.

Quote

because I didn't want to get ridiculed like some of the other posters for not having it.

I can say with absolute certainty that no one here has EVER ridiculed anyone for not having a codepen.

We ask for codepens - yes - that is part of the forum guidelines. Unfortunately we struggle to help when people don't provide code that we can work with. It's very hard to debug without seeing the code clearly. But we haven't ever ridiculed someone for not providing one.

What Jack was trying to explain is that you are setting the font size both in the tweens in the scrubbed scrolltrigger AND in the Flip animation (which isn't actually part of the scrubbed timeline, it's just firing off at that point)

So as you scroll the ScrollTriggered tweens and the FLIP animation are fighting for that property. I explained in the DM i sent you that Flip and Scrolltrigger actually behave in conflicting ways. This is something that trips a lot of people up! Flip is dynamic (the animation values are calculated at the time of the Flip itself) and Scrubbed ScrollTriggers are pre-calculated for performance reasons. It can be tricky to combine them due to that logic mismatch. 

This demo and the one Rodrigo put together show the correct approach - to ensure that all the tweens and the FLIP animation are set on one scrubbed timeline.

See the Pen JjVPyxd by GreenSock (@GreenSock) on CodePen.