object-fit how to animate object-fit?

[issam.seghir]

I would like to animate the video by changing the object-fit property from contain to cover. However, the animation is not smooth and there is a noticeable jump. My desired outcome is to have the image container positioned at the bottom of the viewport, then smoothly translate it to the center of the viewport. Once it is centered, I want to scale the container to fit the entire window and then scale it back to its original size of 1. During this scaling process, I also want to adjust the container size to be 100% in terms of both height and width, and set the image object-fit property to cover.

See the Pen ExGGyxw by issam_seghir (@issam_seghir) on CodePen

[GSAP Helper]

Howdy! I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...

 

Keep it simple. Don't list a bunch of requirements ("it should ___ and then ____ and then ___ all while ___ and then ____" - that's too hard to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I animate it to fill the screen on scroll?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 😉

 

Before you know it, things will fall into place one at a time.

 

You might want to look at this helper function: https://greensock.com/docs/v3/HelperFunctions#anim-bg-size

 

And based on your description, Flip plugin might be helpful too. 

 

If you need more help than we can provide in these free forums, you're welcome to contact us about paid consulting services. We certainly want to make sure you get the help you need. 

[issam.seghir]

I gave the bgSize() helper function a try, but it seems to always cover even when I use the toFrom tween. Unfortunately, this problem has occurred multiple times with other properties as well. Please take a look at the codepen example provided above.
this is the output of consol.log when reload the page :

[GreenSock]

Yes, that's because:

1. You didn't follow the directions by feeding in a config object that has the native width/height. 
2. Since you didn't provide a native width/height, it is forced to wait until the image loads before it can determine that automatically, but you're creating your tween and trying to grab that value BEFORE the image loads. If you don't want to provide the native dimensions, you should set up a "load" event listener and only set up your animations AFTER that's done. 

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

[issam.seghir]

thank you  , but this config is not the main problem , my question is about the tween apply style before even the timeline (animaiton start)
and this is happen even in other attributes like height ,
even if i do fromTo { height: 550px , object-fit:contain ... } , { height: 100%, object-fit:cover , top:0}
and in my css : 

img {
  position: absolute;
  width: 100%;
  height: 550px;
  object-fit: contain;
  border-radius: 4rem;
  max-width: 100%;
}

my CSS  style is being ignored by GSAP. It should be applying the style { height: 550px, object-fit: contain... }, and from style { height: 100%, object-fit: "contain", top: 0 }   and apply to  style  { height: 100%, object-fit:cover , top:0}
when I reload the page even the animation doesn't start and even the tween is not its turn to run 
this is which style applied when i inspect the page 
I often encounter this issue in various animations and struggle to comprehend what is happening.

see also: 

See the Pen LYMMqwe?editors=1111 by issam_seghir (@issam_seghir) on CodePen

[The Old Designer]

Not sure why the image needs to be position:absolute? Why not just set the image as a background to the .container then use the CSS declaration 'aspect-ratio: ' to keep the image a constant size and then just animate the container?

[issam.seghir]

1 hour ago, The Old Designer said:

Not sure why the image needs to be position:absolute? Why not just set the image as a background to the .container then use the CSS declaration 'aspect-ratio: ' to keep the image a constant size and then just animate the container?

This is just an example to simplify the animation. If you want to understand how I need it, please see the video animation on this website: https://www.captions.ai/  Please disregard this animation as it does not solve my main problem. The issue occurs frequently with various types of animations. What I mean is that "Gsap overrides my CSS style and applies the tween style before the timeline starts.

[Rodrigo]

Hi,

 

If you inspect that site, you'll see that they are animating the scale of the element not the height and width. Since object-fit takes care of the aspect ratio and everything else you can do something like this:

 

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

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

45 minutes ago, issam.seghir said:

What I mean is that "Gsap overrides my CSS style and applies the tween style before the timeline starts.

I'm a bit confused by this - in order for GSAP to work, it must apply CSS styles inline. If it didn't override normal CSS rules, like classes, it couldn't possibly work. And a .from() and .fromTo() tween renders immediately by default for obvious reasons (otherwise it wouldn't show the "from" state), but you can disable that by setting immediateRender: false. Does that clear things up? 

[issam.seghir]

12 hours ago, GreenSock said:

I'm a bit confused by this - in order for GSAP to work, it must apply CSS styles inline. If it didn't override normal CSS rules, like classes, it couldn't possibly work. And a .from() and .fromTo() tween renders immediately by default for obvious reasons (otherwise it wouldn't show the "from" state), but you can disable that by setting immediateRender: false. Does that clear things up? 

look if i use a timeline like this : 

tl.to(...)   // (1)
    .to(...)  //(2)
    .fromTo("section", { opacity: 0, height: 50%  }, { opacity:1, height: 100%  })   // (3)

the expected behavior is as follows:
when scrolling to the section that triggers the animation, the first tween (1) should run first, followed by the second tween (2), and then the third tween should start from {opacity: 0, height: 50%} and apply the animation, resulting in the final style of {opacity: 1, height: 100%}.

when opening the page without scrolling to the section that triggers the animation. In this case, the timeline does not begin yet, and the question arises as to what CSS style is applied to the "section" when inspected.
Is it the style from the CSS file or the style (from)To {opacity: 0, height: 50%}?
 The expected behavior would be for the CSS style to be applied from the {opacity: 0, height: 50%},
 but when inspecting the element, it is found that an inline style from GSAP is applied, specifically {opacity: 1, height: 100%}.
The animation has not started yet since scrolling to this section has not occurred, but the final style, which should only apply after the animation ends, is being applied all the time.

because it is an inline style that overrides my CSS style. Please refer to my previous replies for further clarification. I hope you understand the problem, as it has been happening to me frequently and has left me confused as to why GSAP behaves this way.

note: my CSS apply to this "section" is the same as (from)To style: { opacity: 0, height: 50%  }

[mvaneijgen]

Do you have a minimal demo for this? That makes it so much easier to talk. 

 

1 hour ago, issam.seghir said:

when opening the page without scrolling to the section that triggers the animation. In this case, the timeline does not begin yet, and the question arises as to what CSS style is applied to the "section" when inspected.

 

The .from part of the .fromTo() tween will be applied, because GSAP will record the values on page load, so that it only has to tween the animation when it needs to and doesn't need to calculate and tween at the same time. 

 

See the Pen RwEvjqm?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

 

You can set immediateRender: false, to the tween as you can see the CSS will then be applied until it gets triggered. This will result in a jump as you can see and is usually not what you want.

 

See the Pen MWZLrWO?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

1 hour ago, issam.seghir said:

note: my CSS apply to this "section" is the same as (from)To style: { opacity: 0, height: 50%  }

 

This is a mistake a lot of people make when starting out with GSAP, .fromTo() is something you almost never need. The browser has a lot of default eg opacity: 1 is the default, so you don't have to tell GSAP to animate to it, you can just tell it to animate .from()  opacity:0 and it will animate the de browsers default, eg 1

[The Old Designer]

 

3 hours ago, mvaneijgen said:

 

The .fromTo() was a mistake I made when I started with GSAP as @mvaneijgen said you rarely need it, now I use just .from() or .to() and so far even as a pretty useless coder when it comes to javascript I have managed to make nearly everything I have tried work.

[issam.seghir]

forget about fromTo()  and forget about opacity, please don't focus on the animation itself and focus on the main problem;
to understand me clearly I cooked this demo, using.to() tween only:

See the Pen WNLPMZY by issam_seghir (@issam_seghir) on CodePen

this is a vertical progress bar, the default height of all these bars is: 35% of the container, except for the first one is 100% height
It looks something like this: 

NOTE: (don't focus on the height attribute is just an example it can be any CSS attribute)

so the animation works like this: 

As I scroll to the pinned section, the first bar height decreases from 100% to 35%, simultaneously the second bar height increases from 35% to 100%.

tl.to(".progress-bar:nth-child(1)", { duration: 4, height: "35%" }) // from 100% to 35%
  .to(".progress-bar:nth-child(2)", { duration: 4, height: "100%" }, "<") // from 35% to 100%

and the same repeat for the rest of the bars until the end of scrolling:
so, the final result its something like this: 



so, when I open the page and not scrolling yet to start this progress bar animation, what is the expected style to apply to all bars?
if you follow what i say the expected style is : 
" the default height of all these bars is: 35% of the container, except for the first one is 100% height" 
but when i opened the page and inspected the bars i found something like this : 

[issam.seghir]

I still look at the progress bars and the height is not what I see in my CSS : 
I don't use from or fromTo() tweens, where Gsap found this style, and why is applied to my bars and override my CSS !!

[mvaneijgen]

It seem like the padding you're adding to your .container is is causing that issue. I have no idea why, but If I remove it the issue goes away.

 

See the Pen OJrdwxe by mvaneijgen (@mvaneijgen) on CodePen

 

There are some properties your are better of not animating, width and height are some of them. If you change the it to scaleY, which will be much more performant there is no issue at all 

 

See the Pen OJrdwze?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[issam.seghir]

Thank you for your advice, but I've mentioned several times in this question form  "NOTE: (don't focus on the height attribute is just an example it can be any CSS attribute)"
Why do I say that? I've also mentioned the reason: "The issue occurs frequently with various types of animations.'"

I want to clarify that my issue is not related to the height, opacity attribute, or any other attribute used in my example. I have provided multiple examples to help you understand the main problem.
on my website, I have several animations with different CSS attributes likebackgroundSize, and I'm only using the to() tween for this particular type of animation

In the example, everything appears to be normal with a simple animation. Therefore, I don't believe the issue is related to my CSS or JS code. Instead, I suspect the problem may be from the GSAP part.
 

Regarding the padding in the section, I'm uncertain why its removal seemed to work, but it neither resolves nor explains the problem adequately. Are you suggesting that we should avoid using padding? That seems impossible.
To confirm, I've also observed the same peculiar issue in animations without padding in the container. 
 

The only notice I can add is that i think the problem seems to arise when using percentage values. It's possible that GSAP encountered difficulties in calculating these percentage values, resulting in the addition of an inline style with a different value ..., what do you think ? 

 

[mvaneijgen]

11 hours ago, issam.seghir said:

"NOTE: (don't focus on the height attribute is just an example it can be any CSS attribute)"

With the examples I've posted I can see it ONLY happening to height, so I'm not sure what you mean by this. 

 

11 hours ago, issam.seghir said:

Why do I say that? I've also mentioned the reason: "The issue occurs frequently with various types of animations.'"

We can only debug minimal demo's, so please show us with which properties it also happens, but as far as I've debugged I see it happening in your height examples and if I change that to scaleY it doesn't happen, so it again ONLY happens with height.

 

11 hours ago, issam.seghir said:

Regarding the padding in the section, I'm uncertain why its removal seemed to work, but it neither resolves nor explains the problem adequately. Are you suggesting that we should avoid using padding? That seems impossible.

It seems to be an issue in this particular case, that is not a globalisation that you never should use padding. Probably wrapping the element in an extra div and putting the padding in there solves the issue and changing box-sizing would probably also fix it (https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing), 

 

11 hours ago, issam.seghir said:

The only notice I can add is that i think the problem seems to arise when using percentage values. It's possible that GSAP encountered difficulties in calculating these percentage values, resulting in the addition of an inline style with a different value ..., what do you think ? 

It is important that the values you tween between are of the same type, eg you can't tween between 80px to 80% or you can, but it will then not look like you want it to. This is only an issue when you tween between string based values, which only are used on a view properties, so again, show us with which properties you have issues and if you have an issue with a particular property there is probably a better property that does the same thing eg with height and scaleY.

 

As a last note it is also a good idea when working with GSAP is to not set things in CSS you want to tween with GSAP, just let GSAP handle everything. This way you only have to update values in one place when things change and because you know their starting values it is really easy to change with a .from(). That is something I've noticed in all your code you've never used a .from() tween and in my opinion that is the most important one, eg in all my code that 80% of them are .from() tweens. 

[GreenSock]

I spent a few hours digging into this and I discovered that this would only happen when you're animating width/height to a percentage-based value inside a container that has padding and/or is flexbox/grid and the element doesn't have the property already set inline to start with. Very specific edge case. I'll spare you the long and complicated explanation as to why this was happening.

 

It is patched in the next release which you can preview here:
https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

But @Rodrigo's and @mvaneijgen's suggested workarounds are excellent in the meantime. 

[issam.seghir]

@GreenSock Thank you so much for taking the time to discover and address the issue. You are an amazign team and support 😊 .
I was wondering if I could animate the height and width in the next release without any problems ?  I understand that it's not recommended to animate these attributes, however, sometimes I need the element to be relative to the container and scaling doesn't help in such situations.

[GreenSock]

@Rodrigo provided a solution even with the current version that allows you to animate the height, yes - just do a .set() first to establish the inline style. And you can try that beta version of the next release to verify that it does indeed animate the height/width the way you'd expect, but please let us know if you notice any odd behavior.