Aereli Posted August 10, 2020 Share Posted August 10, 2020 Hello Gsappers, How could I transition the mask to be smoother from text, to content-box. It is also not transitioning back to original form. I’m not sure if this is the best method in doing this so I am open to other ways. This code was transferred from a React.js project onto the codepen link provided. See the Pen mdPJZxy by Aereli (@Aereli) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 10, 2020 Share Posted August 10, 2020 Hey Aereli and welcome to the GreenSock forums. background-clip keywords are not animatable, so there's nothing you can do to help with that transition specifically. How are you imagining it to work? There are a lot of ways this sort of transition could be done. Probably most common would be zooming in until a single character's clip covers the whole screen (so that the whole video is visible at that point). 1 Link to comment Share on other sites More sharing options...
Aereli Posted August 10, 2020 Author Share Posted August 10, 2020 wow, thanks for the fast reply. I imagine the entire text to zoom out until the entire vid is width and height 100% basically exactly how you described. How would I got about this? Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 11, 2020 Share Posted August 11, 2020 You could fix the position of or pin the text and then scale it up. Usually people use SVG for this sort of thing for cross-browser support and improved performance. Link to comment Share on other sites More sharing options...
Aereli Posted August 11, 2020 Author Share Posted August 11, 2020 Ok thanks, but how about the transition of text to full video? Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 11, 2020 Share Posted August 11, 2020 Sorry, I don't understand the question. Animating a clip path is animating a clip path, it doesn't matter what content is inside of it. You just have to create the clip-path animation in the way that you want to create it and then apply it to the video. 1 Link to comment Share on other sites More sharing options...
Aereli Posted August 11, 2020 Author Share Posted August 11, 2020 I created something that i am satisfied with using a clipPath. Thanks for the advice. Dunno if it can get any smoother or if my practices were best. Let me know if not I guess you can close this. ✊ Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 11, 2020 Share Posted August 11, 2020 It all depends on what effect you want Good job. 1 Link to comment Share on other sites More sharing options...
Aereli Posted August 11, 2020 Author Share Posted August 11, 2020 Hey actually i've noticed something, when I am scrolling back and forth the scale: 4 actually lags the scrolling.. What can i do to fix this? thx. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 11, 2020 Share Posted August 11, 2020 That's a browser-level issue, not a GSAP issue. You can add will-change: transform to the element being animated but that can only help so much. All-in-all animating clip paths is kind of performance intensive, especially the larger you go and the more elements involved. 1 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