anisos Posted October 20, 2023 Share Posted October 20, 2023 Hello creators, all respect for the work you're doing yall I want to get your help please about some kind of scroll animation this is the referral website https://asmobius.co.jp/ I want to know how to make that circular element that is a mask on scroll that reveals the background behind am using nextjs and I tried all with gpt4 thank you in advance Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted October 20, 2023 Share Posted October 20, 2023 Welcome to the forum @anisos, that example is more of a WebGL, Shaders and complex logic question than it is about GSAP. Of course GSAP can animate anything on the web that it has access to. Here is one such example using GSAP where you can see the overall complexities of such an effect. See the Pen KKNZLVZ by RobinNavas (@RobinNavas) on CodePen Another simpler option would be using multiple Masks or Clip Paths (either SVG or CSS) for a less elaborate effect like the next example again using GSAP. See the Pen yLYLjpg by theseventh (@theseventh) on CodePen Besides the GSAP Core, you can leverage ScrollTrigger and Draggable, etc., which all work and sync up perfectly to the GSAP Core for even more fabulous possibilities. All these methods can be researched and discovered here on the forum, through the documentation and across the web in places like Youtube, CodePen and Codrops. In general custom sliders, carousels, galleries all require complex JavaScript logic beyond the scope or intention of this forum. Effects such as the link you shared introduce further complexities and required knowledge, so libraries like Three.js, Pixi.js, WebGL libraries, Shader sites, etc., can greatly assist you in conjunction with GSAP. Happy animating with GSAP regardless of what overall approach you decide to take. Good luck with your project. 👍 3 Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted October 20, 2023 Solution Share Posted October 20, 2023 Hi, This is the most basic approach I've seen to something like that: See the Pen LYMvOjL by antonio78 (@antonio78) on CodePen After that, as @Shrug ¯\_(ツ)_/¯ mentions, is adding layers of complexity based on what you want to do. Happy Tweening! 2 Link to comment Share on other sites More sharing options...
anisos Posted October 20, 2023 Author Share Posted October 20, 2023 Thank you for your replies but how can I make the mask path on scrolling Link to comment Share on other sites More sharing options...
GSAP Helper Posted October 20, 2023 Share Posted October 20, 2023 We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 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