Jump to content


Function as property and value

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

Hi, I'm new to the forums, new to GreenSock GSAP too. :)


So far I'm using it quite effectively with the 5% of what I've worked with ;)


I've got a bit of an issue trying to get a small script working. I wonder if anyone can help.


The following code effects the x property with a randomisation of 2 possible values (-100% or 100%) which all works great:


  var wipeAnimation = new TimelineMax()
    .staggerFromTo('section.panelx', 1, {
              var randWay = parseInt((Math.random() * 2) + 1);

              if(randWay == 1) return "-100%";
              else if(randWay == 2) return "100%";
        {x: "0%", y: "0%", ease: Linear.easeNone}, 1)


The issue I have is that I also would like to randomise the property itself between 'x' and 'y' with the randomised value of before (-100% or 100%)

  var wipeAnimation = new TimelineMax()
    .staggerFromTo('section.panelx', 1, {
              var randWay = parseInt((Math.random() * 4) + 1);

              if(randWay == 1) return {x:"-100%"};
              else if(randWay == 2) return {x:"100%"};
              else if(randWay == 3) return {y:"-100%"};
              else if(randWay == 4) return {y:"100%"};
        {x: "0%", y: "0%", ease: Linear.easeNone}, 1)



I'm trying to return both the property and value as one as an object but does't seem to understand.


Is there a way to do this?


Many thanks






Link to comment
Share on other sites

That's not valid JavaScript, but you're close. 


var wipeAnimation = new TimelineMax().staggerFromTo(
  // Immediately invoking the function will return the object
  (function() {
    var randWay = parseInt(Math.random() * 4 + 1);

    if (randWay == 1) return { x: "-100%" };
    else if (randWay == 2) return { x: "100%" };
    else if (randWay == 3) return { y: "-100%" };
    else if (randWay == 4) return { y: "100%" };
  { x: "0%", y: "0%", ease: Linear.easeNone },


And you don't have to create the object inline. That will allow you to add properties after you create it. 


  • Like 2
Link to comment
Share on other sites

Thanks OSUblake


The code runs successfully but the randomiser function is only requested once per run. With the first example, this gathers randomised results for each pass (not entirely sure why it passes through here more times than it has matching elements).


So to randomise the stagger for elements I need to have a random number generated for each one. This should highlight the problem. Just call the either example1() or example2() from the top 


See the Pen PKKeXP by ZombiesByte (@ZombiesByte) on CodePen



Link to comment
Share on other sites

Sorry. I didn't realize you were trying to do that on every element. As you noticed, that won't work because the function setting up the property will only get called once.


To do that for every element, you'll need to loop through them and set the value directly.

var wipeAnimation = new TimelineMax();
var panels = document.querySelectorAll("section.panelx");
for (var i = 0; i < panels.length; i++) {
  var value = Math.random() < 0.5 ? "-100%" : "100%";
  var from  = Math.random() < 0.5 ? { x: value } : { y: value };
  wipeAnimation.fromTo(panels[i], 1, from, {
    x: "0%", y: "0%", ease: Linear.easeNone
  }, i * 1);



See the Pen OjjEOg?editors=0010 by osublake (@osublake) on CodePen


  • Like 4
Link to comment
Share on other sites

Thank OSUblake


That's very dry code! I like that a lot. Works perfectly thank you very much. :D


I've avoided using shorthand if statements all these years but I think you just convinced me to start using them. I think they were always something I hated because you used to see them a lot in PHP for nasty template logic but those days are gone now I suppose ;)


This has helped me considerably in understanding some things about greenstock's GSAP. :geek:

  • 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.