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. There are multiple issues with your svg and demo,


    1. You need drawSVG plugin to draw paths, you were also using really old version of TweenMax. DrawSVG plugin is part of club membership but on codepen you can use drawSVG plugin for free to practice and learn.

    2. You don't need to manually use document.querySelector, GSAP uses it internally so you can just pass your query string.

    3. DrawSVG plugin only draws paths, some of your paths seem to have no stroke and only has fill so it appears they are not being drawn.

    4. Your svg elements seems to be using inline transforms which can cause issues in some cases, please take a look at SVG gotchas thread.


    Also, manually chaining each path might make it hard to make changes in future, you can use stagger tweens to achieve same effects.


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


    Also take a look at couple of great posts on how to do handwriting effect by @PointC

    • Like 3
  2. Ya they have different speed so it creates illusion of depth. Please go through the threads we mentioned, you would be able to modify them to achieve same effect.

    • Like 2
  3. Ya we rarely get such posts, probably 2-3 every month. But it might keep more people around forum. I would go with 'Jobs & Freelance'. While you are at it, consider making sub-forum for all NPM related questions.


    I would have also requested area51 but all of our moderators have vanished. :D seriously, where is everybody?

    • Like 2
  4. It is really hard to tell you how you can create entire website. As you mentioned in other thread that you are beginner, I would recommend spending some time to get familiar with basics. You can start by visiting 'Getting started with GSAP' page https://greensock.com/get-started-js


    Take a look at following thread that discuss similar mouse effects,







    The parallax effect,




    The transitions, there is  a lot going on in that site. It uses canvas for the background transition effects. My guess is it uses PIXI js. Which is pretty advanced stuff. You can visit PIXI js website to learn more about it.

    • Like 4
  5. You can include GSAP to your html site just like how you would any other JavaScript file.


    Create a js folder at the root and place your javascript files in it, and reference them in HTML as following snippet.


    <!DOCTYPE html>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" media="screen" href="default.css" />    
        <div id="container">
            <div class="box one"></div>
    	<script src="js/TweenMax.js"></script>
        <script src="js/Draggable.js"></script>
        <script src="js/ThrowPropsPlugin.js"></script>
        <script src="js/default.js"></script>


    Because they are being included in the body tag you don't need to use any event to check if page has loaded or DOM is ready to be manipulated. Any code you write in default.js will run when page loads.





    • Like 4
  6. I thought you figured it out.


    Here is fork of Blake's previous demo. Here I am calculating two lengths from where scan should start and end, it is being determined by how much your mouse has traveled. It works fine on curves and edges, except on sharp edges where angle is too small. Actually it works just fine if you set your goals realistically.


    If you want more control then you might want to go through Blake's second demo.


    Again to understand how everything works and how you can make changes as per your requirements, you will need to get through the fundamentals of how paths work and the code we have posted.


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

    @OSUblake Do I get the trophy?

    • Like 4
    • Thanks 1
  7. You can add your tweens in a timeline and then pass that timeline to the setTween method.



    Add a tween to the scene.
    If you want to add multiple tweens, add them into a GSAP Timeline object and supply it instead (see example below).

    If the scene has a duration, the tween's duration will be projected to the scroll distance of the scene, meaning its progress will be synced to scrollbar movement.
    For a scene with a duration of 0, the tween will be triggered when scrolling forward past the scene's trigger position and reversed, when scrolling back.
    To gain better understanding, check out the Simple Tweening example.

    Instead of supplying a tween this method can also be used as a shorthand for TweenMax.to() (see example below).




    GSAP doesn't have default duration on tweens, you will need to use to, from or fromTo methods to create your tweens.


    If you are not familiar with GSAP or timelines checkout the 'Sequencing and grouping tweens with TimelineLite'  section on following page, https://greensock.com/get-started-js


    Also check the examples page on ScrollMagic, there are enough examples to find almost all solutions,  http://scrollmagic.io/examples/

    • Like 4
  8. Ya I was hoping an event that will fire before onPress.

    1. On mousedown, fire beforePress that will let user set the position or rotation of target.
    2. Only then fire the mechanism of onPress internally to record values of target like position, rotation etc.
    Draggable.create(target, {
      type: "rotation",
      beforePress: function() {
        // run logic to snap target to mouse before draggable starts recording values of target


    And for the second part where I was saying to hold the onPress, following snippet might explain it better.


    Draggable.create(target, {
      type: "rotation",
      holdOnPress: true,
      beforePress: function() {
        // run same logic to snap target to mouse but let user animate the target
        TweenMax.to({}, 0.3, {
          onComplete: function() {
            // The initiateOnPress method is going to be different than startDrag and it will skip beforePress event



  9. Hi Christian,


    Doesn't seem possible from what I have tested. We had similar question where users wanted to snap to mouse on click. You can read about what the code does in following thread,


    I modified it to animate but there are some issues, like if you click instead of dragging which is if you lift mouse before transition completes, your mouse keeps dragging still, and I didn't find any way to get around it. Fixed it by setting allowNativeDefaults to check if mouse is down.


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


    You can also use proxy target and use it's value for transitioning and dragging.


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



    But all this might be possible to simplify if @GreenSock adds another event before onPress, which we can use to do any calculations and snapping. And ability to hold the onPress event until we decide to trigger it. For example, onBeforePress we can do the transition and once our tween completes use the onComplete event to trigger onPress.

    • Like 1
  10. I doubt it's going to be easy.


    What I can think of is, let's say your mouse traveled 3 pixels, then compare closest points to the knob for 3 pixels and select one that is closest to the mouse. But there might be more problems to this solution, like lets say you move closer to the knob then you will need to add some conditional logic that will decide whether to move the knob or not.


    Blake might be able to suggest something but you will have to dive a lot deeper to pull it off.


    • Like 2
  11. Hi Puffywuffer,


    That has to do with how your path is created, and what are the start end points of the path. In following demo, if you change the shapeIndex you will see that it affects they way shapes morph. You can use the findShapeIndex utility to  test which shapeIndex you want to use.


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


    Check out the following video,



    But it is great to get in habit of how you create your paths, so take a look at following post by @PointC where he explains how you can change your path's start point in illustrator.



    • Like 2
  12. Hi FatMunkey,


    With Draggable you can set a trigger element, which will basically let you drag the element but when you do that, your draggable target doesn't act as trigger itself anymore.


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


    In my demo, lets take a look at right handle. I am setting the right handle's trigger element as element iteself, top-right corner and bottom-right corner. Reason to do that is, so I won't have to repeat the same logic for corners. I can trigger same logic for corners using the border handlers. So when you drag top-right corner, it triggers both top border and right border.


    Why I am using triggers and what are they?


    Those are DOM objects that I am creating but not appending to any elements. The dollar sign was just something that people using jQuery use while creating variables that use jQuery object(initially I was using jQuery to create that demo but dropped it), so it has nothing to do with entire logic. I am creating those proxy elements to simplify the logic, if I use draggable on border elements directly, they will get thrown off out of their position and it will take a more complex solution to keep them in position. Does that help?


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


    • Like 3
  13. I personally wouldn't code it like that because making any changes would be really hard, for example if you change number of panels then you will have to adjust everything else. Take a look at following similar thread.



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


    • Like 2
  14. The updateTo method only works with generic objects and not dom objects. In docs you can also see that you can get unexpected behavior for reversing tweens.




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



    What you are trying to do can be achieved using invalidate method. In following demo, onRepeat I am updating the values in vars object and then invalidating the tween. You can repeat the same logic for resize event so you won't see any odd behavior.


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



    • Like 4