Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

8 Newbie

About tomsah

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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
  2. 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
  3. @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
  4. 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?
  5. @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
  6. 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
  7. 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
  8. 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
  9. @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 sho
  10. @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 i
  11. 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
  12. @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
  13. @Rodrigo thank you for the pointer, I am trying to understand it all, a bit confusing at the moment. Happy Tweening!!
  14. @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 stagg
  15. @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