Zoom to a specific image Point

[dazzafact]

Can anybody give me a hint, what i've missed to zoom it to the given coordinates?
This animation just zooms to the Center of the Image. Thats not what i want. i want these coordiantes [0.9,0.8]

This is just in simple Code example. My original Code is using more paramters. But i just want to understand how this Works
Thanks

See the Pen RwjexKY by dazzafact (@dazzafact) on CodePen

[Trapti]

The property is transformOrigin not origin. Ex: transformOrigin: "50% 50%"

[dazzafact]

Yes thanks, this works, but only in CodePen. When i try this parameter "transformOrigin" in my Project it won't work. It animates the same, like i posted first- to the center
 

$tl.fromTo($slides,
{alpha:0},{alpha:1,duration:2},0)
.to($slides,{duration:10,transformOrigin:"80% 10%",  pixi: { width: $slides.width*(1.2), height: $slides.height*(1.2) } },'>')
				   

 

[Trapti]

I am not sure what exactly is wrong in the app. But seeing this code I see alpha, the property is autoAlpha for handling visibility and opacity of the element.  

In your original codepen scale is being animated so transformOrigin has effect on that. In this code It is different. 

[Cassie]

Thanks Trapti!

You're also animating width and height here and scale in the first example.

Now I'm not 100% sure how that's handled in PIXI but if it's the same as the HTML box model and three.js any changes will originate from the top/left corner of the element. The transform origin property is for transforms like scale/skew/y/rotate - not for width or height.

Hope this helps!

[OSUblake]

It's not clear if you are using PixiJS, because your example shows HTML, which doesn't work the same.

 

If you're using HTML, check out the demos by Jack in this thread.

 

 

[dazzafact]

Thank you all for reply.
Yes, iam using PixiJs (no HTML)
I think Gasp Parameters are not the first adress. I have to try first with Pixijs Parameters to find a Solution

[dazzafact]

1 hour ago, OSUblake said:

It's not clear if you are using PixiJS, because your example shows HTML, which doesn't work the same.

 

If you're using HTML, check out the demos by Jack in this thread.

 

I already tried the example you post ^ , but this seems to be made for HTML-Eleemts not PixiObjects. I thought Html Params and PixiJs-Params where use as the same. So thats why i posted my first example above as a simple HTML Version. Just to make it as short as possible to understand.
Ok, now i see Jack creates an Effect with Plugin. Ok, i will try this next. 
 

 

[dazzafact]

Ok, here's my Solution if you use PixiJs

 

          
$tl =gsap.timeline()
$anchorX=0.8 //your x image point to zoom
$anchorY=0.2 //your y image point to zoom

$pointX=$canvasWidth*$anchorX;//image size width
$pointY=$canvasHeight*$anchorY;//image size height
          
$slides.anchor.set($anchorX,$anchorY);//only for Pixi
$tl.fromTo($slides,{x:$pointX,y$pointY},{duration:1},0)//set image position on begin relative to Scale values (.to())
.to($slides,{duration:12,  pixi: {scaleX :2,scaleY 2 } },'>')