Jump to content
Search Community

where is the interactive timeline demo ? [SOLVED]

jonForum test
Moderator Tag

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 guys, the guy in this video say it give the interactive demo to play and understand the timeline

https://greensock.com/position-parameter

but i cant found the link ?

and the demo on page are not interactive and i cant edit the code !

RCqIH1AF_o.png

 

I'm afraid to look a little idiot but someone could provide me the link from this demo, because that's guy does not give a solution about the issue from 6:40 

 

So i need the demo to try understand how solve this issue i also get in my engine , thanks and sorry if is a misunderstand from my English.

Link to comment
Share on other sites

Hey @Carl, you're The Guy so, maybe you've got a link?

 

But, what is your question jonForum? I don't see anything wrong in the video. He's just bringing up a point that people need to be aware of.

 

If you want to stich two relatively positioned tweens together, you can use a label.

 

tl.to(el1, 2, {})
tl.add('MyLabel', '-=1')
tl.to(el2, 0.5, {}, 'MyLabel')
tl.to(el3, 0.5, {}, 'MyLabel+=0.1') // this tween will start 0.1 seconds after the one above because 'MyLabel'

 

Link to comment
Share on other sites

33 minutes ago, Dipscom said:

Hey @Carl, you're The Guy so, maybe you've got a link?

 

But, what is your question jonForum? I don't see anything wrong in the video. He's just bringing up a point that people need to be aware of.

 

If you want to stich two relatively positioned tweens together, you can use a label.

 


tl.to(el1, 2, {})
tl.add('MyLabel', '-=1')
tl.to(el2, 0.5, {}, 'MyLabel')
tl.to(el3, 0.5, {}, 'MyLabel+=0.1') // this tween will start 0.1 seconds after the one above because 'MyLabel'

 

 

hi, hum , i follow recommendation about to split my timeLine in functional code.

https://css-tricks.com/writing-smarter-animation-code/

This it was my behavior i expect but code was unreadable "too Complexe to manage"

D8IEHMS8_o.gif

now i re-factorize all animation in function and i get more powerful manager and readable.

But am get weird behavior and i need test and play with timeline demo to understand what append here and how i can fix this !, 

I try many hack but am not able get what i expect

        const master = new TimelineMax({paused: true}).repeat(-1).repeatDelay(1);
        master.add( sourceBackAtk(),'#focus');
        master.add( sourceAtk(),'#atk'); 
        master.add( showDammage(),`#atk+0.2`);
        if(items){ // if items? hack the timeline
           master.add( itemFocus(),'#focus');
           master.add( itemTrow(),'#atk+0.2'); // shoud play at #atk +0.2 ?
           master.add( itemFall()); // shoud play after 'itemTrow' ?
        }

gHwXv8Rh_o.gif

 

Fully code are here , but am not able to create a demo with , it will take me a fully day ! 

But am pretty sure it my label showDammage that *%$# all because am not understand timeline in deep ! 

I think the interactive demo should help me a lot.

    actionPlay_attack(action){
        const source = action.source;
        const target = action.target;
        const actionSetup = $states.getActionSetupFrom(source, target, action.type);
        const damages = this.computeDammage(source,target,actionSetup);

        const items = action.items && $huds.combats.addItemSlotToRegisterMap(action.source);
        const tCollide = ((target.p.width/2)+(source.p.width/2))*(source.p.x<target.p.x?-1:1); // collid restriction with reverse ?
        source.p.position.zeroApply();//zero position de retour
        //!Step:ANIMATION FOR ITEMS MODE
        const rev = source.isRevers && -1 || 1;
        const sXY = source.p.position.clone();// source XY
        const tXY = target.p.position.clone();// target XY
        const dX = source.p.x-target.p.x; // distance X from source et cible
        const dY = source.p.y-target.p.y; // distance Y from source et cible
        const tWH = target.p.getBounds(); // target width height (compute camera)
        const sWH = source.p.getBounds(); // source width height (compute camera)
        
        //const tl = new TimelineLite({paused:true,repeat:4});
        const speed = 1; //?TODO: need sync with spine2d need study?
        const ih = 75; // constante items height from size : help math performance
        const itPositions = items.map(it => it.position);
        const itScales    = items.map(it => it.scale   );
        /////////////////////////////////////////////////////////////////////////////
        function sourceBackAtk(){
            const tl = new TimelineMax();
            tl.call(() => { $camera.moveToTarget(source,8,5); },null,null,'#TargetHitItem') // TODO: AJOUTER UN SYSTEM TIMELINE POUR CAMERA AVEC += -=
            tl.call(() => {
                const entry = source.s.state.setAnimation(3, "atk0", false);
            } ,null,null)
            .to(source.p.position, 0.5, {x:`-=${120*rev}`, y:`-=${dY/2}`, ease: Expo.easeOut  } )
            return tl;
        };
        function sourceAtk(){
            const tl = new TimelineMax();
            tl.call(() => {  $camera.moveToTarget(target,10,2.5,Power4.easeOut); },null,null)
            tl.to(source.p, 0.1, {x:target.p.x+tCollide, y:target.p.y, zIndex:target.p.y+1, ease: Power4.easeNone })
            tl.call(() => { target.s.state.setAnimation(3, "hit0", false) },null,null)
            tl.to(source.p, 1, {x:`+=${30*rev}`, ease: Power2.easeOut })
            return tl;
        };
        function itemFocus(){
            const tl = new TimelineMax()
            tl.to(itPositions, 0.5, {x:`+=${30*rev}`, y:(i,it)=>`-=${dY/2+(100+ih*i)}`, ease: Back.easeOut.config(1.4) },0)
            .fromTo(items, 1, {rotation:Math.PI*2},{rotation:()=>Math.randomFrom(0,4,2), ease: Back.easeOut.config(1.4) },0)
            tl.to(itScales, 0.3, {x:1, y:1, ease: Back.easeOut.config(4) },0)
            return tl;
        };
        function itemTrow(){
            const tl = new TimelineMax();
            tl.to(items, 0.2, {x:tXY.x ,y:tXY.y-tWH.height/2,zIndex:target.p.y+1, ease: Back.easeIn.config(1) },0 ) // projet vers target
            .to(itScales, 1, {x:'+=1' ,y:'+=1', ease: Elastic.easeOut.config(1, 0.3) },0.2)
            .to(items, 1, {rotation:()=>`+=${Math.randomFrom(1,15)}`, ease: Expo.easeOut },0.2 ) // when fall from ran rotation, hit with *-1
            .to(itPositions, 1, { y:tXY.y-tWH.height, ease: Expo.easeOut },0.3 ) 
            .to(itPositions, 1, {x:(i)=>`+=${((ih*i)+50)*rev}`, ease: Power4.easeOut },0.3 ) // imercy on hit ==>>
            return tl;
        };
        function itemFall(){
            const tl = new TimelineMax();
            tl.addLabel( '#hit', 0.4 ) // target Hit by items
            tl.addLabel( '#bounce', 0.7 ) // items start falling
            tl.to(itScales, 0.4, {x:1 ,y:1, ease: Expo.easeIn },0 )
            tl.to(itPositions, 0.4, {x:`+=${30*rev}`,y:tXY.y, ease: Expo.easeIn },0 )
            items.forEach(it => {
                const rr = Math.randomFrom(-4,10,2); // random rotation
                const rx = Math.randomFrom(4,10)*-rr // random X sol (dir from ran rot)
                const rt = Math.randomFrom(0,0.3,2); // ran time
                tl.to(it, 0.4, {rotation:()=>`+=${rr}`, ease: Expo.easeIn },0 ) // when fall from ran rotation, hit with *-1
                tl.to(it.position, 0.3, {x:(i)=>`+=${rx}`, y:'-=50', ease: Power2.easeOut },'#hit') // items hit gound and start fake Physic
                .to(items, 0.6+rt, {rotation:()=>`+=${rr*-1}`, ease: Power2.easeOut },'#hit' ) // when fall from ran rotation, hit with *-1
                tl.to(it.position, 0.4+rt, {y:target.p.y, ease: Bounce.easeOut },'#bounce' ) // Y
                .to(it.position, 0.6+rt, {x:`+=${rx/2}`,ease: Power2.easeOut },'#bounce' ) // X 
            });
            return tl;
        };

        function showDammage(){
            const tl = new TimelineMax();
            const txt = new PIXI.Text(damages.total,$txt.styles[3]);
            txt.anchor.set(0.5,1);
            txt.convertTo2d();
            txt.proj._affine = 5
            tl.call(() => {
                txt.position.copy(tXY);
                $stage.scene.addChild(txt) 
            })
            tl.to(txt.position, 1, { x:'+=65', y:`-=${tWH.height}`, ease: Expo.easeOut },0);
            tl.fromTo(txt.scale, 2, { x:0,y:0},{ x:2,y:2, ease: Elastic.easeOut.config(1.2, 0.3) },0);
            tl.fromTo(txt, 2.5, { rotation:-4},{ rotation:0, ease: Elastic.easeOut.config(1.6, 0.6) },0);
            tl.to(txt, 1, {
                x:"+=40",
                y:"-=20",
                alpha:0, 
                ease: Expo.easeOut, delay:2,
                onComplete: () => {
                    txt.parent.removeChild(txt);
                },
            });
            return tl;
        };

        const master = new TimelineMax({paused: true}).repeat(-1).repeatDelay(1);
        master.add( sourceBackAtk(),'#focus');
        master.add( sourceAtk(),'#atk'); 
        master.add( showDammage(),`#atk+0.2`);
        if(items){ // if items? hack the timeline
           master.add( itemFocus(),'#focus');
           master.add( itemTrow(),'#atk+0.2'); // shoud play at #atk +0.2 ?
           master.add( itemFall()); // shoud play after 'itemTrow' ?
        }

 

Link to comment
Share on other sites

Question(s):

 

Have you noticed that your label is written as '#atk+0.2' when it should have been 'atk+=0.2'? Why the '#' at the start of it? It really isn't necessary and will probably confuse you/other people in the future. Also, have you noticed that you have used backticks in one of your labels? Consistency is key to less stress... Finally, does the master timline has to be an infinite timeline (repeat:-1)?

 

Side comment:

 

8 minutes ago, jonForum said:

hi, hum , i follow recommendation about to split my timeLine in functional code.

https://css-tricks.com/writing-smarter-animation-code/

 

The guy who wrote the above article is the Same Guy who confused you with the video. Just Sayin'... ;)

 

  • Like 2
  • Haha 1
Link to comment
Share on other sites

3 minutes ago, Dipscom said:

Question(s):

 

Have you noticed that your label is written as '#atk+0.2' when it should have been 'atk+=0.2'? Why the '#' at the start of it? It really isn't necessary and will probably confuse you/other people in the future. Also, have you noticed that you have used backticks in one of your labels? Consistency is key to less stress... Finally, does the master timline has to be an infinite timeline (repeat:-1)?

 

 

I use ` '#' ` for all tag animations anchor in my projet, it help me for read, find, search specific key.
It's also a charcode use for jump on anchor in html page if i remember https://help.typepad.com/anchor-tags.html

 

Sorry i forget remove it, the  .repeat(-1).repeatDelay(1) are only here for debug and see animation in loop because my eyes are bad ?

 

if i use 'atk+=0.2' i get strange result on the repeat debug, but it seem work with +0.2

 

Quote

Side comment:

The guy who wrote the above article is the Same Guy who confused you with the video. Just Sayin'... ;)

thank good to know, it very nice tuto 

  • Thanks 1
Link to comment
Share on other sites

The '+02' is causing that label to be a completely different label so, whatever is happening there is not really what you think it is.

 

I can't read and digest all of your code right now. I've got to get on with some work now. But I will try and see if I spot something myself.

 

It might be that you might need different labels depending on which case you are trying to play. Have you tried calculating the length of those nested timelines to see how long they take and if they are pushing their siblings around?

  • Like 1
Link to comment
Share on other sites

Hi, I just checked and the demos on the position parameter page are working as intended and interactive.

You press the play button and drag the playhead (red triangle).

 

Is there a particular browser that you are using that has errors?

 

Sorry if you thought you could just drop your own code in there and have a visualization of your timeline built for you. That's not how they work. They were built just to accommodate a very narrow set of super basic use cases. However, these basic use cases can be combined and tweaked to make extremely precise and intricate sequences. Once you master these basics there should really be no limit on what you can do.

 

---

 

I'm not really sure what your question or issue is. The best thing to do is to isolate the problem as best as possible, which begins with removing everything that isn't related to the problem. Unfortunately, none of us really have the time to read through hundreds of lines of code and try to figure out what might be wrong.

 

90% of the time just going through the steps of reducing the code reveals the problem.

 

 

 

  • Like 1
Link to comment
Share on other sites

32 minutes ago, Carl said:

Hi, I just checked and the demos on the position parameter page are working as intended and interactive.

You press the play button and drag the playhead (red triangle).

 

Is there a particular browser that you are using that has errors?

 

Hi ,  i use vivaldi it based on chromium same as chrome engine, but i also test in in fireFox, and Edge.

The timeline playing, but i cant edit values !
But in you video , you do it in codePen i think and you are able to change values, is this link am not able to find.

 

Quote

I'm not really sure what your question or issue is. The best thing to do is to isolate the problem as best as possible, which begins with removing everything that isn't related to the problem. 

hum no code question here, am only ask to find the same interactive demo used in the video to learn.

I try remove step by step and yes i found the issue, but am not understand why.

And this is because i have maybe a bad English translator in my brain ?

So if i play with interactive demo in you demo , am pretty sure i will understand all  because am more visual and mechanic learning.

The demo will allow me to test all context values for timeLine and also see my misunderstand of the under-hood behavior.

 

Quote

Unfortunately, none of us really have the time to read through hundreds of lines of code and try to figure out what might be wrong.

Quote

I can't read and digest all of your code right now. I've got to get on with some work now. But I will try and see if I spot something myself.

You are super guys , but please dont wast your time to decode my code, it fully customized and i know these painful to read !

I just show full code to show full context and how i manage the timeLine. Not need to find a solution, this is my jobs ?

Am pretty sure with a live demo with the visual timeline in the demo i will fully understand what i do wrong.

Sorry again for my bad English and thank for your patience. ?

Link to comment
Share on other sites

Quote

 

The demo will allow me to test all context values for timeLine and also see my misunderstand of the under-hood behavior.


 

 

I really don't think so, as it is not meant as a debugging tool. The visualizer is from 2014 and uses a lot of old code.  

 

I only found 1 codepen, which again is totally old and experimental, so we really can't help you with it. But here it is:

 

 

See the Pen 50c3998d322a4d9ef779a635b1df0d35?editors=1010 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

9 minutes ago, Carl said:

 

I really don't think so, as it is not meant as a debugging tool. The visualizer is from 2014 and uses a lot of old code.  

  

I only found 1 codepen, which again is totally old and experimental, so we really can't help you with it. But here it is:

 

hey thank you so much, it better than nothing. ?

I love your experimental tool and it awesome for help understand under-hood.

I think it seem only label text are broken, it not show blueGreenSpin label position. :)

Link to comment
Share on other sites

The blue tween does not move when you later put other tweens before it. it starts at 2 seconds because when it was added to the timeline its start time was based on the duration of the previous tween, which was 2 seconds.

 

the visualizer loops through the child tweens in order of their startTime. 

the orange tween is represented by the middle bar because its start time is 0.2

the blue tween is represented by the BOTTOM green bar because its start time is 2 seconds and it is the last child in the timeline.

 

 

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Omg thats explain a lot, also the order affected if i switch.

cX4sSdA7_o.png

Thank a lot , thats demo help me a lot .

My issue are solved by hack order and step , and now i understand more. 

 

i dont know why you have abandoned this demo !

it is frankly great to visualize basic behavior in real time and you could maybe made something realy great for newby.

 

In all cases, thank you to you both for your patience and fast answer.

 

@+

 

  • 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.
×
×
  • Create New...