Jump to content
Search Community

add button that start the svg mask animation

uavide test
Moderator Tag

Recommended Posts

Hi to everyone, i found this cool animation and i would like to understand if it will be possible to make it start just when i click a button, not automatically like now.

My idea it's to have a menu nad every time that i click a button of the menu this mask animation it starts for change the page (like a fake loading).

How i can make it works? can you help me?

Thanks

Davide

See the Pen XWzjqrv by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

cool, thanks, so let me understand if i have a menu (with different buttons) and every button goes to a different page, how can i manage this animation.

I thought about a mask that it comes up with this kind of animation (or something like this) when i click every button, and when the animation it goes down it shows the right page that i request from the button.

Maybe do you know some codepen that it make already this kind of thing without modify this one.

Many thanks

Davide

Link to comment
Share on other sites

Yep, you'd probably need to have the button trigger a function that would do the first part of the mask animation, then load the new [masked] content, then animate the reveal. 

 

I'd suggest that you give it a shot and if you get stuck and have a GSAP-specific question, feel free to post back here and we'll answer the GSAP-related stuff. Good luck!

  • Like 1
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...