Jump to content
Search Community

How to make like a curvature dashing in introduction

Xenex122 test
Moderator Tag

Recommended Posts

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...