Jump to content
Search Community

Sahil last won the day on November 25 2018

Sahil had the most liked content!

Sahil

Business
  • Posts

    1,004
  • Joined

  • Last visited

  • Days Won

    71

Posts posted by Sahil

  1. You can simply set position of nav on resize. Also, you don't need to recreate draggable on each resize, you could update snap value like in example below or use function to calculate snap position. (Check docs to see how to use function to calculate snap value.)

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

    • Like 3
  2. Hi,

    Sorry can't provide a demo. I am trying to debug an odd behavior in complex project. We have all our transformOrigin values set in % and nowhere we specifically set transformOrigin in pixels but in one scenario values change from % to px. While changing to pixels, transform origin gets calculated correctly as 50% but gets set as pixels, so if div has 300px width, transform origin gets set to 150px. Is it a known behavior or in any scenario gsap will choose to switch to pixels?

  3. In past I used to use "power4.out", which is not big difference to "power3.out". Though I wanted option for other eases now because I am working on a carousel project with ability for customization and ability for different eases was one of the option was requirement.

     

    Also, I am using drag direction as input to change slide. If I throw and snap, then snap looks as you would normally expect but if I snap to next slide using little drag, then next slide snaps without "back" ease kind of effect so I also wanted to address this using ease option.

    I think I could still achieve it by using extra tweens but I wanted to keep all logic in one place. Anyway, I think it won't be possible as inertia plugin doesn't support to method. I will later check if I can intercept and mimic effect I want. Thanks

  4. Hi,

    Working with draggable after some long time. I wanted to use an ease on draggable in some situations but seems like it's no longer supported. I think  because of inertia plugin doesn't have to method?

     

    Quote

    Anything that directly references ThrowPropsPlugin (it's renamed InertiaPlugin and it doesn't have a .to() method attached to it

     

    Though I was curious if it's still possible to add support for easing? I have attached old and new reduced test case.

     

    Please let me know.

     

    Thanks,

    Sahil

     

    gsap 2.x

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

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

    • Like 2
    • Thanks 1
  5. Your ".box" element is covered by rest of the content, so mouse never moves over it. Try setting event on ".home" or some other element that won't be covered content, ".home" is container so it should work fine.

     

    Load TweenMax(or any other library that your code depends on) before your code. The TweenMax version you are using is really old, if you want to use GSAP 2 then use version 2.1.3 or use GSAP 3.

     

    https://cdnjs.com/libraries/gsap/3.1.1

    • Like 4
    • Thanks 1
  6. You can use cookies and trigger the mousemove event by creating jQuery's event.

     

    https://jsfiddle.net/ds6t5zec/1/

     

    Instead of triggering event you can just set the cursors position on load so it won't animate from (0, 0).  A better way would to just animate cursor in on first event, like scale it up where mouse is. That way you won't have to worry about cookies and it also takes care of how cursor animates when user visits for the first time. I had to use quickSetter method to avoid overwriting transform as it will interrupt scaling animation.

     

    https://jsfiddle.net/gpnta9oL/13/

     

     

    • Like 2
  7. I had to deal with this "issue" as well, I didn't go through entire code but for some reason ScrollMagic tries to update tween twice, then detects it as overwrite and tries to call onOverwrite method which has been removed from gsap 3. Certainly not related to GSAP and those are just warnings, you can ignore them without any issue. There are other compatibility issues, for example ScrollMagic tries to use 'Tween' object when you try to update scene duration on the fly, this gives error. You can set Tween equal to gsap directly in ScrollMagic files.

    • Like 1
  8. See the Pen ExaXjmr?editors=0010 by Sahil89 (@Sahil89) on CodePen

     

    You no longer need colorProps plugin, gsap will detect color strings and animate them. From release notes

     

    Quote

    The core engine will find colors inside complex strings and animate them properly (no plugins necessary). And of course it'll find all the numbers inside complex strings and animate those as well.  

     

    There is also new utility method called splitColor that you may find useful.

    • Like 4
  9. Hi,

     

    Just came across this odd behavior which didn't happen in gsap 2. If you click on buttons as follows, T1, T2, T1, T2 then you will notice that element's opacity just stays 0.1 and it also skips any calls at the start of timeline. The initial value does get recorded if I am resetting it somewhere in play head of timeline, uncomment line 38.

     

    Only workaround that seem to work is setting everything in onStart, a bit inconvenient but is that intended change? Release notes don't suggest using onStart to set values for repeating tweens.

    See the Pen PowYrEM?editors=0011 by Sahil89 (@Sahil89) on CodePen

    • Thanks 1
  10. You need to user horizontal scrolling for this, so you can trigger animations just as you do while vertical scrolling. Check out all other examples on that site, it has demo for almost everything.

     

    http://scrollmagic.io/examples/basic/going_horizontal.html

     

    If you don't want to use horizontal scrolling then you can use intersection observer API to trigger animations,

     

    https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

    • Like 5
  11. 4 hours ago, denken said:

    3) And finally, after a while the browser begins to slow down due to the number of paths.... 

     

    What you are trying to do is more suitable for canvas. It seems you are creating really long paths, which gets overwhelming for browser.

     

    It can be achieved using 2 canvas stacked on top of each other as layers. Draw your lines on bottom layer with lineCap set to round. And draw your circles on top layer. This way you won't be drawing too many paths unnecessarily.

    • Like 4
  12. You are using HTTP links on HTTPS site so they are getting blocked. Change your cdnjs urls to https.

     

    Quote

    Mixed Content: The page at 'https://www.m1xchange.com/' was loaded over HTTPS, but requested an insecure script 'http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'. This request has been blocked; the content must be served over HTTPS.

     

    Also note that you are using 'latest' link that actually points to really old version of GSAP. Latest version is 2.0.2.

     

    https://cdnjs.com/libraries/gsap

    • Like 5
×
×
  • Create New...