Jump to content
Search Community

Modifiers not working gsap3

smenegassi test
Moderator Tag

Go to solution Solved by smenegassi,

Recommended Posts

Hi,

I am trying to adapt Modifiers Path 1 pen of Blake Bowen to gsap3 and it is not working.
I have this right now and the modifier is not working.

What am I doing wrong ? Thanks for any guideline...

 

 

var ball = document.querySelector("#ball");

gsap.set(ball, { x: 100, y: 100 });

let getter = gsap.getProperty(ball);
var gx = getter ("x");
var gy = getter ("y");
console.log(gx);
gsap.to(ball, {
  duration: 3,
  x: 800,
  y: 300,  
  repeat: -1,
  yoyo: true,
  modifiers: {    
    y: function(y) {
      return y + Math.cos(gx / 100) * 30;
    }
  }

});

 

Link to comment
Share on other sites

You're just not accounting for the fact that "y" has a unit. In this case, px. So, for example, the y value may be something like 105.417px and then you're adding a number to that and returning something like "105.417px132.143" which the browser won't render. You should be passing back something with a unit that gets plugged directly into the translate(). See what I mean? 

 

gsap.to(ball, {
  duration: 3,
  x: 800,
  y: 300,  
  repeat: -1,
  yoyo: true,
  modifiers: {    
    y: function(y) {
      return (parseFloat(y) + Math.cos(gx / 100) * 30)) + "px";
    }
  }
});

Or if you wanna get fancy, just wrap your function with a gsap.utils.unitize(). Here's one that uses ES6 shorthand to make it streamlined:

gsap.to(ball, {
  duration: 3,
  x: 800,
  y: 300,  
  repeat: -1,
  yoyo: true,
  modifiers: {    
    y: gsap.utils.unitize(y => y + Math.cos(gx / 100) * 30)
  }
});

Does that clear things up? 

  • Like 3
Link to comment
Share on other sites

4 hours ago, smenegassi said:

In that way it works totally different then _gsTrasnform ? Do they really do the same thing ?

In the sense that it has units, yes, it works differently. Trust me, that's a GOOD thing. One of the improvements we made when rewriting everything for GSAP 3 was transforms can now work with various units (impossible before - everything had to be px-based), like x: "50vw" or y: "5em". That couldn't possibly work with the old _gsTransform object that only stored a regular number for each property. 

 

Also, _gsTransform always felt like a hack to me from an API standpoint. gsap.getProperty() is much, much cleaner and can be used for almost any property whereas _gsTransform was only for transform-related values. 

 

Does that clear things up? 

  • Like 3
Link to comment
Share on other sites

Yes there is a reason. I dont want a path (fixed) animation. I will have several elements I'll animate on  a X and Y axis . But to each X position  I want to apply a modifier to the Y pos based on a sinus or cos curve. I want to play with Maths !

The idea comes from Blake Bowen pen,

See the Pen rLzWNB by osublake (@osublake) on CodePen

Later I can manage to animate frequency or amplitude of theses sinus waves to give to each element it own movement. It is also un exercise for me .

Thanks. I keep studying and smiling.

Link to comment
Share on other sites

  • Solution

Hello,

I've finally succeeded to migrate Blake Bowen Modifiers path 1 exemple to getProperty.

It was a problem of scope....

Thanks Jack for your help. It was great help.  Here is the code of this exemple of migration from _gsTransform to getProperty to newbies :

 

var ball = document.querySelector("#ball");
gsap.set(ball, { x: 100, y: 100 });

var getter = gsap.getProperty(ball);


gsap.to(ball, {
  duration: 3,
  x: 800,
  
  y: 300,  
  repeat: -1,
  yoyo: true,
  modifiers: {    
    y: function(y) {
      var gx = getter("x");
      console.log(gx);
      return (parseFloat(y) + Math.cos(gx / 100) * 30) + "px";
    }
  }
});
  • Like 2
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...