Jump to content
Search Community

Tee Kick

Members

  • Posts

    11

  • Joined

  • Last visited

 Content Type 

Posts posted by Tee Kick

    Animating boxShadow

    in GSAP

    Posted

    2 hours ago, Cassie said:

    Hey @Tee Kick

     

    If you break that animation down - all that's happening is that the circle is moving up and down and the 'shadow' is getting larger and changing opacity.

    I would just copy the box shadows onto a div and then change the opacity and scale of that div. Then you'll get the same effect and better performance. 

    If you want to use boxShadow and don't mind about performance then here you go

     

    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!

    Animating boxShadow

    in GSAP

    Posted

    I have to same/ similar question.

    And although the warning, I'd still like to see for myself.

     

    Here's my codepen:

    See the Pen ExwELvE by TKick (@TKick) on CodePen

     

    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:

    See the Pen woJgeo by MarioDesigns (@MarioDesigns) on CodePen

    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?

    Grouped: Animate children from Group's center?

    in GSAP

    Posted

    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.

    Click .svg > Go to Url

    in GSAP

    Posted

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

     

     

     

     

    Click .svg > Go to Url

    in GSAP

    Posted

    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.

    Click .svg > Go to Url

    in GSAP

    Posted

    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 ;-)

     

     

×
×
  • Create New...