ektorp Posted February 6, 2022 Share Posted February 6, 2022 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 More sharing options...
akapowl Posted February 6, 2022 Share Posted February 6, 2022 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 1 1 Link to comment Share on other sites More sharing options...
ektorp Posted February 6, 2022 Author Share Posted February 6, 2022 Thank you akapowl for the great but simple resolve for this. I knew it was something quite fundamental. And thanks for confirming the CSS transition issue as well...it's much appreciated. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now