larsvers

Absolutely! Many thanks again Jack..

That makes sense... Brilliant - thanks Jack! May I ask - would you have a reference to maybe one or two different ways of doing it? Would be great to see an alternative, that might be more appropriate in different situations. No worries if not of course..

Hello, when tweening an array of objects with the EndArrayPlugin as described in the docs i get the following warning, without the array being tweened: "Invalid property" 2 "set to" Object { x: 0, y: 0 } "Missing plugin? gsap.registerPlugin()" "Invalid property" 1 "set to" Object { x: -3, y: 1 } "Missing plugin? gsap.registerPlugin()" "Invalid property" 0 "set to" Object { x: 100, y: 100 } "Missing plugin? gsap.registerPlugin()" Would anyone be able to tell me what probably basic mistake I make? Many thanks!

Hi @ZachSaucier, the demo plays the animation when scrolling down (and the issue occurs on loading - resizing - scrolling), but I should've made that clearer. Anyhow - thanks for keeping me honest in terms of post length and example complexity! I felt I couldn't break it down much further, but it probably would've done me good : ) I have solved the issue in the meantime. It was a logical error on my side. If anyone followed along (don't if you haven't so far), the problem was that on resize I created a new timeline but re-used the old ScrollTrigger instance which linked to the old timeline and hence drew the object of interest with old values. Killing the old and creating a new ScrollTrigger instance solved the issue. Solved here: https://codepen.io/doldinger/pen/qBbMgLW Again, many thanks for your thoughts!

Many thanks Zach and I know - I'm really sorry for the question extent! I have indeed seen the post but I believe I can exclude ScrollTrigger as an issue source as it persists when using a click event for example. I kept ScrollTrigger in the pen to allow for easy scrubbing... I'd be super grateful for any pointers you might have after maybe briefly looking at it. But don't worry if this is out of bounds - I shall certainly have a go at de-cluttering then!

Hello, I have a question about updating a tween's properties on resize. My problem seems to be that although.. I kill the tween on resize and rebuild the tween with new properties ..the tween still animates between the initial properties set on page load and not the updated properties set on resize. The following code pen shows my problem: https://codepen.io/doldinger/pen/dyGjZYv On the blue, left hand side, I have two canvases on top of each other and draw a background image on canvas 1 (black circle with black border). I then need to morph only the circle into a new shape - a rectangle. To achieve this, I draw just a red circle on canvas 2 over the black circle and morph it into the rectangle. This is easily done with MorphSVG's render function. The morphing is triggered with ScrollTrigger (heavy gsap usage here...) when the user scrolls past section 1 on the right hand side. To always center the image as well as the circle and the rectangle, I calculate a transform on page load and on each resize that I can then apply to the canvas' context so that the circles will always be horizontally centered: transformImg = getTransform(circleImg); // will produce somthing like { x: 0, y: -100, scale: 2 } based on the image/path size and the container size. In fact, the red circle and the black circle are from the same base image, so they will always require the same transform. Next, I build out a timeline with two tweens running at the same time: 1. a MorphSVG tween that triggers the render function to draw the circle-to-rectangle path: const morph = gsap.to('.circle-path', { morphSVG: { shape: '.rect-path', render: drawMorphPath, updateTarget: false, }, }); 2. a tween just updating a global transform object (transformShape) that the morph render function drawMorphPath from tween 1 above uses while morphing. Based on this updating transform the context position updates from the central circle transform to the rectangle transform: const retransform = gsap.fromTo( transformShape, { x: transformCircle.x, y: transformCircle.y, scale: transformCircle.scale, }, { x: transformRectangle.x, y: transformRectangle.y, scale: transformRectangle.scale, onUpdate: updateTransformShape // updating the global transform like so: transformShape = this.targets()[0]; } ); This works as expected on page load. On resize, it recalculates all transforms, kills the tweens' timeline (function buildMorphAnim) and is supposed to build new tweens with the updated transforms. However, rather than updating the from and to vars, the tween seems to recycle the transforms set initially - on page reload. To see this, you can load and try the pen without resizing. The red circle comes from and returns back to the black circle's position if you scrub-scroll. Then resize a little and retry. The red circle should be out of whack as it is not moving between the desired updated transforms, but the two original transforms supplied on page load. In addition you can open the console and see the desired transforms - logged just before the tween is created - as well as the actual transforms used by the tween logged at tween start and complete, which are not updated after resize. Would you have any idea what I am doing wrong or can amend to make this work? I apologise for a long question and a more complex test example - as there are quite a few parts possibly responsible for the result, I thought I keep it in. But please let me know if this is all too complex and I will try to tackle it from a simpler angle. Many thanks for any help!

Works very well! Thanks a lot for your quick response - truly impressive!!

Hello, When using MorphSVG on Canvas, I can choose between setting the render function: either globally with MorphSVGPlugin.defaultRender = draw or as part of the tween with the render property This works great in the example codepen: https://codepen.io/GreenSock/pen/WYWZab based on gsap 2x and MorphSVG 0.92, however, it doesn't seem to work with gsap 3x and MorphSVG 3x: https://codepen.io/doldinger/pen/ZEQopYr Do I miss something obvious or how can I trigger the render function on a tween level in gsap v3x / MorphSVG v3x? Many thanks for any help!

Many thanks @OSUblake and @Jack ! @OSUblake I now properly read the article you pointed at, which I only skimmed before and I am much clearer now on the background. Apologies for looking at the matrix - I couldn't help it : ) @Jack attr is of course the solution and is exactly what I'm after. After reading your css-tricks article I also appreciate the difference and the use cases. I was looking for this solution as I have a complex SVG path, which I translate and scale with some getBBox help to fit the viewport responsively (viewbox is not an option unfortunately). I then morph some part of this image into another shape (with your stellar morphSVG plugin). For performance reasons I can't morph the whole complex path, so I overlay the long path with only a part of it in a separate g element with the same transform values. This part-copy will get morphed into another shape, which requires a new transform I can now simply apply with attr as the CSS transform appears less straight forward. Here's a simplified demo of my mission: https://codepen.io/doldinger/pen/GRoMJVN Thanks again - for the help and GSAP!

Hello, I have a path in a g element which has an initial transform (x, y and scale) set, e.g.: <g id="group" transform="translate(5, 10), scale(0.5, 0.5)"> I now want to update this transform to for example: <g id="group" transform="translate(50, 40), scale(0.2, 0.2)"> So I do: gsap.to('#group', { x: 50, y: 40, scale: 0.2 }) which leads to a g element with the following properties: transform="matrix(0.2,0,0,0.2,147,184)" data-svg-origin="-10 -20" style="transform-origin: 0px 0px;" while I would have - probably naively - expected: transform="matrix(0.2,0,0,0.2,50,40)" After some attempts including setting the svgOrigin in the gsap tween to "0 0" as well as the initial transformed position of "2.5 5" I can't seem to get the desired outcome. My 2 questions are: 1. what exactly is gsap doing here? As in, how does it arrive at the transform matrix and svgOrigin values (I grasp some of it, but would be grateful for some expertise)? 2. how do I achieve the exact transform as specified in the gsap tween? Many thanks for any pointers in advance!