Elindo

Ok, this might sound silly, but I haven't been able to time the tweens properly. What would be the values to activate some tweens at the START, and some tweens at the END from the first tween in the timeline? The first tween has a duration of 4 seconds from start to end. I have an example below of 11 tweens. all which should be timed in relation to the start and and the end of the very first tween which has a duration of 4 seconds.... tweens 2,3,4, should activate at the same time as the START of tween 1 tweens 5, 6, 7 should activate at the same time as the END of tween 1 tweens 8,9,10,11 should activate at the START of tween 1 (These are items I want to keep OFF, but are included in this timeline because they might have been activated from previous timelines) var retract = gsap.timeline({paused:true, overwrite: true}); retract.to(cylrod, {x:0, duration:4, ease: "none"}); retract.to(solb, {opacity:1}, "-=4"); retract.to(bline1, {opacity:1},"-=4"); retract.to(rvarrow, {y:0, ease: "none", duration: 0.1}, "-=4"); retract.to(bline1, {opacity:0}, "+=4"); retract.to(bline2, {opacity:1}, "-=4"); retract.to(rvarrow, {y:-14, ease: "none", duration: 0.1}, "=4"); retract.to (pline1, {opacity:0}, "-=4"); retract.to(aline1, {opacity:0}, "-=4"); retract.to(aline2, {opacity:0}, "-=4"); retract.to(sola, {opacity:0}, "-=4");

Thanks!!! I think the overwrite:true will help on some of the conflict. As far as turning the opacity off, I wrote another line in the same tween after turning it off after a few seconds of turning it on. extend.to(aline1, {opacity:1}, "-=5"); extend.to(aline2, {opacity:1}, "+=5"); extend.to(aline1, {opacity:0}, "+=01"); The timing still pretty bad, so I need to study how to adjust it to turn them on and off in relation to the movement of cylrod on top. This coding thing is taking longer than I was thinking, but if I get to work through some of these rules I would be able to do animate a few more circuits..

For example I have this, but the opacity only turns on. var extend = gsap.timeline({paused: true}); extend.to(sola, {opacity:1, duration:5, opactiy:0, ease: "none"}); Could it also be that the timeline isn't isolated from the other timelines?.. I asked because when I press one button, some of the lines that are supposed to disappear are still showing from the previous timeline. I have 4 timelines with a series of movements and opacities that should respond to specific buttons,

I have been reading about how to create a few tweens in a timeline, and apparently there are some old ways and new ways on how to do it... Should I use tweenlite? tweenmax? what is the greatest new structure? BTW... where could I find references and examples on the new methods so that I don't use any of the old stuff..

Oh look at that... "" and # signs are giving problems.... I need to read up a bit more on the proper way to write code. I think I am first going to do this set up for all of the items I need to make them disappear.. let aline1 = document.querySelector("#Sol_A_LIne"); gsap.set(aline1, {opacity: 0}); Then I am going to try to do a sequence like this one on the video... and link it to a button.. I will need different sequences for different buttons.. An then... the even more fun part will be that I will need one button to be clicked before other buttons can operate...

Ok thanks... I'll check how to put the tween target in a timeline. and yes, I was thinking of putting 2 animations in one class as they go together one after the other. I also have a 3rd (and maybe more) animation that needs to react to the push of the same button, but I am still thinking on the proper motion reaction so I didn't want to group them together yet . A few things need to be appearing, moving, and disappearing.. But anyway... my next task is to make the color lines disappear, and only show them as the buttons are pushed. Line 16 I was thinking it would make aline1 disappear, but the line still there. It is hard to see on the drawing as there are multiple lines on top of each other, but I should see one of the blue lines inside the little square go away, and for some reason the opacity is not changing. Is that the proper way to set it up in gsap? gsap.set("aline1", {opacity: 0});

Ok.. line 11 through 20 is the code sample I have for two of the lines I want to trigger. I need the line to be OFF and come ON when I push "_x2B__Btn_A" I know the code is not complete, but first I want to the lines to disappear and only turn them on at the proper time when the button is clicked. let aline1 = document.querySelector("#Sol_A_LIne"); let aline2 = document.querySelector("#Sol_A_LIne_2"); gsap.set("aline1", {opacity: 0}); gsap.to ("aline1", {opacity: 1, duration: 5}); gsap.set("aline2", {opacity: 0}); gsap.to ("aline2", {opacity: 1, delay: 5}); document.getElementById("_x2B__Btn_A").onclick = () => rodext.play (); aline1.play (); https://codepen.io/Elindo586/pen/xxrbWyY

Let me process it a bit.. I need all the lines to be normally OFF without any buttons being pushed. Then as buttons are pushed I need certain lines to active, and then another combination of lines to activate at the end of the tween.

I got a bunch of items (lines) that I want to make them appear and disappear from the push of a button. I suppose it has to do something with the opacity to make it go from 0 to 100 on a click of a button. I need the lines to be ON or OFF on the click of the button... but how do you do it? Here is an example of one of the items: let solaline = gsap.to("#Sol_A_LIne",{ opacity: 0, paused: true, ease: "none", document.getElementById("_x2B__Btn_A").onclick = () => rodext.play (); solaline.play ();

Thanks!!! I think I am gonna like GSAP a lot...

I am guessing there is something wrong on my code... as it is my very first written code ever (with help of examples) This is an SVG drawing using Illustrator. This drawing will be cleaned up and the animation will have more movements in relation to buttons. id = "_x2B__Btn_Start" is the button I want activate the tween (shown as "Start" on the screen) "_x2B_Rod" is a part of your top right hand drawing item on the screen. I want "_x2B_Rod" to move 10px (this will be changed later) toward the right side of the screen on the X axis on the click of the mouse on "_x2B__Btn_Start" For some reason the mouse isn't doing any clicking on "_x2B__Btn_Start"... What could be wrong?

I have been watching some of your DrawSVGPlugin tutorials. Imagine a rough illustration of a hydraulic pump taking oil and pushing it through the different hose paths around a machine. I can draw a vector file and convert it into SVG with a bunch of hose connection lines. Could an animation be done to get the line from one source on the bottom of the drawing, and then as it moves up it follow the different connections points splitting in 2,3,4, or more different directions? My background on this? I do some simple animations on Character Animator, which is not made for interactive web use. Most of my drawings are simple lines and shapes of symbols, something pretty easy to draw. Because I want web interactivity with my drawings I am looking at options like GreenSock.... most of my movements are linear motions, and I would be interested on something like DrawSVG to animate some lines as "flow path" through different circuits. Then I'll be looking at button interactivity with the different motions. Yea.. I only have some notion about coding (html, and CSS) , but I am also been checking out some basic SVG animation in Udemy, and learning a few tricks is enough for the bulk of my work... you know, one of those cases of people learning to code on the go... Oh BTW... what code language would GreenSock be?

How much does it cost? I ask because I see 2 different prices here: One here: https://www.g2.com/products/greensock-animation-platform/pricing One here: https://greensock.com/club/