Draggable Parallax effects in edge animate

[lancetom]

Hi all,

 

I was wondering if there is a way to control the timeline of edge animate like a parallax effects with the draggable and throwpropsplugin.

 

I am able to scroll the stage with the draggable :

 

              Draggable.create(sym.$("Stage"), {type:"scrollTop"})

 

but I don't know how to take control of the timeline and play animation and symbol when scrolling down and reverse when crolling up.

 

I want to be able to do an animation that could be like this web site " http://www.flashvhtml.com/ ".

 

Thanks for any help !

[Rodrigo]

Hi and welcome to the Greensock forums.

 

Unfortunately besides Chris Gannon I don't know of any one that manages Edge Animate here. Chris has made some jaw dropping stuff with it, but I simply don't use it so I can't help you.

 

Also we usually don't offer support for third party plugins or software that works on top, or with GSAP, basically because we're not experts in those tools, not because we don't want to help users in those cases, simply we're not capable to do so.

 

I suggest you try the edge animate forums:

http://forums.adobe.com/community/edge_animate

 

Just with a quick look I found this:

http://forums.adobe.com/message/5440834#5440834

 

You should ask for a way to control the timeline with JS code, which can be through a Draggable callback.

 

Rodrigo.

[Carl]

Like Rodrigo, I'm not intimately familiar with Edge Animate code. I would have to imagine though that there is some code similar to Flash's gotoAndPlay(), gotoAndStop() or command that can go to any frame of the timeline. 

 

In theory I would think it has to be possible to use a Draggable's position to decrement a value that can than be converted to a valid frame number and passed into one of the aforementioned commands.

 

If you have any success, we'd love to see what you come up with.

[chrisgannon]

This code should help you:

 

//the symbol or timeline you want to scrub through on the stage
var mySymbol = sym.getSymbol("mySymbol");
//the symbol's total duration
var mySymbolDuration = mySymbol.getDuration();
//the dragger symbol's element (the thing you're going to drag)
var draggerElement = sym.getSymbol("myDraggerSymbol").getSymbolElement();
//your min and max drag values
var minDrag = 0;
var maxDrag = 1200;
//set it to its minDrag position - this also populates the _gsTransform object used in onDrag
TweenMax.set(draggerElement,{
  position:'absolute',
  x:minDrag
}
); 

//create your Draggable instance
var scrubDragger = Draggable.create(draggerElement , {
         
   type:'x',
   bounds:{minX:minDrag , maxX:maxDrag },
   onDrag:onDrag
});



function onDrag(){
   //percent through your entire drag
   var dragPercent = (draggerElement[0]._gsTransform.x/maxDrag);
   //a percentage of the entire duration of the symbol you're scrubbing through
   var scrubToFrame = Math.round(dragPercent * mySymbolDuration);
   //tell that symbol to go to and stop at that frame (well, it's miliseconds actually - your value will be in the 1000s)
   mySymbol.stop(scrubToFrame);
};

If there are any errors in this code it's because I was up all night whilst my wife gave birth to our second son!

[lancetom]

Hi all,

 

Thank you to all you guys for all  the very quick answers !!

 

Ok I will try the code you wrote Chris, and you are forgiven if there is any mistake , I coudn't have done better...Gongratulations for your son.

[chrisgannon]

You're welcome - I just noticed a slight bug which I've fixed. I added the line(s):

//set it to its minDrag position - this also populates the _gsTransform object used in onDrag
TweenMax.set(draggerElement,{
 position:'absolute',
 x:minDrag
}
); 

[lancetom]

Hi Chris,

 

I am sorry but I am not a master in Javascript, I have some trouble to get the script working. I have tried to explain as better as I could.

 

I found this script write on scroll in the stage for edge animate:

Var positionScrollVertical = $(e.target).scrollTop();

Var pas = Math.floor(positionScrollVertical / 980 * 2000) 

// 980 = width of the stage, 2000 = length of timeline, there is an animation from 0 to 2000 ms.

Sym.stop(pas);

/*The animation is played when scroll down.
And it adds a symbol that is played between 220 and 260 px*/

//play
If(positionScrollVertical >220 && positionScrollVertical <260)
{
               Sym.getSymbol(“SymbolName”).play();
}

//Hide
If(positionScrollVertical > 700)
{
               Sym.getSymbol(“SymbolName”).play(0);
}

This is basically what I want to do with the JSAP draggable plugin and throwprops to add some better effects.

 

I have recapitulated all the process in an exemple.

 

1// I have my stage with a height of 2000 px and a width of 1024 px.

 

2// And I have a symbol (“Square”) that is a simple square that is out of the stage and that come from left to right in the stage in 2000 ms. this symbol is located at 600 px (height of the stage).

 

3// So I want when I scroll down the stage (with the Jsap draggable) to 600 px to make the symbol playing and reverse when I scroll up for exemple.

 

4// And same with an animation on the timeline, it’s a simple square (“Square_2”)  also located at 700 px (height of the stage) same as before out of the stage and it comes on the stage in 2000 ms.

 

Thanks for your help

 

Tom

[lancetom]

Hi Chris,

 

So I finally managed to get the code working , thank you it's nice.

 

But I have a few more question, It's seem that the dragger hide the symbol that is scrub through the stage even if this one is up on the element list, maybe there is something to do ? Because even If I lower the opacity I will not able to click on any button.

 

I try with srollTop but I can't scroll more than a few pixel, what setting should I put in the code ?

 

And the last, how would you do to have control on the timeline ? Does the timeline got a name like ("Timeline")

 

Thanks for the code

[chrisgannon]

Sorry I'm not sure I follow you - can you rephrase your question?

 

If you're asking how to drag through the main timeline it's simple. Just change these lines from:

//the symbol or timeline you want to scrub through on the stage
var mySymbol = sym.getSymbol("mySymbol");

to:

//the symbol or timeline you want to scrub through on the stage
var mySymbol = sym;

This now just references 

sym 

which is the main timeline

[JRHall]

This looks like exactly what I need, but where does the code go? In compositionReady?

 

Also, will this only work with Greensock's Draggable? I have been using jqueryUI up til now.

[mlovett]

 

This code should help you:

 

//the symbol or timeline you want to scrub through on the stage
var mySymbol = sym.getSymbol("mySymbol");
//the symbol's total duration
var mySymbolDuration = mySymbol.getDuration();
//the dragger symbol's element (the thing you're going to drag)
var draggerElement = sym.getSymbol("myDraggerSymbol").getSymbolElement();
//your min and max drag values
var minDrag = 0;
var maxDrag = 1200;
//set it to its minDrag position - this also populates the _gsTransform object used in onDrag
TweenMax.set(draggerElement,{
  position:'absolute',
  x:minDrag
}
); 

//create your Draggable instance
var scrubDragger = Draggable.create(draggerElement , {
         
   type:'x',
   bounds:{minX:minDrag , maxX:maxDrag },
   onDrag:onDrag
});



function onDrag(){
   //percent through your entire drag
   var dragPercent = (draggerElement[0]._gsTransform.x/maxDrag);
   //a percentage of the entire duration of the symbol you're scrubbing through
   var scrubToFrame = Math.round(dragPercent * mySymbolDuration);
   //tell that symbol to go to and stop at that frame (well, it's miliseconds actually - your value will be in the 1000s)
   mySymbol.stop(scrubToFrame);
};

If there are any errors in this code it's because I was up all night whilst my wife gave birth to our second son!

 

 

So I'm trying to use this code, but I'm having a couple of issues. My main one is that I don't want my "draggerElement" to start at x:0, but when I change the value for "minDrag" to anything above"0" it doesn't scrub through the entire target symbol (mySymbol).

 

How do I get my "draggerElement" to have a min bounds of "1088" and max bounds of "1511," but still scrub through the entire target symbol?

[Diaco]

Hi mlovett 

 

pls try this :

var D = document.createElement('div');
var mySymbol = sym;
var mySymbolDuration = mySymbol.getDuration();
var minDrag = 500;
var maxDrag = 1200;
TweenMax.set(D,{ x:minDrag}); 
var scrubDragger = Draggable.create(D, {
trigger: "#Stage",
   type:'x',
   bounds:{minX:minDrag , maxX:maxDrag },
   onDrag:onDrag
});
function onDrag(){
   var dragPercent = (scrubDragger[0].target._gsTransform.x/maxDrag);
   var scrubToFrame = Math.round(dragPercent * mySymbolDuration);
   mySymbol.stop(scrubToFrame);
};
onDrag();