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!