why doesn't tweenTo work in my code?

[Friebel]

What I'm after is playing the TimelineMax from the current position to another time/label.

I figured the tweenTo() method is exactly what I want.

But for some reason it's not moving the timelines playhead and blocks other timeline-functions.

 

What I'm creating

A parallax scroller with some deph layers. A timeline contains the full range of x-positions for all layers, so if I change the position of the timeline-playhead the parallaxscroller scrolls (each layer on it's own range/depth). 

If the playhead is at position 0 the scroller is at full left. If the playhead is at position [duration] the scroller is at full right of the horizontal axis.

Then I bind the playhead-position to the mouseover of a HTML5 canvas (using EaselJS), so that the mouseposition controls the scroller.

 

This is what I have

First I declare a paused timeline with the full range for the scroller:

var tlParallax = new TimelineMax({paused:true});
        tlParallax
            .fromTo(sky, duration, { x:0, ease:Sine.easeIn }, { x: -240 * 0.05, ease:Sine.easeOut }, 0)
            .fromTo(moon, duration, { x:0, ease:Sine.easeIn }, { x: -240 * 0.1, ease:Sine.easeOut }, 0)
            .fromTo(housesBack, duration, { x:0, ease:Sine.easeIn }, { x:-240 * 0.4, ease:Sine.easeOut }, 0)
            .fromTo(housesFront, duration, { x:0, ease:Sine.easeIn }, { x:-240 * 0.6, ease:Sine.easeOut }, 0)
            .fromTo(street, duration, { x:0, ease:Sine.easeIn }, { x:-240 * 1.0, ease:Sine.easeOut }, 0)

            .addLabel('treeInView', 10);

In the canvas mouseover event (using easelJS) I put:

function onStageMouseMove(event) {
        tlParallax.seek(event.stageX);
    } 

...so the timeline then seeks the right time in the timeline, wich sets the right positions for each parallax-layer.

 

To have one part scroll into view, no matter where the parallax scroller is, I have a button with the following code underneath the canvas:

tlParallax.tweenTo('treeInView');

The problem

The parallax scroll is working fine and seeks on mouseover.

But once the button with the tweenTo is clicked the timeline fully stops working and doesn't tween to the wanted position. What about that?

 

What I've tried:

* When I replace 'tweenTo' with 'seek' it's working fine, but then I'm missing the smooth tween I'm after.

 

* There cannot be a conflict between the seek() function inside the mouseOver event and the clickfunction of the button, because the button is outside the canvas and the mouseover only triggers inside the canvas.

 

* Both tweenTo a label as tweenTo a position have the same result

 

* I tried putting the timeline on paused: false, but it didn't help

 

* I also replaced seek() with gotoAndStop(), without any luck

 

-

 

Am I missing something here?

 

For customers sake I can't place the code here, sorry.

Hopefully somebody can still give me some advise.

 

Thanks!

[Jonathan]

Hello and Welcome to the GreenSock Forum

 

Is there a way you can just post limited code example via

See the Pen by pen (@pen) on CodePen

or jsfiddle.. like your GSAP timeline code so we can see it in context to better help you? thx

[Friebel]

Hi Jonathan, I just edited my post with the parts you asked. Hopefully it helps

[Carl]

From your description your approach seems logical. Can't really see what or where the problem is. 

 

As Jonathan suggested a VERY simple demo would really help. We don't need your real prodcution / client files. In fact I think you could just create a very simple timeline with 1 or 2 tweens in it... no need for fancy parallax-ing or anything.

 

-c

[Friebel]

Thanks Carl. I understand. I'm creating a simpler version in a CodePen at the moment...

[Friebel]

Alright, by creating the simpler example on CodePen I know what's the problem now...

 

The tweenTo method ís working in my code, but it takes sóoooo long that I didn't see it moving...

That's because I set the duration of the timeline to the width of the canvas (so that each pixel the mouse moves is translated into an exact position on the timeline).

 

The width of my canvas is 960 pixels, so the timeline duration is 960 seconds = 16 minutes.

So to go from the current position to the new position using tweenTo takes forever...

 

To solve this I'll higher the timeScale method to make the transition faster on the tweenTo.

By the way, that's what I like about Greensock: there is even a timeScale method! briljant!

 

This is my codepen by the way (with the timeScale included):

See the Pen vBcJx by maarten77 (@maarten77) on CodePen

 

Just another day of coding

 

Thanks for your help!