Use complex SVG polygon zoom through to background centering

[Justin Erswell]

Building off of an answer from this post Greensock - moving elements behind another I have a custom polygon based SVG which I would like to position in the centre of the viewport and have zoom through to the background on scroll. The scroll zoom is owrking great but I am struggling to center the element, can any one advise on how to do this with GSAP.

 

Better in fact how to position the SVG wherever it needs to be using the library.

 

Thanks in advance for your guidance.

See the Pen yLoVjpY by erswelljustin (@erswelljustin) on CodePen

[cotton]

Hi Justin

 

I went through this on this project and ended up having to use a clippath for the arrow shape and embedding the image in the SVG for this exact reason. The SVG is styled at 100% width and height and then the clippath is animated to get the zoom effect.

 

The original thread is here and I've got it up on CodePen if you want to have a look/experiment.

 

Hope this is of some help.

 

[akapowl]

 

Welcome to the forums @Justin Erswell

 

Here's how you could initially set it with GSAP for it to be centered...

 

gsap.set(link, { x: "50vw", y: "50vh", xPercent: -50, yPercent: -50 })

 

...with this added to the resize handler function...

 

gsap.set(link, { xPercent: -50, yPercent: -50 })

 

...and then you'll likely also want to set the transformOrigin in that tween to the center and adjust the scaling as you need.

 

See the Pen ec608c1c45549ff4f312780a621c3e10 by akapowl (@akapowl) on CodePen

 

 

[Justin Erswell]

@akapowl Thanks for the welcome and answer very much appreciated!