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. I was on it too.


    It is because firefox doesn't report measurement when we use getBBox method on hidden elements or in this case line inside the mask. And GSAP uses getBBox because it is not path, so you should convert your line to a path.


    PS: Yup I have started digging into files, seems fun.

    • Like 4
  2. Quote

    The video that was posted above by @Sahil - how do you plan out or design such interactive animations?  Using storyboards? Or is there another way?


    In video, Chris mentions he uses Bodymovin to try out animations or prototype them to get approved and then recreates them using GSAP. I usually do what I am asked to do or from comes to my mind. @PointC probably has some process for planning animations.

    • Like 2
  3. Ohk there is too much confusion here.


    You looked at my demo instead of the comment I linked which had Blake's demo. But forget about it, you will need to study that entire demo before making any changes to it.


    Now focus on your demo only. In your demo you were supposed to trigger those button clicks. And please avoid editing your demo after posting it. Fork your original demo instead.


    Also keep in mind, if you practice by copy pasting code instead of trying to understand and learn from it, you will make your life really hard.


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


    • Like 5
    • Thanks 1
  4. If you just want to swipe and don't want to redo all your work, then you can use trick as in following demo.  I am just using Draggable to detect swipe, you can add that on top of your demo.


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


    If you want to drag and willing to recreate everything then take a look at demo by @OSUblake in following thread. That's where my second journey with GreenSock started.


    The demo is responsive and you can use media queries as well, given that all your slides are of same width.



    • Like 4
  5. Hey @makis2404


    With GSAP you can use Draggable's hitTest method to perform the hit test. On codepen under each panel there is option under drop down, called 'tidy'. It makes your code far more readable and neat, give it a try.


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


    I see you are having fun with small games etc. I would recommend a book you will enjoy learning from. All examples are for Canvas but you can apply same logic for the HTML elements.




    All the examples from book can be found here: http://lamberta.github.io/html5-animation/


    Checkout the video by author of original book,



    • Like 5
  6. GSAP works with any JavaScript objects. When it is working with DOM elements like div etc and if you try to change the scale, GSAP will use the CSSPlugin to apply changes in CSS.


    Now your snippet,


    TweenLite.to(Picture 1, 1, {scaleY:-0.5}); 


    That is incorrect because object names cannot have spaces, so you must be getting errors in console. In order for that to work your object name should be without spaces, if it has spaces then it isn't an object. Second, your Picture1 object must have a scaleY property so you can use it to animate.


    I am not sure what kind of output you get with Articulate 360, if you can post a super simple demo on Codepen then I can take a look at which properties can be animated.


    A quick google search shows you can manipulate it with JavaScript but one page I visited only had examples to call functions.



    • Like 4
  7. You can reduce your code to few lines. While defining the timeline, set it's paused property to true so you don't need to use pause method. Also set it's reversed property to true.


    Now inside click function use the ternary operator, on first execution it will check if timeline is reversed, if it is reversed then it will play the animation. If it's not reversed then animation will reverse. That's where setting reversed property comes into play for first execution.


    Also I am using from tween, so you don't have to use 0 duration tween to hide your div. In cases where you want to do that, you can use set method instead. Plus in case your animation is just single line then you can instead use a tween instead of timeline.


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


    • Like 4
  8. Not sure which effect you are referring to. If you meant the blobs for loading animation, you can achieve that by using blur and contrast filters, take a look at following video by Chris Gannon.



    If you meant the logo animation, that can be achieved by DrawSVGPlugin, take a look at demo by @PointC in following thread.



    Apart from that I don't really see any animation on the site.


    • Like 4
  9. Oh right, we forgot to mention that Draggable has it's own properties like x, y and rotation. If you animate element externally you need to call update method of draggable so it will update these properties. Take a look at following thread.




    Am I using the wrong Draggable version?


    The version you are using is latest but I don't see the behavior of element jumping. Are you talking about behaviour in your project? And in which browsers is it happening? Please post a reduced test case.

  10. You just need to reset x and y properties.


    GSAP creates an object _gsTransform and attaches it to the DOM object to keep track of all the transform related values. Usually you will want to avoid trying to manipulate css transform directly and use gsap instead. It keeps things simple.


    For draggable of type 'rotation' you will need to reset 'rotation' property.




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


    • Like 3
  11. You might be able to use CustomWiggle for symmetric movement from center.




    Following is a demo I created where elements have their default animation but when you move mouse they start following the mouse. Instead of animating actual elements, I have some objects that I tween. The elements follow certain item based on some conditions and their speed is changed as their target changes. It uses Canvas but that shouldn't be issue, you can duplicate same logic for html elements. Though feel free to ask if you have questions about certain parts in the demo.


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



    • Like 4
  12. Draggable has it's own x and y properties. So in situations where you animate element that is draggable, you might want to update draggable to reflect element's current x and y translate. You can do that using update method. Or you can apply bounds by passing first parameter to true. The second parameter is sticky which is useful when you change element's parent as you are dragging, if you set it to true then element will stick to pointer even if element's parent changes.


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


    I was creating a demo, but looks like @OSUblake responded already.

    • Like 4
  13. @Jonathan Strangely all three demos behave same as OP's demo on windows in both Chrome and Firefox. Only your demo with 'white-space' works as solution.



    The all-knowing Oracle of CSS never disappoints. Well done Sir @Jonathan ?


    We all are like Human Browsers at different levels. @GreenSock and @OSUblake(with Canvas) are 100% Human Browsers. @Jonathan is 100% Human Browser with all cross browser support plus he comes with quirk modes as well.


    • Like 2
    • Haha 4
  14. It works same in both versions to me in Firefox. In chrome it works as you are saying but that is incorrect behavior. It must be happening due to some quirk or incorrect values reported by Chrome. That's why it has been fixed, as 1.19 is 2 year old.


    You should group your all three parts together and animate that group instead. And use latest versions of files to get consistent behavior across all platforms.

    • Like 4
  15. Quote

    In the meantime does anybody have any idea why when I use the latest TweenMax script, the xPercent only takes effect on 1 of the 3 elements?


    All three elements are animating but you xPercent is based on percentage of element's own width and yPercent is based on height. So one element has noticeable translate but other two elements just move 1 or 2 pixels so you don't notice any animation on them.

    • Like 3