Does IE/Edge animate calc() CSS specs appropriately?

[jodriscoll]

Is there an appropriate location for general CSS / Animation inquiries on GreenStock.com? I have a challenge or two that I'm scratching my head over and I'm not sure if it is appropriate to ask the question on your forums or somewhere else?

 

I've had luck in the past with inquiries pertaining to GSAP, but wasn't sure if your community also provided general animation questions. As always, I'm aware of StackOverflow, but, I was hoping there was a more faceted area for conversation/dialog.

 

Thanks ahead of time and apologies if this isn't the appropriate place to ask!

 

The codepen is relevant with the #3 post below.

 

See the Pen wRpQOw by jodriscoll (@jodriscoll) on CodePen

[GreenSock]

We really try to keep these forums focused on GSAP-specific questions if at all possible because we just don't have the resources to provide free general animation consulting services, but it's okay to post a question here as long as you adjust your expectations (you might not get an answer). We do encourage the community to chime in and share knowledge and we want this to be a welcome place for all...we just try to manage expectations. Our goal is to underpromise and overdeliver  

[jodriscoll]

Thanks for the go-ahead!

 

Problem:

I'm working on a "sidewards blind-like" animation behavior, where when a user hovers over an object (anchor), it expands the object (anchor) in width and creates a perception of showing more of the objects contain within (think of a clipping mask of sorts).

 

Initially the video/image object is styled in a way to prevent it from moving 1:1 with the "clipping mask" (anchor wrapping the video/image). Meaning, it is already offset to the position it should be when the user hovers over the anchor.

 

Both the image and the video are initially styled to fill the entirety of the anchor AND the gutter gaps; this helps when animating to create the perception that we're just showing more of the photo, no actually resizing it and causing it to move on screen (sorry, that might be confusing...):

left: -24px;              // the width of each gutter gap
width: calc(100% + 48px); // fill the parent + fill the gutter gaps

 

When the user hovers over the anchor, the child elements change their CSS specs to:

left: 0;     // stay flush with the anchor object
width: 100%; // fill the parent, which now includes the gutter gap(s)

 

Everything appears to work correctly when viewing the animation behaviors on Chrome / Safari / Firefox:

• http://svg-gmmb-cis.pantheonsite.io/wp-content/uploads/2019/01/debugging_animations.mp4

 

Unfortunately, there is a slight hiccup on IE11/Edge:

• http://svg-gmmb-cis.pantheonsite.io/wp-content/uploads/2019/01/IE_animation_bug.mp4

 

Questions and hopeful helpful insight towards reaching an answer:

- After viewing the animation glitch, does IE11/Edge have issues with animating CSS measures using `calc()`?

- Do I need to create a CSS animation with keyframes to remedy this hiccup in IE11/Edge?

- Am I approaching this wrong and should be animating different properties?

- I attempted to replace the behavior with a @keyframe animation, but, it didn't behave how expected on initial implementation; should I revisit this?