Jump to content
Search Community

ScrollTrigger with clipPath not working

ektorp test
Moderator Tag

Recommended Posts

Hi team GSAP,

 

I am running into a (I believe) a basic issue with ScrollTrigger animating a clip-path on scroll. Viewing the code pen, the start and end triggers are set correctly. But as you scroll, the clip-path is not animating...it is just jumping at the end point. The intention is to have it start to reveal the whole image starting on 95% and completing at 50% with scroll scrubbing in place. I believe it is an issue with how the clipPath is set up because if I simply replace the "clipPath" animation property with "opacity" it works fine.

 

Another interesting thing that came up is that if I add the css "transition" property on the element it does animate it at the end point. This is a bit strange as I do not recall GSAP ever requiring default properties directly in the CSS. Any help with this would be greatly appreciated.

See the Pen xxPRjLw by bdang (@bdang) on CodePen

Link to comment
Share on other sites

Hello @ektorp

 

Add the unit of your choice to every coordinate value of the clip-path polygon in CSS as well as in the JS for the tween, also when it is 0 - so 0% then here e.g. - and you'll see it work.

 

And related to the transitions:

You should never have CSS transitions set for properties of elements that you are going to tween on with GSAP as they will interfere. So setting a transition: all 1s  e.g. would definitely cause problematic behaviour.

 

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

 

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