Lars Johan

Sorry. Here's a demo. I would like to achieve three things. 1) Scale to same size, no matter original size of the element (example: 400px width and 400px height) 2) Making all other objects fade while not being hovered upon (when one is) (maybe simple as CSS "*:not(this)"?) 3) If element is clicked, then move it to the center of the viewport while all other elements fade and, in that state, if I click outside of this element then everything reverts back to normal https://codepen.io/larshallen/pen/poLBYyN

I am trying to get this to work: $('#something').hover(function(){ gsap.to(this,{duration: 1, width: 200, height: 200, transformOrigin: "center center"}); }, function(){ gsap.to(this,{duration: 1.2, scale:1, transformOrigin: "center center"}); }); But my syntax don't seem to be quite right? Essentially I want many different elements of different sizes (containing jpg-images, if that matters) to scale up to the same size 200x200px when hovering over them. They scale down to their original size when mouse leaves them.

What I am trying to understand is if this is a question of CSS or GSAP, I can’t wrap my head around it yet with my level of understand. As far as I understand at the moment the div doesn’t stay center to center to the circle as it kind of floats around when the SVG changes dimensions in relation to sizes of the viewport. As for the GSAP-fit-solution, the box is going to be constrained inside of the circle, isn't that so? Edit: I wrote that upper part and then discovered this: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image And now I understand that I can simply make all of the design work inside of illustrator and illustrator will later help me with the right syntax in the SVG. I updated the codepen.

Hi Cassie Thanks for the answer. I made a codepen for you that should explain my question better. https://codepen.io/larshallen/pen/NWYxVEM

Hi I have this: <svg> <g id="number1"> <path/> <path/> </g> <g id="number2"> <path/> <path/> </g> </svg> <div class="number1">Foobar</div> <div class="number2">Foobar</div> I want to use gsap to position the <div class="number1"> at the bottom center of the position of <g id="number1"> and number2 at number2 and so on. How can I?