References or codepen for a moving illustrations relative to the mouse

[JoffreyPersia]

Hi guys,

I have built this website https://dev.3-6-9-12.org/

I would like to :

1. Animate the icons according to the mouse in a small range (top:10% +/- 2% and left:15% +/- 2% for exemple)
2. Position the icons randomly at every refresh in a small range (top:10% +/- 2% and left:15% +/- 2% for exemple)

 

I don't know if you have something in mind, if a good ref has already been shown here. I tried to search on the forum but couldn't find something close to that.

 

Thank you so much
 

See the Pen ExoxmLd by pixelmort27 (@pixelmort27) on CodePen

[Cassie]

Hey there!

 

I don't have a demo to hand - (maybe someone else does.) But the key to this will be in GSAP's utility methods! Specifically random()and mapRange()

Why don't you give it a go? If you get stuck we'll be happy to give you a hand!

https://greensock.com/docs/v3/GSAP/UtilityMethods

[Cassie]

Oh wait! I lie.

I wrote a series of articles on this 🙃

https://www.cassie.codes/posts/making-a-lil-me-part-1

https://www.cassie.codes/posts/making-a-lil-me-part-2

[Cassie]

Demo here

See the Pen rNxYpzO by cassie-codes (@cassie-codes) on CodePen

[JoffreyPersia]

Oh thank you Cassie !!!
I will try to do it in the next few days ! Can't wait to dive in !

 

[JoffreyPersia]

Oh thank you Cassie !!!
I will try to do it in the next few days ! Can't wait to dive in !

 

@Cassie I am trying to follow your awesome tutorial, I have the feeling that I am moving somewhere ahah
but I am wondering how I can create a timeline and an animation for each children "icon"

I tried something with :

icon.each( function () {

     // set variables and timeline

} )
 

But I can't make it work.
Have you an idea ?

[JoffreyPersia]

Oh thank you Cassie !!!
I will try to do it in the next few days ! Can't wait to dive in !

 

@Cassie I am trying to follow your awesome tutorial, I have the feeling that I am moving somewhere ahah
but I am wondering how I can create a timeline and an animation for each children "icon"

I tried something with :

icon.each( function () {

     // set variables and timeline

} )

 

But I can't make it work. They all are moving together.
Have you an idea ?

[Cassie]

Heya!

 

Yep, they're all moving together because you're feeding in exactly the same xPercent and yPercent values for each icon.

 

These snippets here are getting a range between -20 and 20 based on the mouse position and then using that to set the x value. Whether you do this logic multiple times in a loop or just once it's going to get the same result unless you put some logic in there to tell it differently!

 

mapWidth = gsap.utils.mapRange(0, innerWidth, -20 , 20);


....


xPosition = mapWidth(event.clientX);


....

gsap.to(icon, {
 xPercent: xPosition,
})

Also - there's really no need to set up an event listener and mapRange and everything for every icon! You can just do that once.

Here's an option - using the index value to move the icons slightly differently.

See the Pen wvpBejP?editors=1010 by GreenSock (@GreenSock) on CodePen

My main advice would be not to avoid just copying the code from tutorials, try to read and understand the logic behind it, then you can write code that moves the icons exactly how you want!

You have the mouse position x and y, you've mapped them into a useable range, now you just have to tweak those values to get the movement you need.

[JoffreyPersia]

Thank you so much Cassie for your kind help

I think I understand your code now, but still trying to figure out a way to, for each div, to affect a value randomly that will define the size and the velocity of the element.
An element has a value between 1 and 5, for example 4, then he will be bigger than the elements with a number 1,2 and 3, and move quicker (because we will have the illusion that he is above).

 

I tried with the loop each, but you move the code outside it (I understand as the variables was duplicated and it was bad for perf.

Should I loop with a each the gsap timeline ? I tried but can't

[Cassie]

Quote

Should I loop with a each the gsap timeline ? I tried but can't

Not sure what you mean by this.

But you can do any sort of logic you like using functional values. This is currently multiplying the index number by the xPosition value but you can do whatever sort of thing you want. Maybe try console log some values out?
 

gsap.to('.icon', {
 xPercent: (i) => {
  // do custom logic
  console.log((i + 1) * xPosition),
  return i * xPosition,
 },
 ease: 'none',
})

You could also just give your elements classes and target them individually?

 

gsap.to('.icon-big', {
 xPercent: xPosition * 3,
 yPercent: yPosition * 3,
 ease: 'none',
})

gsap.to('.icon-small', {
 xPercent: xPosition,
 yPercent: yPosition,
 ease: 'none',
})

If you wanted to introduce some randomness we have a random utility function
You can use it like so...
 

// get a random number between 0 and 100 (no snapping)
gsap.utils.random(0, 100);

// get a reusable function that will randomly choose a value between -10 and 50
var random = gsap.utils.random(-10, 50, true);

// now we can call it anytime:
console.log( random() ); // random value between -10 and 50
console.log( random() ); // another random value between -10 and 50

// or even in a tween
gsap.to(".class", {
  x:"random(-100, 100, 5)" //chooses a random number between -100 and 100 for each target, rounding to the closest 5!
});

 

Hope this helps!

[Cassie]

I'm doing this in the second article actually, targeting by class and slightly tweaking the values.

https://www.cassie.codes/posts/making-a-lil-me-part-2/

[JoffreyPersia]

Hiiii Cassie !

Thank you so much
I watched your second tutorial few days ago and I didn't wanted to just create multiple timelines, but after your last post, I tried and succeded it with the logic of classes !

Thank you !
Here is the codepen updated :

See the Pen ExoxBex?editors=1111 by pixelmort27 (@pixelmort27) on CodePen

 

I am trying now to create a stagger and a scale up 'Elastic' for the icons 1-2sec after the page is loaded (I just played with the autoAlpha here for the try), but I can't play with the scale property because I created a class for these specific icons size.

 

Here is the final result : https://dev.3-6-9-12.org/

 

I also tried with the initial CSS transform: scale(0); transition : 0.4s; but it interfeer with the function movingObjects()

Have you an idea ?
 

[Cassie]

I would avoid mixing CSS and GSAP like this!

 

you can use GSAP set to set styles.

 

gsap.set(element, {
 scale: 1.2
})

 

[Cassie]

And well done! Champion 🥳

[JoffreyPersia]

Thank you

I made it thank to you !!