Jump to content
GreenSock

tomsah

Members
  • Posts

    14
  • Joined

  • Last visited

Posts posted by tomsah

  1. @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

    giphy.gif

     

     

    Happy Tweening to you all !!!!!

    you guys rock

    • Like 4
  2. 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? 

     

  3.  

    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

  4. 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

    See the Pen jzzMde?editors=0011 by tomsah (@tomsah) on CodePen

  5. 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

     

    See the Pen jzzMde?editors=0011 by tomsah (@tomsah) on CodePen

     

     

    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

     

    • Like 1
  6. @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.

     

     

    See the Pen MVmQwB by tomsah (@tomsah) on CodePen

     

    Thanks again for your time and help.

     


  7. @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

    Quote

    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)

     

    5ab5c94e3b64b_ScreenShot2018-03-23at5_44_40PM.png.795850934242415a4afd591139599ea5.png

     

    Shall I use timeline, stagger, a forEach loop? 

     

    And then when you say

    Quote

    First, everytime you click on a menu project you're adding instances to a timeline, therefore that instance gets longer and longer. 

     


    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!!!! :)

     

  8. 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)


    5ab4dad4695a5_ScreenShot2018-03-23at5_44_40PM.png.0d79c3afac766564b20955da2319e879.png

     

    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!!!!

    See the Pen MVmQwB?editors=0011 by tomsah (@tomsah) on CodePen

  9. @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

  10. Hello everyone,

    First of all, thank you for this amazing API and incredibly useful forum.

    I am learning GSAP, so I am a beginner. Please bear with me.

    I am building a react application and I am trying to implement the animations with GSAP.

    As you can see in a code pen, I have 4 panels that slide in and out of the screen onClick.

     

    I kind of managed to do it but there is some issue with the reverse animation that I do not understand.
    The issue is, more I play the animation more the reversed animation takes time to start.

    I have made a bit of debugging and for that, I have use onComplete callback and the progress method to try to understand what goes wrong.
    I have realised that every time the animation got played the onComplete function got call exponentially and the process method never goes from 0 to 1.
    Please see the screenshot attached.

     

    I think that may be the reason of issue but I do not know exactly why and I cannot find a solution for it.
    It may be because of the way I use react and GSAp together or my way to use GSAP or anything else that I do not see.

     

    Thank you in advance for your help
    Happy tweening.
     

    Screen Shot 2018-03-15 at 7.11.58 PM.png

    See the Pen WzwWqb by tomsah (@tomsah) on CodePen

×