Performance Upgrade? + Merging with Acceletometer Values

[Dennyno]

EDIT: The issue in on the second pen. Seems url are reversed 😅

Just to know if is there any performance boost I may add or fix?
Using gsap quicksetter might be a game changer?

Also I am finding issue while merging this pen with another one to use acceletometer values, any help into that route?

Using CSS values or setting attributes, everything someway works, but from my side, using GSAP I see nothing moves.

Do I need maybe, to fetch first the device alfa, beta and gamma values before loading gsap? 

See the Pen dyqaBrK by DedaloD (@DedaloD) on CodePen

Maybe the problem is that I need first user permission, and this may get issues with gsap values?

 

See the Pen VwGREpL by DedaloD (@DedaloD) on CodePen

[GreenSock]

On 3/28/2023 at 5:29 AM, Dennyno said:

Using gsap quicksetter might be a game changer?

I think you meant gsap.quickTo(), right? And yes, that would definitely be better than what you're currently doing. Right now, you're creating an entirely new tween for every element on every mousemove event. That's extremely wasteful. And you're creating a bunch of conflicting tweens that are all fighting for the same properties of the same objects. 

 

On 3/28/2023 at 5:29 AM, Dennyno said:

Using CSS values or setting attributes, everything someway works, but from my side, using GSAP I see nothing moves.

Can you please be more specific? I don't see anything moving on the non-GSAP CodePen. I'm not sure what you're looking at when you're concluding that GSAP isn't working, so it'd be super helpful if you could elaborate a bit. 

 

On 3/28/2023 at 5:29 AM, Dennyno said:

Do I need maybe, to fetch first the device alfa, beta and gamma values before loading gsap? 

You certainly don't need to do anything or get anything before loading GSAP. 

[Dennyno]

Hi @GreenSock this way?

 

function parallaxMoveDesk() {
  const gyros_container = document.querySelector('.container-gyro');
  if (gyros_container) {
    const gyros = gyros_container.querySelectorAll('.figure-img_gyro');
    const movementRange = 30;

    gyros_container.addEventListener('pointermove', e => {
      const relX = e.clientX;
      const relY = e.clientY;

      gyros.forEach((gyro, index) => {
        const movement = (index % 2 === 0 ? movementRange : -movementRange) * 0.01;
        const moveX = (relX - window.innerWidth / 2) * movement;
        const moveY = (relY - window.innerHeight / 2) * movement;

        gsap.quickTo(gyro, {
          xPercent: -moveX,
          yPercent: moveY,
          duration: 0.3, // Use a shorter duration
          ease: 'power2.out'
        });
      });
    });
  }
}

On the other pen you can see anything as it's inside a codepen iframe and needs grant on mobile to use gyroscope, btw I solved thanks
This code using quickTo seems not working (or am I missing something?)

[GreenSock]

No, gsap.quickTo() is a totally different API - you can't just swap that in for a gsap.to(). Please read the docs. 

 

You may also want to look into gsap.matchMedia()

 

Perhaps you were looking for something like this?: 

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

[Dennyno]

Thanks a lot for clarifying @GreenSock !
This is a game changer for many animations then, this API needs to be more highlighted.

Talking about the matchmedia I'll def use it, comes handy

[Steve Lu]

Hi, @GreenSock 
Is .quickto() accept to pass numeric value only? what if I need to use .quickto() for clip-path?
The below code seems not works? 

const moveClipPath = gsap.quickTo(child,"clip-path",{duration: 0.5,ease: "power3"}).
document.addEventListener('mousemove', e => {
//collect left and top position here
  moveClipPath(`circle(60% at ${left}% ${top}%)`)
});

Edited April 10, 2023 by Steve Lu

[akapowl]

1 hour ago, Steve Lu said:

Is .quickto() accept to pass numeric value only?

 

Judging from the explanation in the quickTo() docs, I personally would think so.

 

Think of a quickTo() like an optimized function tied to one particular numeric property  ...

 

 

 

1 hour ago, Steve Lu said:

what if I need to use .quickto() for clip-path?

 

If you wanted to make use of percentage-values like in your code-snippet example though, you would have to make sure you'd convert the absolute coordinates you'd get from any of the mousemove event properties to percentage values first, anyway.

 

You could e.g. make use of gsap.utils.mapRange() for that part.

 

Then for quickTo-ing the clipPath, you could make use of CSS-Variables instead of trying to quickTo the full clip-path value.

 

While the latter does not appear to work (although I for sure might be missing something) ...

 

See the Pen rNqVjqw by akapowl (@akapowl) on CodePen

 

 

See the Pen zYmGNad by akapowl (@akapowl) on CodePen

 

... using CSS-Variables works like a charm.

 

I hope that will be helpful. Happy tweening!

 

 

Edit:

Here's an extra codepen making use of absolute values instead of percentages - which is just a bit shorter and simpler.

 

See the Pen bGmdgrP by akapowl (@akapowl) on CodePen

 

 

[GreenSock]

5 hours ago, akapowl said:

While the latter does not appear to work (although I for sure might be missing something) ...

Right, that won't work because you're not feeding in a numeric value. That's a complex string. 

 

All animations boil down to interpolating between numbers. With complex strings, it must parse that string, find each numeric value (in order) and break each one down into an individual property tween that then gets re-combined into a complex string on each tick. gsap.quickTo() gives you a way to pipe a numeric value directly into that existing broken-down property tween so in this case it's several different ones internally since it's a complex string value. This is why we explicitly say in the docs that quickTo() is ONLY for numeric properties and it skips all the parsing that'd be necessary with other complex values, unit conversion, etc.

 

The CSS variable solution is good, or you could just reuse the same tween instance but invalidate() it each time you update the value on its vars object.