Jump to content
GreenSock

retropunk

rotationX get? and/or Computed Properties in JS

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

Hey guys, I am working on this example with a card rotator based on a GS CodePen.

http://retropunk.com/files/workcards/

Each card rotates forward twice and moves to the next one.

What I would like to do is rotate a card once and then move to the next/random one.

In AS3 I would do something like this

if(cardsArray[currentCard].rotationX == -360)
{
  resetProperties()
}
else
if(cardsArray[currentCard].rotationX == -180)
{
  animateAgain()
}

I tried looking up Computed Properties in JS but I think I'm barking up the wrong tree.

Any help on this subject would be helpful. I'm a little fried at the moment

 

Thanks!

- P

 

 

 

Link to comment
Share on other sites

Hi,

 

Not too long ago I created some stuff with random ordering inside a timeline. Give the following code a try:

var elements = $(".elementClass"),//create an JQuery object with all the DOM elements
    elementsAmount = elements.length,//amount of elements in the array
    selected = [],//empty array
    count = 0,//how many elements are selected
    num,
    tl = new TimelineMax();//your master timeline

function populateTimeline()//function to add the tweens in the timeline
{
    if(count < elementsAmount)//are all elements selected?
    {
        var getNum = getNumber(elementsAmount)//get a random number
        
        if($.inArray(getNum, selected) < 0)//check if the number has been selected already
        {
            selected.push(getNum);
            tl.to(elements[getNum], time, {/*tween vars*/});
            count++;//one more element has been selected
            populateTimeline();//execute the function again
        }
        else//the number has been selected
        {
            populateTimeline();//execute the function again
        }
    }
}

populateTimeline();

function getNumber(number)//function to get the random number
{
    num = Math.round(Math.random() * (number-1));
    return num;
}

Also if you want to create a new sequence once the timeline has ended you can add a callback that clears the timeline and calls the populate function again, or if you're comfortable with one sequence per page load you can add a repeat:-1 to the timeline.

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

I guess my long explanation mislead my question.

 

rotationX is not something I can access in JS the way you would in AS3

I am trying to figure out what the rotationX of a div is so I know which way to tween it each time.

Hope that makes more sense.

 

Thanks

Link to comment
Share on other sites

I've setup your page in a

See the Pen vGEDm by jamiejefferson (@jamiejefferson) on CodePen

to make this a bit quicker to test out. I just added an onUpdate to your tweens to show it working:

var output = $('#rotation');
var toDegrees = 180 / Math.PI;
function updateCard()
{
  output.text(cardsArray[currentCard].prop('_gsTransform').rotationX * toDegrees);
}

Once a tween has recorded its starting values, it will save a 'secret' _gsTransfrom property on the DOM element. You can get the rotationX value from this (it's stored in radians so you may need to convert back to degrees).

element._gsTransform.rotationX; // standard DOM element
element[0]._gsTransform.rotationX; // jQuery element/collection, or
element.prop('_gsTransform').rotationX;

(remember that _gsTransform won't be available until a tween has been rendered on the element)

Link to comment
Share on other sites

thats what I figured. That there would be a 'secret' property on the element. Interesting.

This explanation helps. 

Thanks for you Pen too. I'm always interested in seeing how other people code stuff. Very cool

 

Thanks again for the explanation

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