benoit

opacity based on x in timeline

Recommended Posts

 

Hi,

How to do this ? (without a second tl.to).

 

 

var tl = new TimelineMax();
tl.to('div',4,{
  x:'+=2400', 
  modifiers : {
    x : function(x){
    return x%500;
    }
    opacity : function(x){ /* don't try it at home :O) */
      return x/500;
    }
},ease:Linear.easeNone},0);

Share this post


Link to post
Share on other sites

Start with this and modify as you see fit

 

 

  • Like 3
  • Haha 1

Share this post


Link to post
Share on other sites

Thank you Carl,

 

I try 'return this.target._gsTransform.x / 500' !

 

Share this post


Link to post
Share on other sites

@Carl anyway to know the current target if this is not target[0] ?

Share this post


Link to post
Share on other sites

autoreply rtfm
 

Quote

Parameters: value, target

The modifier functions are passed two parameters:

  1. value (number | string) - the about-to-be-applied value from the regular tween. This is often a number, but could be a string based on whatever the property requires. For example if you're animating the x property, it would be a number, but if you're animating the left property it could be something like "212px", or for the boxShadow property it could be "10px 5px 10px rgb(255,0,0)".
  2. target (object) - the target itself

https://greensock.com/modifiersPlugin

Share this post


Link to post
Share on other sites

that's a good find. using that information my code can be simplified if we specify the target param

 

modifiers : {
    x : function(x){
    return x%500;
    },
    opacity : function(x, target){
      return target._gsTransform.x / 500
    }

 

 

also worth noting, in your example you are specifying "div" as the target of your tween so

 

this.target is a nodelist (like an array)

this.target[0] is the first div

 

 

  • Like 3

Share this post


Link to post
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.