Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Tee Kick

Click .svg > Go to Url

Recommended Posts

Hello,

 

I've created a logo animation in GSAP.

 

The two top most layers are now a rectangle, covering the whole svg, called 'foreground', with an opacity of 0.
And a 'restart' button as top-most layer.


Added a restart playback, when user clicks on the svg element '#restarter', the animation plays again, all good:
restarter.onclick = function() {tl.restart();}

 

Now i also need to add a button to go to the home page, ie. When svg is clicked > go to url


Should I wrap the whole in an href?

Or can I have user click svg element (fe. 'foreground')/ or the html container (class="lal") > and then open url (on the same domain)?

 

What is the best approach (and code) here?

 

Thanks in advance.

 

Ps. I'm pretty much a noob here, so... go slow ;-)

 

 

Link to comment
Share on other sites

Welcome to the forums @Tee Kick

 

We usually try to keep these forums focused on GSAP specific questions, but if you wrap the entire SVG with an anchor tag (<a href="myUrl.com">) and want a button inside the SVG to also be clickable, you would need to prevent the event from propagating.

 

myButton.addEventListener("click", event => {
  event.stopPropagation();
  event.preventDefault();
  tl.restart();
});

 

  • Like 1
Link to comment
Share on other sites

Hi Blake.

Thanks.
 

Sorry for that.

Do you advise I post these questions at Stackoverflow instead? Or...?

 

As per the example you gave; i need to educate myself more on these matters.

Any advice on where to start? Working from just the documentation is... not right for me. I'd need some learning path.

And in relation to that, and your answer:
I understand why this is needed, and what it does.
I'm not specifically looking to wrap in an url.
I just need to click-functionality. Whichever way.

Link to comment
Share on other sites

Stackoverflow is usually the best place for general questions like that.

 

19 hours ago, Tee Kick said:

Any advice on where to start? Working from just the documentation is... not right for me. I'd need some learning path.

 

I think Wes Bos's JavaScript course is a good place. There's even a section on events, #5.

https://wesbos.com/javascript

 

19 hours ago, Tee Kick said:

I'm not specifically looking to wrap in an url.
I just need to click-functionality. Whichever way.

 

I thought you said you need it to go another URL. 

 

The best way to deal with clicks is by adding event listeners.

 

let myElemenet = document.querySelector("#my-element");

myElement.addEventListener("click", event => {
  ...
});

 

Where events start to get messy and conflicting with each other is when you you have clickable elements nested inside of each.

 

Link to comment
Share on other sites

@OSUblake
Thanks.

URL:
I meant: I personally don't care how the click is handled, more looking for 'best practice'.
For now I used your first suggestion, which works like a charm.

This is a logo animation, for on website, with url to 'home', so this is perfect. Cheers.

 

 

 

 

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.
×