Dennyno Posted March 28, 2023 Share Posted March 28, 2023 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 Link to comment Share on other sites More sharing options...
GreenSock Posted March 29, 2023 Share Posted March 29, 2023 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. Link to comment Share on other sites More sharing options...
Dennyno Posted March 29, 2023 Author Share Posted March 29, 2023 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?) Link to comment Share on other sites More sharing options...
Solution GreenSock Posted March 30, 2023 Solution Share Posted March 30, 2023 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 3 Link to comment Share on other sites More sharing options...
Dennyno Posted March 31, 2023 Author Share Posted March 31, 2023 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 1 Link to comment Share on other sites More sharing options...
Steve Lu Posted April 10, 2023 Share Posted April 10, 2023 (edited) 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 Link to comment Share on other sites More sharing options...
akapowl Posted April 10, 2023 Share Posted April 10, 2023 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   3 Link to comment Share on other sites More sharing options...
GreenSock Posted April 10, 2023 Share Posted April 10, 2023 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. 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now