Jump to content

Justin Erswell

Use complex SVG polygon zoom through to background centering

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

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.


  • Like 2
Link to comment
Share on other sites

  • Solution


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



  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.