Afaq Rashid Posted November 27, 2021 Share Posted November 27, 2021 Hi guys, this is my first experience with GSAP. I found this library extremely easy to use. As I am a beginner to the world of animations, I don't understand how can I achieve a certain animation in the files attached. ubuntu screen recodere - Google Search.mp4 I have implemented the icon circles moving down or appearing above, but the main issue is how do they blend into white color? I can't think of anything to achieve this. Thanks in advance. Link to comment Share on other sites More sharing options...
PointC Posted November 27, 2021 Share Posted November 27, 2021 Hi @Afaq Rashid Welcome to the forum. I'd think a mask or clip-path would work. You could possibly make it work by cleverly stacking up some circles and scaling/transforming them at the right time. Those are just the first few things that popped into my head. We're happy to help with any GSAP related problems or questions as you work though your project. Best of luck. Happy tweening. 4 Link to comment Share on other sites More sharing options...
Cassie Posted November 27, 2021 Share Posted November 27, 2021 Ha. Nice Christmas hat Craig! 1 1 Link to comment Share on other sites More sharing options...
Afaq Rashid Posted November 29, 2021 Author Share Posted November 29, 2021 On 11/28/2021 at 3:00 AM, PointC said: Hi @Afaq Rashid Welcome to the forum. I'd think a mask or clip-path would work. You could possibly make it work by cleverly stacking up some circles and scaling/transforming them at the right time. Those are just the first few things that popped into my head. We're happy to help with any GSAP related problems or questions as you work though your project. Best of luck. Happy tweening. Hi Craig, thank you for such a quick response. But I am still confused, I have never worked with clip-paths or masks, I guess it would be helpful if you just point me into the right direction and give me some headstart. Thanks again. Link to comment Share on other sites More sharing options...
Cassie Posted November 29, 2021 Share Posted November 29, 2021 It would be handy for us if you could provide a minimal demo so we can see if you're working with SVG or HTML elements! If you're in SVG land here's a great thread where Craig's provided an example of a circle mask ✨ 2 Link to comment Share on other sites More sharing options...
PointC Posted November 29, 2021 Share Posted November 29, 2021 Yeah - we'd need to see a minimal demo to give you the best advice. You mentioned that you had the circles moving up and down working correctly so maybe you could put that into a demo for us? If we're talking SVG, here are the basic mechanics of masks. See the Pen KzmXYK by PointC (@PointC) on CodePen Here's a little more complicated example which may work in your project. See the Pen 260a98913ffa77df57218cdc063df52f?editors=1010 by PointC (@PointC) on CodePen I also have a short tutorial explaining masks and clip-paths here: https://www.motiontricks.com/svg-masks-and-clippaths/ Happy tweening. 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