Timeline animation - need a bit of help

[Lars Ejaas]

I am working on a GSAP animation and am close to finished, but I simply can't get it working as intended.

 

The idea is, that the initial animation will run (click the "movie play" icon to restart the animation) and after that it is an interactive menu.

The canvas should scroll op and down when clicking on the arrow.
 

Problems:
- when clicking the arrow, the arrow and string should pull down slightly (Tl_pull) and the canvas roll-up. On the top, the Tl_pull should work in a similar way and then fire the canvas roll down animation. 
But right now the Tl_menuUpDown.reversed version is behaving oddly (the canvas is just rolled really quickly to the top) and then the Tl_pull timeline is fired afterwards!??

- Look at the initial animation. Canvas is rolling down and the string is "rotated" out to the viewer (part of the Tl_menuUpDown animation)  and the arrow is turned 180 degr. (as it should).
But the string should stay there only very briefly and then roll down again immediately - it stays "stuck" at the top - can't figure out why?

I initially had a Tl_menuUpDown.to line (I have commented it out) but the arrow didn't turn? I am unsure how to avoid the "sticky" effect when the arrow is turning. 

I hope I made my intentions clear with the animation - I think it will make more sense when you see it live! 

 

And BTW: GSAP is really awesome - I have recently worked with the new ScrollTrigger plugin - I am BLOWN AWAY - wow!

See the Pen zYqzEBr by lars-ejaas (@lars-ejaas) on CodePen

[mikel]

Hey @Lars Ejaas,

 

I am not sure if you would like it that way.

 

See the Pen ExKXbzO?editors=1010 by mikeK (@mikeK) on CodePen

 

Tl_menuUpDown.to(StringAndSign, {duration: 0.2, scaleY: 0.10, transformOrigin: 'center top', repeat:1, yoyo:true, repeatDelay:0.1});
// Tl_menuUpDown.to(StringAndSign, {duration: 0.2,scaleY: 1, transformOrigin: 'center top'});

 

Happy tweening ...

Mikel

[Lars Ejaas]

40 minutes ago, mikel said:

Hey @Lars Ejaas,

 

I am not sure if you would like it that way.

 

Happy tweening ...

Mikel

Thanks Mikkel!

That seem to resolve the "sticky" problem when the arrow is turning - brilliant!
I have made a new codePen with the updates.

See the Pen GRZEymr?editors=0010 by lars-ejaas (@lars-ejaas) on CodePen

The initial animation is perfect. 

But I still do not understand why the Tl_menuUpDown behaves this odd when I click the arrow?

[mikel]

Hey @Lars Ejaas,

 

How about this option?

 

See the Pen oNxwaQp by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[GreenSock]

@mikel it looks like you had a typo:

// BAD
green.timeScale().play()

// GOOD
green.timeScale(0.5).play()

Here's a fork with 3.5.1 loaded too: 

See the Pen 6a338f27a318bc706738485897277331 by GreenSock (@GreenSock) on CodePen

[mikel]

 

Hey JACK,

 

Thanks ...

[Lars Ejaas]

@mikeland @GreenSock  - thanks a lot for helping out! Sorry for taking so long to respond!I

 

Got "stuck" with other projects and didn#t get to finish this animation before today.

 

This is the result, a bit different than my initial idea, but I like how it turned out in the end 😉

See the Pen zYqjmvZ by lars-ejaas (@lars-ejaas) on CodePen

[mikel]

Hey @Lars Ejaas,

 

I suspect you are not yet satisfied with the board animation.
Here is a suggestion

 

See the Pen wvGjbLM by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel