jphilung

Hello, I have an animation which makes use of the TimelineMax.addCallback() method. I would like to reverse the timeline animation which requires that I reverse the callback method. What would be the way of detecting that the timeline is playing forward ( TimelineMax.play() ) or backwards ( TImelineMax.reverse() ) in my callback function ? Thanks !

I am working on a reveal effect to show a frame over another one using clip-path either an inline SVG with <clipPath> or with a CSS shape and basically animating the reveal. On the Codepen: * Left side uses SVG clipPath * Right side uses CSS shape Basically, on Desktop Chrome v56, I have great performance and it works as it should for both strategies. On Desktop Firefox, I can only get it to work with SVG clipPath. However, on the first rendering, the animation is jerky. On subsequent renderings, it is smooth. On Desktop Safari, I can only get it to work with a CSS shape. Safari can't seem to be able to animate the attributes of the SVG shape inside the <clipPath> component. If I resize the window, the final SVG clipPath is rendered, so it seems that Safari cannot render the graphics without being resized. For IE / Edge, I haven't tested, but I likely won't be able to support those browsers. Trying to see if others had suggestions on how to improve the performance of this reveal effect on Firefox and/or Safari.