Xenex122 Posted June 16, 2022 Share Posted June 16, 2022 Ok, so I have a wordpress person web developer and I'm kinda curious how to do this in gsap..Just click the navmenu or maybe the in introduction there is like a curvature that will cover the introduction after the animation.https://ronielmedina.com/ Here check my codepen..It almost like the same but I'm still not satisfied to with because it is not doing the same thing as same as the shape curvature. See the Pen QWQobrY by myth-vince (@myth-vince) on CodePen Link to comment Share on other sites More sharing options...
Xenex122 Posted June 16, 2022 Author Share Posted June 16, 2022 Nah nevermind I already got my closest solution. gsap.registerPlugin(ScrollTrigger) const circle = document.querySelector('.maskingCircle') const tl = gsap.timeline({}) tl.to(circle,{ y:"-100%", left:"0%", width:"100%", height:"100%", ease:Expo.easeOut, borderRadius:"0%", duration:1, }) const button = document.querySelector('button') button.addEventListener("click",() => { tl.to(circle,{ y:"-200%", width:"200%", height:"200%", left:"-50%", ease:Expo.easeIn, borderRadius:"100%", duration:1, }) }) <div class="container"> <div class="maskingCircle"></div> <button type="button"> CLICK </button> </div> * { margin: 0;padding: 0; } body { position: relative; width: 100%; height: 100vh; /* background: orange;overflow: hidden; */ } .container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: orange;overflow: hidden; position: relative; } .maskingCircle { width: 200%; height: 200%; border-radius: 100%; background: #0002ff; position: absolute; top: 100%; left: -50%; } button { width: 300px; height: 100px; background: #ffbbbf; color: black; position: absolute; } Link to comment Share on other sites More sharing options...
Cassie Posted June 16, 2022 Share Posted June 16, 2022 Xenex. Please stop making duplicate posts it's incredibly confusing. Can I delete one of the posts and if so which one? Do you still have a question or have you solved it? 2 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