Jump to content
Search Community

Basic Connected Nodes

Smithfield test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

Hey, I've put together a little prototype of a header that has little connected nodes/floaty things - pretty much works ok as-is, but was hoping to make the "floaty" animation a bit better (sorry I know that's vague).

 

I'm currently using 3 tweens with a random x + y to attempt to give it a bit of life.

 

const duration = 6;
const radialMovement = 10;

let tl = gsap.timeline({
  yoyo: true,
  repeat: -1,
  onUpdate: animateNodeLines
});

tl
  .to(nodePrimary, {
    yPercent: `random(-${radialMovement}, ${radialMovement}, 1)`,
    xPercent: `random(-${radialMovement}, ${radialMovement}, 1)`,
    duration: duration
  })
  .to(nodePrimary, {
    yPercent: `random(-${radialMovement}, ${radialMovement}, 1)`,
    xPercent: `random(-${radialMovement}, ${radialMovement}, 1)`,
    duration: duration
  })
  .to(nodePrimary, {
    yPercent: `random(-${radialMovement}, ${radialMovement}, 1)`,
    xPercent: `random(-${radialMovement}, ${radialMovement}, 1)`,
    duration: duration
  });

 

Any pointers / tips / improvements all very much appreciated, thanks!

See the Pen yLvRmyQ by slowrush (@slowrush) on CodePen

Link to comment
Share on other sites

There are also some great web animation and web development communities out there that may be more what your looking for...

Good luck with your project, keep us updated with how it's going - if you have any GSAP questions make sure to pop back in.

  • Thanks 1
Link to comment
Share on other sites

Thanks both, yup joined a bunch of those recently + no worries, thought it was a bit of a fuzzy Q. Was just curious if anyone had any tricks + was happy to provide a starting point for anyone else attempting similar (used a bunch of the forum to get to this point, so felt appropriate to give back in some tiny way).

 

I'll keep noodling + post back if anything interesting results.

 

Cheers!

Link to comment
Share on other sites

  • Solution

FWIW - I'd probably try a custom random wiggle. I used that on my TP pen. Pay no attention to the Pixi related code. The wiggle stuff is all in the wiggle() function.

See the Pen BaNVpWN by PointC (@PointC) on CodePen

 

I also used something similar for all the little floaty shapes on the header of Motion Tricks.

https://www.motiontricks.com/

 

Happy tweening.

:)

 

 

  • Like 3
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.
×
×
  • Create New...