Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Scale SVG transform path on resize

Recommended Posts

Hello Greensock forum!


I have a case where I need a clip in path at the top of an image, and when I scroll down, that clip path "opens" the image. This kind of works, but if I resize the screen, the path goes back to the way it was before I resized it. This causes the clip path to have bad values. (see console.log )  This is the first problem. The second is: maybe you know a better method to calculate the shape size? It should be at most 700x700, but no more than 80% of the screen width.  Do you have any ideas?


See the Pen OJQaggN by nomad1139 (@nomad1139) on CodePen

Link to comment
Share on other sites

I'm having a hard time following the question and the demo seems to have quite a bit of code to look through. The simpler a demo, the better. If you just want an "X" shaped clip to reveal an image and it should never be more than 700px wide, I'd wire it up like this.


See the Pen vYdQJKy by PointC (@PointC) on CodePen


Happy tweening.



  • Like 4
Link to comment
Share on other sites

This is my mistake, I have described the problem incorrectly and chaotically. I want "X" to be 700px wide and tall (or 80% of the window width if is smaller than 700px), be centered on the screen and the image to be 100% of the window width. After the 'X' scroll, it should reveal the whole picture.

Link to comment
Share on other sites

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  


You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 


Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

  • Like 1
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.