Tee Kick

Hi Cassie, Well... I also wanted to see whether I could accept it or not. call me stubborn. But yeah, I see now it will be a bit much, like that. The other option you mentioned sounds like something that could work. Will give it a try. Thanks!

I have to same/ similar question. And although the warning, I'd still like to see for myself. Here's my codepen: https://codepen.io/TKick/pen/ExwELvE Currently the shadows are defined like this: box-shadow: 0px 54px 55px 0px rgba(0, 0, 0, 0.8), 0px -12px 30px 0px rgba(0, 0, 0, 0.7), 0px 4px 6px 0px rgba(0,0,0,.7), 0px 12px 13px 0px rgba(0,0,0,.8), 0px -3px 5px 0px rgba(0,0,0,.5); And need to become: box-shadow: 0px 14px 15px 0px rgba(0, 0, 0, 0.8), 0px -2px 10px 0px rgba(0, 0, 0, 0.7), 0px 2px 3px 0px rgba(0,0,0,.7), 0px 6px 7px 0px rgba(0,0,0,.8), 0px -1px 23px 0px rgba(0,0,0,.5);} Currently the gsap code is: .to(avtr, {duration: 3, y: 25, yoyo: true, repeat: -1}) I got this idea from: https://codepen.io/MarioDesigns/pen/woJgeo Which is using CSS animation, which could be(come) an alternative method, IF I don't like the gsap solution. I tried with , {css: {box-shadow: 0px 14px 15px 0px rgba(0, 0, 0, 0.8), 0px -2px 10px 0px rgba(0, 0, 0, 0.7), 0px 2px 3px 0px rgba(0,0,0,.7), 0px 6px 7px 0px rgba(0,0,0,.8), 0px -1px 23px 0px rgba(0,0,0,.5)} But that's somehow faulty... Any tips to get me going?

I don't, I will. It's industry related... I was indeed, but then neat, making a one page presentation for this logo animation. Cheers

Is there a: no-js 'Industry Standard' Boilerplate fallback method? Or preferred method that 'everyone uses? This one? https://css-tricks.com/snippets/javascript/fallback-content/

I'm not surprised. I'm working from a limited amount of knowledge on these matters. Your proposed setup sounds like it would be best indeed. Will study the methods suggested.

@akapowl Thanks for the steering, tad sloppy indeed. Updated: https://codepen.io/TKick/project/editor/Ayvjzx All that's needed now is: - The red stripes move from the center of the group to their original position, staggered. If I add x and y coordinates the whole goes off the rails...

How to animate children from their Group's center? OBJECTIVE: Animate the children 'tick' to their original position, relative to position of the parent 'spray'. I got this: See Codepen example - For now only one child is moving - As soon as I introduce rotation on the parent, rotate: 180, I get weird results (360 works, although it still looks to be wobbling?). I tried variations on the transformOrigin for the parent, without much luck. So... I guess I'd need to know the position of the parent, and somehow originate the movement from that (flexible) point/ orientation to the new flexible position? This goes a bit over my head for my current level. Duct Tape Solution: For now I had scaled Down, then Up, the parent, but this scales-up the children also. I could counter that I guess, but yeah, glue and tape... I guess it wouldn't be the first time someone asked, but did some thorough searching, but didn't find it yet. Any help here? Thanks.

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

@OSUblake

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.

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