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. If you use killAll, it will kill all your other animations from entire page. Can't you just pause your timeline like you do on mouseleave? The reduced test case you posted doesn't show why you will want to kill your animations. I would suggest posting another simple demo that shows why you need to kill animations.

    • Like 5
  2. By last image I guess you mean '#blackimg'? You are writing two tweens with delay of zero on same element and trying to animate same property. So whichever tween was executed last will overwrite previous tweens for same property. If that doesn't answer your question then post a codepen demo.



    Also, you should use timeline for that instead of trying to achieve it by using delays.



    • Like 6
  3. You can do that by determining velocity of mouse or scrolling, then use that velocity to apply skew. So to determine velocity you can use simple easing and take difference between target and easing value.


    Here is demo showing original effect based on mouse. This one uses a predefined tween, I set the progress of tween based on eased value.


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


    The scroll based effect is a lot more simple as you don't need to use any predefined tween,


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


    • Like 10
    • Thanks 1
  4. You were using split text on same elements multiple times, which was creating nodes as many levels deep. In the loop, on first tween you are setting opacity and in next two tweens you are setting color but not opacity. So lets say your animation completed till 3rd line, now all character nodes in first 3 lines have opacity 1 but rest of the lines have opacity 0. Now when you click again, split text is creating new character nodes 1 level deep. First 3 lines will work fine because their parent has opacity of 1 but rest won't show up because their parent have opacity 0. If you were using opacity everywhere it would have worked, but wouldn't have been efficient.


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


    I will suggest reading this article to better plan your animations,



    • Like 4
  5. Not sure what your question is exactly.


    One of the reasons your animations are jittery can be because your paths are too complex and/or long. You can simplify your paths using https://jakearchibald.github.io/svgomg/


    Another reason would be, you are running too many animations at once and asking browser to do too much work. Take a look at following article it has few performance optimization tips for canvas. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas


    As for your question about how to setup your animations, the demo you posted has a example using TimelineMax so I am not sure which part is confusing you.


    For parallax effect you can't use TimelineMax, here are simple examples of how you can do it in HTML. You can apply same logic for canvas,



    • Like 4
  6. Some simple transitions that people find hard to do, you can live code these





    This one is simple but also has a bit more advanced demo by Blake





    Add some simple morphSVG, drawSVG and split text effects,

    See the Pen aawwgx?editors=0010 by PointC (@PointC) on CodePen

    See the Pen oPELMe by PointC (@PointC) on CodePen





    Motion blur using SVG

    See the Pen WZqBjV?editors=1010 by osublake (@osublake) on CodePen


    Animate along the path, a bit pacman touch. You can also include your Mario

    See the Pen vWGGGv?editors=1010 by osublake (@osublake) on CodePen


    FLIP using GSAP to animate flexbox

    See the Pen vWGGGv?editors=1010 by osublake (@osublake) on CodePen


    Drag along the path

    See the Pen YYemRa by osublake (@osublake) on CodePen


    Circlular clip path

    See the Pen QKEjwv?editors=1010 by osublake (@osublake) on CodePen


    Handwriting hamburger

    See the Pen zLbxzO by PointC (@PointC) on CodePen


    Movie rating slider

    See the Pen devBRB?editors=1010 by PointC (@PointC) on CodePen


    Gooey Dial

    See the Pen oqeJbo by PointC (@PointC) on CodePen


    Polygon snapping

    See the Pen QdbQjN by osublake (@osublake) on CodePen


    SVG Dynamic Text

    See the Pen jpEdBd?editors=0010 by PointC (@PointC) on CodePen





    See the Pen LmOvEQ by PointC (@PointC) on CodePen



    See the Pen RNLdpz by osublake (@osublake) on CodePen


    See the Pen XXbLer by osublake (@osublake) on CodePen

    See the Pen dMLQJr by osublake (@osublake) on CodePen


    basically all of Blake's popular demos.


    Ran out of time.


    • Like 6
  7. Ya you can do that but working with pseudo elments in javascript is a bit more complex. For example, you can't define your rules together. You have to select them using entire string the way you defined them, for example if you defined them in CSS as '.parent .child:after' then you must use that entire string to select them. '.child:after' won't work.


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


    It gets a lot more easier to work with actual elements. Or using SVG to do animations like these. Here is same example using drawSVGPlugin,


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


    Few things to note,

    1. SVG viewbox is set to '0 0 100 100' and preserveAspectRatio is set to false so svg will stretch if element's height width changes.

    2. The stroke's vector effect attribute is set to 'non-scaling-stroke' so stroke won't look stretched with svg.

    3. I am using extra path that gets visible when animation completes because you could see tiny gaps on the edges. It can be avoided by setting different line cap and line join.

    4. SVG overflow is set to visible so stroke won't get partially hidden.


    • Like 5
    • Thanks 1
  8. 4 hours ago, Periyasamykrishnan said:

    how to add delay on  oncomplete function?


    Two ways,

    1. Add empty tween at the end of Timeline,


    timeline.to({}, delayTime, {});


    2. Use delayedCall inside onComplete function,


    var Tween = new TimelineLite({
      onComplete: function() {
        TweenMax.delayedCall(delayTime, function(){


    • Like 1
  9. In your demo, you had syntax errors and you weren't linking p5.js. So nothing was working. You also need to setup your canvas by using createCanvas method.


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


    I don't have any experience with p5.js but take a look at following video. That channel will take you on a long journey and has a lot of lessons on p5.js.



    In case you you need to animate your objects, you can use GSAP(for what this forum is). You just need to define your values in form of object. To demonstrate, I have changed your body variables in object and animating them using GSAP.


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


    If you ever decide to learn HTML, CSS and other stuff, we can point you to some helpful resources. And if you have GSAP API related questions then we would be happy to help.

    • Like 5
  10. Not sure why it went unanswered. Problem is OP was changing cx, cy attributes of the circle but once at start when you set scale to zero, GSAP will set transform origin based on that initial position. That's why all scale downs were ending up in top left corner.


    The fix is pretty simple, use GSAP and set the circle's x and y translate. Another thing to note, unlike HTML elements the default transformOrigin for SVG elements is top left corner.


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


    @GreenSock I guess it is conflict between data-svg-origin and css transform-origin, I can see matrix updating when scale animates, but _gsTransform doesn't change so it is changing in CSS I guess. Can you explain? Here is reduced test case.


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


  11. Quote

    No, not from a css or after effect sense! It does from an programming sense where [0] is the first in an array. I suppose it is in fact a form of an array defined first by the parameters of the spritesheet. It took me visually doing it with no overflow to get it.


    In previous thread, @PointC was correct. The first frame is visible that's why you have to reduce it by one frame. There are no arrays involved, it is just you shifting background in multiply of frame width.


    You can add and remove the ticker event listener on mouse enter and leave.


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


    • Like 2
  12. 6 hours ago, sali and the kat said:

    var autoPlay = TweenLite.delayedCall(1, setSlide);


    To pause it and restart im fighting.... 


    You can pause that and restart just like any tween because it is instance of TweenLite, autoPlay.pause() and autoPlay.restart().

  13. Not sure what you mean, the effect is based on width of the spriteslider so you can't really change the distance after which frame will change. You can easily add longer animation with far more frames and it will perform same. You can even use video with same logic.


    The speed of your 'tween' can be 10 seconds or 1 second, it won't affect the mouse interaction. You just need to pause your tween when draggable interaction starts.

    • Like 2
  14. 16 hours ago, OSUblake said:

    If you've ever heard of the golden ratio


    I get to hear that often but only as 'Golden Ratio logo', 'Golden Circles' etc. So I decided to get to bottom of it before I learn about silver ratio, then one thing led to another and this is what I ended up with. This has no relation with golden ratio, just me drifting somewhere randomly. :D


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


    • Like 5