rhut_tiger

Its a old post but by trying this i am getting into CORS issue, which is with any method of loading SVG via AJAX, and the only other working thing is INLINE SVG, any other solution? or i have to make a temp web server for development?

Amazing this is perfect .... i tried adding the tween separately just before play(). like this codepen but it was not working as intended your solution seems perfect

I want in this case for the time variable to be updated on each play() event. but as the timeline is created only when the page loads for the first time it doesnt get the updated value. how to solve this?

First of all Thank you , Let me explain it better what i am confused about. (look at the new codepen) if box 1 is clicked it will go right and box 1 content will be visible, and if box2 is clicked the box 2 content will be visible, so the variables are the box classes , and only box is visible at one time . So a function passes the variable to be worked on. in the below codepen, -each box has content hidden underneath -on respective box clicks it reveals the content and hides it when clicked again - not disabled the other boxclick while one is revealing the content (for the this codepen purpose only, in my case i am disabling that) now the reverse button doesnt work as intended by me, but its working as it should (which i dont want), and so looking for a better solution as i am re-declaring the timeline on each click( which is the main issue, i want to pass a dynamic variable but that only can be done if the timeline is inside a function callback as otherwise it will be declared at the time of page load). so if we use the restart and reverse(0) in JS ( which is commented by me , right now in codepen) then it works as intended, but which i believe is not the right way of doing things (according to your previous replies) what i want is as following (if you un-comment the JS code in codepen you will get the result which i am going for) 1. reverse should animate back to where we started 2. only respective clicked box should have its play and reverse animation thank you again , looking forward to a better solution to this ?

Thank you for the quick reply....... ok, so i get your point that everytime the function is clicked its a new timeline so the reverse wont work. so would your solution work multiple times? as this animation is a part of content transition, so it should work multiple time to and fro. Also, is there a better way of doing this then what i have done? meaning , is there a better way to use play and reverse when the timeline creation needs variables from function call? Edit: I tried your solution it works the first time but then goes haywire all the subsequent times, as when the next time this function gets called its play forward and reverse both together, so now i am clueless whats going on. Edit 2 : Should i use .restart() instead of .play() ??

Hey, I am sure this is my ignorance but i am not able to find a solution for this problem i have. I am trying to play and pause a TimelineMax in a function where i pass parameters on which the animation is happening. in that function I create a new timeline (as i am using those parameters from function call in timeline, i cant declare it outside the function) which either plays or reverses based on 2 different buttons on my page which pass a Boolean value with the function call. but the reverse function doesn't work as intended, if this is done as shown in the codepen. but if i keep the if statement -- (which has the play and reverse call) before adding the tweens to the timeline then it works as expected, but that seems like a workaround than a proper solution. (And yes i am not reversing the timeline before it plays once)