Jump to content
Search Community

PositionInViewport to update data path of SVG with scrolltrigger

Charlyta test
Moderator Tag

Recommended Posts

Hi!

I want to update the path pf a SVG while scrolling. I supose that I have to use 'PositionInViewport'.  I have seen an oficial GSAP example form Codepen explaining 'PositionInViewport' and  'isInViewport' here: 

 

My Codepen trying to perform this is: 

See the Pen mdxLZPg by charlyta (@charlyta) on CodePen

I tried to update the value of data path in this way:

 

gsap.to(curve.setAttribute(
        "d",
        "M 800 300 Q 400 " + myposition + " 0 300 L 0 0 L 800 0 L 800 300 Z")
      );

 

Where 'myposition'  is from: let myposition = ScrollTrigger.positionInViewport(box, "center").toFixed(2);

 

The question is: How to get the position to pass this var to the path.

 

Thanks in advance

positionInViewport:
Scroll down

gsap_example.JPG

See the Pen WNOzrqg by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Hey there!

 

Could you explain a little more about what the goal is with the myposition variable? Why do you want to feed that into the path? What's the visual outcome you're hoping for?

I would usually just suggest using scrollTrigger to animate something on scroll. Like so.
 

gsap.to(curve, {
  attr: {
    "d": "M 800 300 Q 400 " + myposition? not sure what this is for + " 0 300 L 0 0 L 800 0 L 800 300 Z"
  },
  scrollTrigger: {
    trigger: svgElement,
    start: 'center center'
  }
}

 

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.
×
×
  • Create New...