Elindo

Check this one.. I am getting a syntax error, but I am not sure why I got 2 functions with animations inside of of them. One function will play the entire sequence of the A button if #Rod < x:200 The second function will play the last few tweens of the entire sequence of the A button if #Rod == x:200 I am trying to do an if/ if else for button A... but apparently the code is wrong and I don't know why? I would do something similar for the B button.. btna.onclick = () => { if ("#Rod"< x:200) { animation.kill(); animation = stagea1(); } else if ("#Rod" == x:200) { animation.kill (); animation = stagea2(); } } https://codepen.io/Elindo586/pen/vYZLjJz

Oh I am sorry.. you guys are too nice.. I will put labels on the boxes on future postings. Rod is the green rectangle... A1 and A2 are the set of squares to your left side of the screen, B1 and B2 are the squares on your right side of screen, and P are the two center squares.. If the tween starts at X:200 moving from your left to right, then you only need the set of on and off opacy sequence that comes after reaching x:200. I need to digest your info and test to see if I can make work..

Thanks... indeed that solves much of the problem... Saaaayyy... Is there a way to link the animation to the position of X:0 and X:200????? If you see this code: var extend = gsap.timeline({paused:true }); extend.to("#Rod", {x:200, duration:5, ease: "none"}) .to("#P, #B1, #B2, #A2", {opacity:0, ease: "none"}, "<") .to("#A1", {opacity:1, ease: "none"}, "<") .to("#A1", {opacity:0, ease: "none"}, "+=0.1") .to("#A2", {opacity:1, ease: "none"}, "<") .to("#A2", {opacity:0, ease: "none"}, "+=1") .to ("#P", {opacity:1}, "<"); This part: .to("#A1", {opacity:0, ease: "none"}, "+=0.1") ^^ This, and the tweens after it, should be happening when "#rod" reached x:200 in 5 seconds. It works good if you start from x:0, or apparently any moment before x:200 ? But if you start from X:200, then the tween goes way back from the beginning taking another 5 seconds and previous opacities before the "+=0.1") code line. Also, if you push A several times it seems to increase the run time. Sooo... is there a way for the timeline to recognize the position of x, and play the opacities and timing of the tween according to the x position? And.. maybe not increase the time of the tween if you push A several times? (I am not sure if this is asking for the moon on technology)

I think I might have the solution, but I need to think on how to code it this other way.. IF gsap doesn't have a tool to make a tween pick up a move from a random location... ELSE.. (see what I did there ;)) I would need to split the tween.. I could add the green box in a single tween with push button A forward, and push button B reverse.. Then.. maybe I could add another set of separate tweens using some kind of IF/ELSE combination for proper set of opacities for each button based on the green box being < or > from position X . I would also need to make sure the A button hides the opacities from B, and that B hides the opacities from the A button. If I get this done, then I'll be half way through the hard parts for me...

It would be easy to think you can put a "reverse" option to make the green rectangle go back, but for this animation when you take the green rectangle back, then I have a different set opacity settings that wouldn't work with the "reverse" coding.. I am trying to find a way to "reverse" the green rectangle, and play the proper set of opacities that go with the left and right movements.

Button A pushes to the right Button B pushes to the left The problem is when you *alternate between pushing A and B the green rectangle starts to jump. If you do this: Click A (good so far) Click B (good so far) (push it before A finish his sequence) Click A again (before B finish his sequence) ... now the green rectangle jumps back to where it was with the A button, instead of picking the movement from where the B button left the green rectangle. I don't want the A button to make the green rectangle jump. I want the A button to pickup the movement at whatever place the B button left the green rectangle. Now, don't worry too much about the red and blue squares, those are only part of the timeline when you push A or B... if we can fix the green rectangle from jumping, then likely the timeline will fall in order and fix the sequence of the blue and red squares.

** this is were the real thing begins... button interaction ** btna push the green rectangle from left to right - to x:200 in 5 seconds with a timeline to follow btnb push the green rectangle from right to left - to x:0 in 4 seconds with a timeline to follow. What if you push btna, and then push btnb before btna finish his timeline? What if kee pushing btna and btnb every 2 to 3 seconds before any of the time line finish? The problems is that the timelines are not recognizing the position of the green square to follow the timeline properly without jumping the green square into another place... the sequence of the red and blue squares opacity also goes out of place. How can you make the timelines recognize the position of the green square, so that the timelines can follow the movement of the green square from any location?

This link below will be the most minimal / naked as it can get to code as individual push button.. For this one I am only looking why wouldn't cylrod move to x:200 in the timeline. cylrod is the green box that is not moving. After making the green box move, the most minimal/ naked coding will be the entire coding of the push buttons because the testing has to do with the ability of the buttons to pause the timeline of other buttons.... This one is the most minimal code I can possibly do for push button A https://codepen.io/Elindo586/pen/vYZLjJz

I got the color sequence I was looking for.. there was stuff from the old code I copied that wasn't suppose to be there. but for whatever reason the green box isn't moving.

Pretty cool formatting. Do you think the code didn't do anything because of the formatting? Also, why didn't the green box move? I have done some copy and paste from another code I wrote that was working fine in this area, but now it isn't working that well.... I wonder if it has to do with the copy and paste. Also.. I need to rearrange some of that sequence...

This is the code of the push button on line 65 btna.onclick = () => { extend.play(); retract.pause(); } This is the code of the time line that should be activated var extend = gsap.timeline({paused:true}); extend.to(cylrod, {x:200, duration:5, ease: "none"}); extend.to(pline1, {opacity:0, ease: "none"}, "<"); extend.to(aline1, {opacity:1, ease: "none"}, "<"); extend.to(aline2, {opacity:0, ease: "none"}, "<"); extend.to(aline1, {opacity:0, ease: "none"}, "+=0.1"); extend.to(aline2, {opacity:1, ease: "none"}, "<"); extend.to(aline2, {opacity:0, ease: "none"}, "+=1"); extend.to (pline1, {opacity:1}, "<"); extend.to (bline1, {opacity:0}, "-=5"); extend.to (bline2, {opacity:0}, "-=5"); And this is the query selector for A let btna = document.querySelector("#A"); I have done the same logic with all of the buttons using different sequence on their individual timeline, but none of them are activating...

Thanks... I see this is gonna be fun. Copy and paste doesn't always work...

The basic is that the opacity is still showing. I wrote the code lines for opacity above.

I added a new demo with a more visual system to see. The x:0 to x:200 or x:200 to x:0 is the full distance of a run.... however, the run can be interrupted at any moment in any place, and it needs to be picked up again at any given direction depending on the button being pushed.... but.. I will get to that point later.... the new tread is this one:

Ok.. let's try this agian... one step at the time.. This is a more visual demo of what I was trying to ask on previous posts.. this time around one step at a time.. Why are my red and blue boxes not going to opacity 0? I have done the let code line, followed by the gsap.set ... and the I can still view them.. let cylrod = document.querySelector("Rod"); let aline1 = document.querySelector("#A1"); let aline2 = document.querySelector("#A2"); let bline1 = document.querySelector("#B1"); let bline2 = document.querySelector("#B2"); let pline1 = document.querySelector("#P"); let btna = document.querySelector("#A"); let btnb = document.querySelector("#B"); let btnstart = document.querySelector("#Start"); let btnstop = document.querySelector("#Stop"); gsap.set(aline1, {opacity: 0}); gsap.set(aline2, {opacity: 0}); gsap.set(bline1, {opacity: 0}); gsap.set(bline2, {opacity: 0}); gsap.set(pline1, {opacity: 0}); Now... if you want to know the entire scoop, and get ahead of future questions of this interactive animation it would be some like... Push Button Start Both Center blue and red boxes will be on Will enable operations for Push button A and Push button B Push Button A Will maintain opacity to 0 for any boxes on the center or right side of the screen will move the green rectangle (5 seconds) from your left side of the screen to the right side of the screen next to the other set of blue and red squares. While moving from left to right the left blue box will be on Once the green square reaches the right side the leftt blue box will disappear and the red left box will be on for 1 second After once second of red left box on... both center blue and red box will be on.. End of cycle. Push Button B Will maintain opacity to 0 for any boxes on the center or left side of the screen will move the green rectangle (4 seconds) from your right side of the screen to the left side of the screen next to the other set of blue and red squares. While moving from right to left the right blue box will be on Once the green square reaches the left side, the right blue box will disappear and the red right box will be on for 1 second After once second of red right box on... both center blue and red box will be on.. End of cycle. Push Button Stop Will turn all blue and red boxes opacity to 0 Will disabled push buttons A and B and won't be able to operate. If push button A , and then you push B, then push button B will take action over A. If you push button B, and then push A, then push button A will take action over B. Push button A or push button B will need to be able to pick up the movement at any random place where the green square might be, and it should not take the full 5 or 4 seconds of their initial setting (x:0) as the green square might be in any position.

I am back! I will make a different drawing and it might be easier to visualize.... Might be easier to understand if you see a big box moving instead of a little rod symbol. But basically, in this post what I am looking for is the item "cylrod" to move from x:0 to x:200 in 5 seconds, which it does fine as long as "cylrod" starts moving from x:0. The problem is when cylrod DOESN'T starts the movement from x:0.. then the entire sequence still taking 5 seconds to complete...

Yes, I understand about the minimum demo. I am just getting ready on a trip and won't be near a computer where I can work for a few days. When I get back I'll read and try to incorporate the .invalidate() option somewhere see how that works. I am also using the .pause() option to see if the buttons can pause the action of other timelines while activating their main timeline.. so far it doesn't seem to work for me... surely I must be implementing it wrong since it seems such simple thing to do... Right now I have 2 problems in this one scratching my head: 1. conflicting timelines on multiple items, as the buttons are not pausing each other actions. 2. The timelines aren't recognizing the random starting position of the main first object to move.. so the timeline always think it is starting for an initial fixed position and that is not always the case. Bonus problem: 3. the buttons only seem to work once. Anyway... these are headaches for some time next week.... I'll try to read some of the .invalidate information.... and I'll also see if I can set up the buttons using javascript...... yes... rewatching some of the Udemy courses if I can

I tried the fromTo options, but it made the item (cylrod) jump to x:0 position regardless of what position it would be. I don't want the cylrod to go to x0 postion everytime the timeline is activated. I want cylrod to go to x:200 regardless of the initial position. The timelines are pretty long. I can try to do a different demo just to deal with the section in question.. but that is going to take me a few days to do that since I will be out, plus coding time.. The short version if we ignore the length of the sequences is... var extend = gsap.timeline is controlled by btna.onclick = () => { extend.play(); ..... var retract = gsap.timeline is controlled by btnb.onclick = () => {retract.play(); .... When var extend is activated it should stop all the movements of var retract, the buttons are not really stopping any actions of previous timelines. The same problem is happening with all the buttons. They activating their actions, but not stopping the actions of the other timelines. btna.onclick = () => { extend.play(); retract.pause(); } btnb.onclick = () => { retract.play(); extend.pause(); }

For example, here is a time line where cylrod should go to x:200 when the stratbtn is activated. (works great if it starts from x:0) Apparently the timeline assumes that cylrod will always start at x:0... but what is cylrod starts at x:100 ??? The problem is that the duration:5 stays in place for the rest of the time sequence even if cylrod starts at x:100 What if cylrod starts at x:200??? Then I would like the sequence to start at the first "+=0.1" delay.. why? because with my next to nothing knowledge about coding I think that the first line of "+=0.1" assumes that cylrod has now reached the position of x:200, and so now the rest of the timeline can proceed. is there a way to tied the duration and sequence of the timeline given whatever random position cylrod might start to go to the end positon of x:200? var extend = gsap.timeline ({paused:true}); extend.to(cylrod, {x:200, duration:5, ease: "none"}); extend.to(pline1, {opacity:0, ease: "none"}, "<"); extend.to(rvarrow, {y:0, duration: 0.1, ease: "none"}, "<"); extend.to(sola, {opacity:1, ease: "none"}, "<"); extend.to(aline1, {opacity:1, ease: "none"}, "<"); extend.to(aline2, {opacity:0, ease: "none"}, "<"); extend.to(aline1, {opacity:0, ease: "none"}, "+=0.1"); extend.to(rvarrow, {y:-14, duration: 0.1, ease: "none"}, "<"); extend.to(aline2, {opacity:1, ease: "none"}, "<"); extend.to(sola, {opacity:0, ease: "none"}, "+=1"); extend.to(aline2, {opacity:0, ease: "none"}, "<"); extend.to (pline1, {opacity:1}, "<"); extend.to (bline1, {opacity:0}, "-=5"); extend.to (bline2, {opacity:0}, "-=5"); extend.to (solb, {opacity:0}, "-=5");

The errors I am catching is for example when I push A and before it finished I push B.. the B btn is taking action, but it is not terminating the sequence of the A button timeline.

I was looking at this reference link here: // Set overwrite on a tween gsap.to(".line", { x: 200, overwrite: true }); // Set overwrite globally for all tweens gsap.defaults({ overwrite: true }); // Set overwrite for all tweens in a timeline const tl = gsap.timeline({ defaults: { overwrite: true } }); Maybe I need to set the overwrite in a difference place than a the begining of the tween. Basically seems like the timelines are conflicting each other, and not terminating the movements of the previous timeline. There are other problems , but it is better to keep them in a separate thread.

Saaaay.... Is there a way to tied the timeline to the START and the END of the first tween? If I use the fromTo method it seems as if cylrod jumps to the from position regardless of where he might be located. If I use the the to method and cylrod starts from a ramdon position, then the rest of tweens fall behind thinking cylrod is always starting from the begining. The "<" is good the start motions in relation to the first tween... but it doesn't do anything to tell the rest of the tweens that the first tween already reached his finished point.. var extend = gsap.timeline({paused: true, overwrite:true}); extend.fromTo(cylrod, {x:0, duration:5, ease: "none"}, {x:200, duration:5, ease: "none"}); extend.to(pline1, {opacity:0, ease: "none"}, "<"); extend.to(rvarrow, {y:0, duration: 0.1, ease: "none"}, "<"); extend.to(sola, {opacity:1, ease: "none"}, "<"); extend.to(aline1, {opacity:1, ease: "none"}, "<"); extend.to(aline2, {opacity:0, ease: "none"}, "<"); extend.to(aline1, {opacity:0, ease: "none"}, "+=0.1"); extend.to(rvarrow, {y:-14, duration: 0.1, ease: "none"}, "<"); extend.to(aline2, {opacity:1, ease: "none"}, "<"); extend.to(sola, {opacity:0, ease: "none"}, "+=1"); extend.to(aline2, {opacity:0, ease: "none"}, "<"); extend.to (pline1, {opacity:1}, "<"); extend.to (bline1, {opacity:0}, "-=5"); extend.to (bline2, {opacity:0}, "-=5"); extend.to (solb, {opacity:0}, "-=5"); https://codepen.io/Elindo586/pen/xxrbWyY

What kind of control methods can I use to to do the interactions of the buttons? I got 4 buttons: Start btn: should enable A btn, and B btn (A or B should not run , unless the Start Btn is pushed).. and it should run a set of tweens which is already doing. A btn runs a tween and kills B btn B btn runs a tween and kills B btn Stop btn kills all of the btn.. so far I got this, and it doesn't work because it is messing up my timelines without touching the buttons. btna.onclick = () => extend.play(); retract.kill(); btnb.onclick = () => retract.play(); extend.kill(); btnstop.onclick = () => stop.play(); extend.kill retract.kill btnstart.onclick = () => extend.isActive(); retract.isActive(); start.play();

Do I need to wrap them in some sort of brackets? If so, how do I do that? The timing and sequence for each timeline is now exactly how I wanted it. I added overwrite:true for each timeline, so it would kill any conflicts with other timelines. and I added .kill() for each button so it would kill the other buttons. var start = gsap.timeline ({paused:true, overwrite: true}); btnstop.onclick = () => stop.play(); extend.kill retract.kill The problem is that the buttons and timelines are not killing the actions of previous timelines, even after I added specific details to do this job.. ALSO, for some reason the timelines are working only once per each loading of the page...

Awesome! I am getting this done...