Jump to content

Sahil last won the day on November 25 2018

Sahil had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by Sahil

  1. Have you tried setting progress as in following demo? If your timeline doesn't change then you can just change the progress. If animation is simple you can use invalidate method. If invalidate isn't enough then you can keep track of progress, and reconstruct entire timeline and set the progress to it. Though avoid using heavy calculations for scroll based effects, it will start getting janky soon.


    See the Pen QxZBYO by Sahil89 (@Sahil89) on CodePen


    • Like 4
  2. On line 237 you are setting time to zero which causes animation to complete and your blocks end up in end position. If you uncomment that you will notice it continues animating.


    Though please avoid posting such demos with 100+ lines as it takes a lot of time to go through unfamiliar code to figure out what is going on and what is suppose to happen.


    See the Pen bKmKzN?editors=0010 by Sahil89 (@Sahil89) on CodePen


    Also, I edited your question because other users can't see your demo when you are posting links in 'full page' mode. I had changed it to 'editor mode' but you seem to have undo it again.

    • Like 3
  3. You seem to be right about it,


    1. Setting small rotationX works as expected.

    2. Setting transform perspective from GSAP without rotationX doesn't work as expected.

    3. Setting perspective in CSS works as expected.


    See the Pen gKBzEz?editors=0110 by Sahil89 (@Sahil89) on CodePen


    You need to set perspective not transformPerspective. Even I got fooled by your demo. You are confusing transformOrigin and perspective.



    • Like 4
  4. No there is no setting to set maximum velocity. You can instead set  max and min duration and resistance. Check throwProps under 'Config object properties' https://greensock.com/docs/Utilities/Draggable


    What you are doing might be done without Draggable, you can use ThrowPropsPlugin directly to track velocity. And use Physics2DPlugin.





    • Like 3
  5. I am not sure what is going on here but but IE is doing really weird stuff. I would definitely recommend getting club membership and using drawSVGPlugin.


    I reduced the demo to 2 paths and I am noticing following behavior,

    1. If I don't use getTotalLength method then animation works but ofcourse you want to get length of path so not the solution.
    2. If I remove stroke-width from path then animation works even if I use getTotalLength.
    3. So basically using getTotalLength and stroke-width together causes animation to freeze.
    4. If I use both and instead of animating single path if I animate all paths then animation works.
    5. If I remove all other paths and use 'path' query selector then animation freezes again.
    6. I tried using different svg and it behaves same

    @GreenSock what is going on here? This has to be weirdest thing I have seen so far. I can understand that it can be rendering issue but how does getting total length affects it. Super weird.


    See the Pen gKxaqx?editors=1010 by Sahil89 (@Sahil89) on CodePen


    • Like 3
  6. 34 minutes ago, themepunch said:

    Sorry to being a pain and for disturb you guys with something which is not GS based at all.

    If you wish, please just close the blog, since it is a Safari Issue and not a GS issue.  


    Don't worry about it, it is still indirectly related to the forum. @Jonathan is CSS wizard, he loves taking on such questions. I am sure he would be able to offer the solution as long as it isn't a bug.

    • Like 3
  7. Depends on how you have implemented it. I noticed following error as I try to scroll,



    Value can't be converted to a dictionary.


    Though we can't really spent time trying to debug live sites. I would suggest to try implementing it from scratch on something simple. Once you figure out how it works you will be able to implement it on live site.

    • Like 1
  8. Not exactly sure what effect you want help with,


    1. If you meant the first title, it probably uses svg filter with displacement map.


    See the Pen zaNBpN by Sahil89 (@Sahil89) on CodePen


    2. If you meant scrolling effect, here are couple of threads you can read to achieve that effect.


    3. The background animations are most probably videos, or you can achieve them using PIXI JS.

    4. The skull that you hover on at the end is just simple image that is scaled up on hover.

    • Like 4
  9. Quote

    I am just curious why the element get a color:rgba(255,255,255,0); background-color:rgba(255,255,255,0);border-Color:rgba(255,255,255,0);  at setting or tweening things to "inherit".  I would except color:inherit; background-color:inherit... on the element.   


    GSAP doesn't support 'inherit' and treats it as any random string that wouldn't be a color so it animates to default rgba value.


    I understand what you are saying about clearProps, I think it has to do with the how add method works. @GreenSock can explain more accurately what is happening in this particular case but in the mean time take a look at following thread with similar issue.



    I instead used set method of timeline directly and it works as expected.


    See the Pen pKErWL?editors=0010 by Sahil89 (@Sahil89) on CodePen


    • Like 4
  10. That is happening because your child timelines are paused so when you add them into the parent timeline, parent timeline starts playing but tweens remain paused. That's why when you click on 'play 1 and 2' nothing happens.


    When you click on 'play 1' and 'play 2' they jump because your parent timeline is complete and playhead of child timelines is tied to parent timeline. I doubt you can play child timelines independently, though you can tween them.


    See the Pen PaZEMX?editors=0010 by Sahil89 (@Sahil89) on CodePen


    • Like 4
    • Thanks 1
  11. Problem was your box was covering the buttons so subsequent clicks were not happening. You either change the z-index of the elements or change the order in html.


    Also, you don't need to add your tweens in the timeline, it is going to add new tweens to your timelines on every single click. Using tweenmax or local timeline is enough in this scenario. I also tweaked your conditions as second if statement was unnecessary.


    See the Pen ZRGVOb?editors=0010 by Sahil89 (@Sahil89) on CodePen


    • Like 8