tomsah

Hi @GreenSock, I am sorry that it comes across that I want the GreenSock community to do my project for me or something like that. I was not expecting at all to have someone to do it for me, or just sending me the animation done and I don't think that is what I was asking. Sorry, if it did sounds that way. I was trying to be helpful (looks like I failed) by providing two simple Codepen (this is not the full project by the way), to illustrate and give some context of my issue and my goals. I provided an extracted carousel which is essentially based on a GreenSock example, not sure how to simplified this if you need to share a draggable carousel and the smallest animation possible of what I am after. The real question was I think a GreenSock question on how to add an animation to an element in draggable GreenSock carousel and keeping everything in sync. I have read a lot of the forum threads, and I came across much more complex examples in many other answered posts in my opinion. I will end up finding a solution but not as quickly and less fun on your own than discussing with others. So, I will keep trying and reading the forum. Anyway, Thank you for taking the time to answer back to me. Happy tweening!

Hello GreenSock community ? hope you are well and keeping safe!!! I am trying to build a draggable carousel, which when you click an element it expand and animate its content in, other element shrink accordingly. And once a panel is open if you drag the next or the previous panel, it should open the next panel while being drag. So far I have a responsive draggable carousel in React; essentially @OSUblake draggable carousel example but using react (Thanks @OSUblake !!!) https://codepen.io/tomsah/pen/vYKqqVx?editors=0010 I have created the basic animation that I would like to happen when a user click one of the carousel item https://codepen.io/tomsah/pen/WNxqqEz I have tried a few things and I never get the result I am after ?, Element are getting updated using onClick but their position is always off, and when I drag again the carousel it is getting worse I am not sure how to properly update the carousel item with, X & left value properly, and how would I pass the animation to the next item dragged element. Thank you in advanced for your help and time

@Rodrigo, I just saw your answer, and it is exactly what I was trying to achieve. I cannot thank you enough, for your time and help on my journey with React and GSAP, which just started. No problem with not reusing my code, it was a bit spaghetti anyway and needed a big refactor. that is what I was trying to do yesterday. I have read the code with the explanation and still yet to assimilate and understand all of it better. I will keep studying and following GSAP and React tutorial from @Ihatetomatoes. @Sahil, Thank you for pointing to my error and suggested very wisely other route and issue in my code. I have learned so much with you guys, discover an incredible community and you pushed me to keep trying harder (even if I could not come up with a full solution of mine) I will be back at some point soon for more advice and share the final product that I am building and one day give back by answering questions from others. in a meantime Happy Tweening to you all !!!!! you guys rock

Sorry for the delayed answer but I got busy and has a little time to look at this issue lately. Anyway back to it. The error that @Sahil spotted is because I am passing the function This.previewCase() into my master Timeline using the add method. I do not understand why I cannot do that, as the error message seems to say that we can pass function. I really need help in that one, I have been trying for a while now and get nowhere. How can I trigger a function inside an add() method?

@Sahil Thank you for spotting that one, sometimes I forget to check the browser console when I work on code pen, schoolboy error.I will spend some time today to debug that one. I'll let you know how it goes. thanks

Hello and thank you for your answer. First sorry for my long answer and my bad first explanation, Let me try to explain it better, The way the panels are moving at the moment is exactly the way I want them to and my issue is at a very particular time of the animation. I am using 2 timelines, One (menuTl) is used to bring in and out of the viewport all the panels at once and it is trigger by the menu button. (works fine). a second one (previewCaseTl) which animate the panel individually (the way it works at the moment) depending on which one is clicked, while the menu is open. This is trigger by the panel on click. But If I got some open panels and I click on the menu button, I would like that the second timeline closes the open panels and immediately after that the first timeline trigger and brings the all set of panels off-screen. To try to achieve that, I was trying to use a master timeline (closeAllTl) to chain my 2 timelines. This is where it does not work exactly as I want and I don’t understand why or how to fix it. What do I do wrong in the 'closeAll' function when I add the 2 timelines to the master one? At the moment I need to click twice on the button menu for it to happen. I am sorry, I am still not sure that I am explaining myself correctly but to clarify here is the steps to reproduce 1 click on the menu button, all the panels are coming in 2 click on panel 3, panel 1, 2 and 3 are sliding, 3 click on the menu button only panel 1, 2, 3 slide back 4 click on the menu button again all the panels are sliding off screen. I would like that step 3 and 4 happen only with one click, so panel 1, 2, 3 slides back first then all the panels are sliding off screen. That’s why I tried to use a master timeline for this particular case. Please see comment in the closeAll function Thanks again

Hello GSAP community, I am trying to play 2 timelines one after the other. when timeline 1 finishes, immediately play timeline 2. After lots of trying and reading the forum, I still haven't found a solution yet. My problem is when I get some panels open and I click on the menu button, I want the open panels to slide back then immediately animating all the panel to go offscreen So far I need to click twice on the menu button for this to happen I am using a master timeline, as i understand is the way to do such things. what do I do wrong in the master timeline? why are the timelines not chaining? Sorry the code is a bit messy but I’ll work on refactoring soon, however, any tips will be welcome Thanks a lot

Hello, After some travelling and a bunch of hours looking at it, I got this solution. I am sure the code can be written in a more efficient and elegant way. I'll look at refactoring it soon. I wanted to share my result, after all the help from @Rodrigo I still have a little issue with my closeAll function, related to playing 2 timelines in master timeline. But ill open a new post as it is a different issue. Many thanks, @Rodrigo any feedback will be appreciated

@Rodrigo Building up on top of your answer and with a little bit of fighting, I got to this solution. it seems to work but I spotted a little bug when I clicked a few times on the panels (while animated or active) it can happen that the animation is playing twice, so the panel got way too much on left. and actually, I would like for the panel to not reverse every time. If I navigate between panels, they should update themselves. (ie: if panel 2 is open and panel 3 is click, only panel 3 should animate or if panel 3 is open and I click on panel 2 only panel 3 should revert back.) I'll try to make this happen but any tips will be great. Thanks again for your time and help.

@Rodrigo Sorry for the delay, of my answer. This looks like very close to what I am trying to achieve. this is perfect in term of opening and closing individual panels and your commenting is awesome, Really help to make sense of it. but I am getting short of ideas on how to use GSAP animate multiple panels as such Shall I use timeline, stagger, a forEach loop? And then when you say why this is happening and I think it was part of the issue of my previous post that you help me with. Could you maybe explain it to me in more details? Many many thanks for all this incredible help. Happy Tweening!!!!

Hello, I am looking for some help again about an animation using GSAP and React, still learning and experimenting. So I have got 4 panels sliding into the screen. Then if I click on one panel, this panel should slide more into the screen and push the other panel under itself. (IE: so if I click on panel 3 it should push panel 1 and 2 at the same time) I have 2 problems, 1 I don't understand why only the first panel that is clicked, got the animation. after that first click, no matter which panel I clicked on, only the first panel that got clicked keep being animated. even bypassing the correct e.currentTarget ( see Codepen and the console log) 2 I am not sure how to create the animation that will push more than one panel at the same time. Thank you very much in advance for the help Happy Tweening!!!!

@Rodrigo That is an amazing answer, could not wish for better. Many thanks for the help and guidance. GSAP is an incredible community and I am really happy I came and ask questions. I'll come back and post a link to the finished website as soon as it is done. Happy Tweening

@Rodrigo thank you for the pointer, I am trying to understand it all, a bit confusing at the moment. Happy Tweening!!

@Rodrigo Thanks so much for this very detailed and complete answer, moving the call of the function in the componentDidMount resolved the problem. I am still getting my head around the why and how works that way. I am not very experienced with React and GSAP yet. I updated the codepen but still looking at the refs situation. I have a few more questions to help me understand how is it all working together? if you have the time. - is it bad practice to declare my TimelineMax outside of the class component in a global scope as I did? if yes where is it best? - is the staggerTo method is the best approach to realise my animation, I was hesitating to use a forEach and tweenMax.to with a delay? - would it be better to use react-transition or something similar to deal with GSAP and react? It seems working well without anything else. regarding the ref I have been using them when I could in the application that I am building but always in the same component. however, in that precise case, the projects section is a component on its own (child 2 level down) and I have the animation function at the top level of the app. I just don't know how to access a child ref in a parent. but looking at it at the moment, any tips will be welcome. Sorry, It got a bit long. Again thank you very much It may take a month or two but I will come and post the link of the finished website. happy tweening

@Rodrigo Thank you so much for the fast answer, it is making sense to me. I will try to implement your solution and get back to you with the result a bit later today. Happy tweening