Jump to content
Search Community

samuelhigginson

Members

  • Posts

    10

  • Joined

  • Last visited

 Content Type 

Posts posted by samuelhigginson

    GSAP Random function gets called twice?

    in GSAP

    Posted

    33 minutes ago, OSUblake said:

    Hi Samuel, 

     

    I'd just use the regular random functions instead so the random value doesn't get recalculated.

      

    .from('#div0', {
        duration: 1,
        xPercent: gsap.utils.random(-400, 400),
        yPercent: gsap.utils.random(-400, 400),
        rotation: gsap.utils.random(-25, 25)
    })

     

     

    Cheers Blake!

    🤝

     

    A perfect solution for my initial query.

    However I've just been experimenting, and it doesn't seem to work so well for staggered animations..

     

    See the Pen GRyBXvm by halfvillain (@halfvillain) on CodePen

     

    It seems the utility function doesn't give each target their own individual value, and I'm unsure on how correct this.

     

    Any ideas? 🤔

     

     

    GSAP Random function gets called twice?

    in GSAP

    Posted

    hello! 👋

     

    I'm trying to avoid the elements jumping to their 'new' random location (not the FOUC) on Scroll Start.

    I think it's something to do with the random function getting called on load, and then again when the playhead reaches the function in the timeline?

    Maybe something to do with the .from as well?

     

    Whatever it is, I gave it a good go and I'm stumped.

    If anyone can give us a hand, that'd be awesome.

    See the Pen JjMBBRa by halfvillain (@halfvillain) on CodePen

    Duplicate Properties Stopping Timeline

    in GSAP

    Posted

    Hey there 👋

     

    This is my first time using Timeline, so I'm sure I must be missing something obvious.

     

    What I'm trying to do is start the record off slow, let it spin baby spin, and then bring it to a gentle stop with some more easing tacked on the end. 

    But ignorance has stopped me in my tracks, yet again.

     

    Any help getting this party started would be greatly appreciated.

     

    Cheers!

    See the Pen OJNJVYb?editors=0010 by samuelhigginson (@samuelhigginson) on CodePen

    Animate based on Cursors distance from Element

    in GSAP

    Posted

    Hey there 👋

     

    I have no real idea of what I'm doing when it comes to javascript, but I'm totally hooked on the interactions and animations that are possible when using it.

    And today I discovered GSAP, which seems to tie all that stuff together very nicely.

    So here I am asking for help, trying to implement GSAP into my most recent 'Project'.

     

    What I'm trying to do is replicate an interaction on the Wieden + Kennedy home page.

     

    The closer your cursor gets to the featured project title (lower left of the screen) the more it's underline grows.

    When the cursor reaches the project title, the underline reaches it's full length, and underlines the project title.

     

    I'll also point out that it doesn't matter where your cursor is hovered on that featured project title, the underline stays at it's maximum value.

    (Something I've been having trouble figuring out)

     

    [It's definitely easier to see this in action than to read my crappy explanation of it, so it might be worth clicking the link up there]

     

    Phewf.

     

    After piecing together sections of code from around the web, and before I discovered GSAP.

    This is what I had.

     

    See the Pen MWKBjJm?editors=0110 by samuelhigginson (@samuelhigginson) on CodePen

     

    It's.. kind of something that works?

    But there are a couple of things that aren't quite right.

     

    • My line starts to get going as soon as the cursor enters the viewport. On W+K's page there seems to be some kind of 'Trigger Div' which initiates the interaction.
    • My line only reaches 100% when the cursor is exactly in the centre of the Project Title.  W+K have a much more satisfying 'Hover anywhere on the Project Title' thing going on.
    • If the window resizes, the distances change and things go wrong.

     

    And the final difference I can spot, and what ultimately led me to GSAP.

    • That delicious easing.

     

    My lines width is a scaled replication of the cursors distance from the Project Title. What W+K have, is a buttery smooth, slippery sliming line.

    And I'm all about that.

     

    So I got to googling and came across this post, here on the GreenSock forum.

     

    I noticed some similarities between the solution offered there and what I had going on, so I forked the pen and started trying to merge that solution with my own.

    And I ended up with this.

     

    See the Pen LYGgaab?editors=1111 by samuelhigginson (@samuelhigginson) on CodePen

     

    Not great.

    But.. not totally disgusting?

     

    I know I've probably over complicated this massively,  and my approach and calculations are probably way off.

    But this is all my perfectly smooth brain can manage, for now.

     

    So I'm reaching out to you people with the GreenSocks and asking for help.

     

    Anything you can suggest to get this little line dancing would be greatly appreciated.

     

    Cheers.

     

     

     

     

     

    See the Pen LYGgaab by samuelhigginson (@samuelhigginson) on CodePen

×
×
  • Create New...