FLIP is adding unwanted Y translation on an element during animation

[chubi-x]

I'm trying to animate the width of an element using ScrollTrigger and FLIP. It works fine except that on certain viewport widths it adds an unwanted Y translation on the element, usually something like translate3d(0px, -74.8404px, 0px);I first noticed this behaviour after opening up dev tools and refreshing the page (essentially resizing viewport).
I also noticed that this might be related to the grid-template-columns of the the parent element which sets the target element to take up min-content. the translation isn't added when i use a fixed width but that causes the image to grow to fit a static layout instead of the layout changing as the image grows. I have attached a codepen link and screenshots of current behaviour and expected behaviour.

Thanks and looking forward to a response from the good people of GSAP!!

Note that this tends to happen after resizing the viewport and refreshing ( i am yet to make it responsive). it happens with viewports about 600 pixels wide so the bug might not show up in the codepen embed.

 

 

See the Pen ExzydNd by michaeladejoh02 (@michaeladejoh02) on CodePen

Edited May 23 by chubi-x

[Rodrigo]

Hi @chubi-x and welcome to the GSAP Forums!

 

The reason is very simple and it comes with some extra advice:

As you can see in the image, the start position of the ScrollTrigger configuration has already been passed, so the animation is already being scrubbed, that's why the clamp functionality was added (expand the View More details link and scroll a bit to see how it works. Also there is a video where @Cassie goes into a lot of detail on the subject):

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#start

 

Also you're adding ScrollTrigger configs to Tweens that are nested in a Timeline. That  creates a logical issue as explained here:

https://gsap.com/resources/st-mistakes#nesting-scrolltriggers-inside-multiple-timeline-tweens

 

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!

[chubi-x]

On 5/24/2024 at 1:32 AM, Rodrigo said:

Hi @chubi-x and welcome to the GSAP Forums!

 

The reason is very simple and it comes with some extra advice:

As you can see in the image, the start position of the ScrollTrigger configuration has already been passed, so the animation is already being scrubbed, that's why the clamp functionality was added (expand the View More details link and scroll a bit to see how it works. Also there is a video where @Cassie goes into a lot of detail on the subject):

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#start

 

Also you're adding ScrollTrigger configs to Tweens that are nested in a Timeline. That  creates a logical issue as explained here:

https://gsap.com/resources/st-mistakes#nesting-scrolltriggers-inside-multiple-timeline-tweens

 

Here is a fork of your codepen:

 

 

 

Hopefully this helps.

Happy Tweening!

Hi @Rodrigo. I've applied the suggestions you made but i'm still getting the same issue. Here's a link to the updated pen:
 

[Rodrigo]

Hi,

 

I just checked your codepen demo from the first post and it seems to be working as expected when using clamp(). What exactly is the issue you're seeing after applying the changes I suggested?

 

Happy Tweening!

[chubi-x]

can you try opening the demo in fullscreen and try resizing the viewport and then rerunning the pen? When i do that I get the original problem as stated in my first post

[Rodrigo]

Hi,

 

Yeah I see that. Unfortunately I'm not well versed in CSS Grid, I'm more a Flex person TBH, but this seems more like a CSS issue rather than a GSAP related issue.

 

I created this demo using Flex and it works as expected:

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

 

You should take a look at your setup and find a way to adjust your styles in order to make this work.

 

Hopefully this helps.

Happy Tweening!

[chubi-x]

11 hours ago, Rodrigo said:

Hi,

 

Yeah I see that. Unfortunately I'm not well versed in CSS Grid, I'm more a Flex person TBH, but this seems more like a CSS issue rather than a GSAP related issue.

 

I created this demo using Flex and it works as expected:

 

 

 

You should take a look at your setup and find a way to adjust your styles in order to make this work.

 

Hopefully this helps.

Happy Tweening!

Thanks Rodrigo. I've moved on now as this was becoming a blocker but will definitely reevaluate my setup when i get back to fixing it.