Jump to content
Search Community

opacity based on x in timeline

benoit test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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