Tee Kick Posted October 30, 2021 Share Posted October 30, 2021 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 More sharing options...
OSUblake Posted October 30, 2021 Share Posted October 30, 2021 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(); }); 1 Link to comment Share on other sites More sharing options...
Tee Kick Posted October 30, 2021 Author Share Posted October 30, 2021 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 More sharing options...
Tee Kick Posted October 31, 2021 Author Share Posted October 31, 2021 @OSUblake Link to comment Share on other sites More sharing options...
OSUblake Posted October 31, 2021 Share Posted October 31, 2021 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 More sharing options...
Tee Kick Posted October 31, 2021 Author Share Posted October 31, 2021 @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 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