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?

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.

Baby steps, but I am aware and it's something on my list of pursuing for additional improvements as well. If you have any recommendations, I'm all ears I've implemented the approach you suggested and noticed that any property which can be managed through matrix3d() is combined into a single definition, which I was unaware of until now! Thanks for the recommendation and I'm already noticing an improvement in the scrolling experience.

Hi all! I'm working on finding the "best way" to approach animating the width of an object using the current implementation of GSAP TimelineMax paired with ScrollMagic: https://gist.github.com/jodriscoll/bda71b0245776294779cc1f9573186cd As most of you may know, animating the width of an element does not leverage the GPU, causing a reflow of the DOM, which is bad for performance, can break with bad JavaScript, reduces the 60hz/fps target, etc., etc. Unfortunately, I noticed the way the TimelineMax animates an object's property is through transform: matrix3d(). Which in turn, prevents the explicit usage/designation of transform: scaleX() to alter the width to/from through the TimelineMax().to properties. A summarized snippet of where I'm managing this configuration can be seen below: // ... const ScrollLines = new TimelineMax() .to( animate.down, 1, { x: animate.neg, y: animate.pos, width: 0, repeat: 1.25, ease: Sine.easeOut, yoyoEase: true }, "together" ) .to( animate.up, 1, { x: animate.pos, y: animate.neg, width: 0, repeat: 1.25, ease: Sine.easeOut, yoyoEase: true }, "together"); // ... Actual question: Is there a way to alter the width of an element while still utilizing the core matrix3d calculation in TimelineMax? You can see the current implementation of this animation on youcanwa.org, or view the demonstration here. Any suggestions or help would be much appreciated!