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. Quote

    I'm also here to pad my stats. @Sahil is charging towards his membership in Comma Club and @OSUblake came back last night with one of his answer tornado sessions so I'm just trying to keep up with the cool kids. :lol:


    I was on a mission to win 7 days straight, had to give up all hopes when I saw Blake online today. Looks like I will have to start over again someday.


    Still 2 more to go, if anybody has 10 questions please post them today when none of mods are online. :D

    • Haha 5
  2. It was supposed to be,


    if (
      && (target.classList.contains("map-card__header") 
          || target.classList.contains("map-card__close"))
    ) {
      target = target.closest('.map-card');


    Why it still worked then? Because in your demo if dataset.mapCard is undefined then animation would reverse.


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




    That is used to stop event bubbling. What was happening was, you were listening to click event on map card and close button so when you clicked on close icon, your timeline would start reversing but then even would get bubbled to the parent that is map card and it would again play your animation so you must have felt that close doesn't work.


    In following demo animation is set to play or reverse when you click on '.container' but all three elements are listening to click event. So


    1. if you click on edge of container then animation will play or reverse.

    2. If you click on edge of wrapper then nothing will happen because event is getting bubbled twice

    3. but if you click on center then animation will play or reverse because event is getting bubbled three times. So lets say animation is reversed, it will start reversing then playing and again reversing but you will only see it getting reversing because everything happens at the same time.



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




    • Like 4
  3. Adding delay to tweens using delay method does not get affected by the TimeScale but it seems like it does get affected by globalTimeScale or timeScale of parent timeline. So you will need to set timescale on individual tweens instead of timeline.


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


    if you want to change globalTimeScale or parent timeline's timeScale and want the tweens to keep delay then you will need to update delay and multiply it with timeScale.

    • Like 2
  4. The way you have created your tweener class(or is it Blake's demo? ), it takes one container as trigger element and runs the animation on all items that you pass. If you want to trigger animation independently then you will need to create multiple instances of Tweener and add items to them.

    • Like 4
  5. Nice question. I have had similar question but never bothered too much about it because it works. I will try to explain with what I know.


    JavaScript runs in a single thread so it will execute all statements before rendering/updating the page. So let's say on click event you are executing a function, JavaScript will execute all the statements before rendering the layout. In following demo you can see a there is a loop that executes 10 times it executes 20 statements of TweenMax and many more that you don't see from library. In console you can see that it takes about 2-8 miliseconds to execute the loop, it can vary depending from system to system. Once all statements are executed then browser will update the layout with any changes that occurred.


    Now for your animation to run at 60FPS browser must update any changes every 16 milliseconds so if you are doing a lot of animations that take more than 16ms, it will start degrading the performance by dropping the frames because JavaScript is busy executing other stuff. In demo, If you change the count to something like 5000, you will see that it takes browser about 1500ms to execute the loop. If you log the performance of the page using devtools you can see that for that time browser never rendered anything so no question of seeing jumps, just horrible user experience.




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


    Interestingly, just today a video was published about whole JavaScript event loop that talks in detail how JavaScript is executed, I haven't seen the video yet but it will be worth watching. You will find a lot more videos on that channel about everything in details.



    An article that talks about rendering and performance in details, https://developers.google.com/web/fundamentals/performance/rendering/


    Another article worth reading that talks about how different scrolling methods affect the performance https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#lvzozB8m1fZOWgTt.97


    Another thing is how animating certain properties affects the layout, for example if you animate left, top, height or width it will trigger the layout and browser will have to recalculate entire page. While animating transforms won't cause layout trigger in most browsers. On following page you will find list of browsers and what property triggers what, so you want to avoid those triggers wherever possible for better performance.




    About how animations work, at core GSAP just calculates over time with different easing formulas and set those values on the element. So basically you can animate numbers of any object, that's why it is very easy to use GSAP to animate different libraries like Three.js, PIXI js etc. GSAP uses the requestAnimationFrame function which makes sure everything animates at constant frame rate given that you don't animate too many pixels at once.


    Following is simple demo of how you can ease using simple Math,


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


    But of course GSAP does a lot more than simple easing, it makes sure that your animations execute at exact duration that you set and a lot of other work to work around different browser inconsistencies.

    • Like 5
    • Thanks 1
  6. Problem is you are using timeline to animate three elements with random sequence. So lets say you click on circle and quickly click on body, then your both timelines start almost at same time.


    1. The body click event's timeline finishes first tween and sets the alpha of '.copy' to zero but by the time it reaches third tween.

    2. Your hotspot click event's timeline reaches third tween which sets alpha of '.copy' back to 1.


    You can get around that by maintaining two arrays that will hold your timeline at that index so you can kill the animation.


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


    Take a look at following thread with similar idea, it uses same animation to play or reverse but you will find it helpful in future.



    In your demo you were using TweenMax 1.20.3 under javascript settings then you had TweenMax 1.20.4 link added under HTML setting. You don't need TimelineMax when you are using TweenMax, it is bundled with it.


    Also, in the demo you are mixing jQuery with vanilla js randomly it will lead you to a lot of errors and confusion.




    • Like 4
  7. You can do that by only start animating once scrollY is greater than element's offset. Then use window.innerHeight to set progress. You can use innerHeight to set the percentage, the way scrollMagic trigger works.






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


    You can improve performance by avoiding calculating offset every time you scroll by saving it as Skroller property and calculating it on resize.

    • Like 4
  8. Quote

    Am the only one? that shocks!!! that everybody use the method TweenMax.to


    You can use TweenLite PixiPlugin as you don't really need all other plugins bundled within TweenMax. TweenMax also has some additional methods like stagger tweens, killAll, pauseAll, globalTimeScale etc so if you don't need them you can use TweenLite only. . There is of course less code to execute in TweenLite but you probably will never notice any difference.




    Is it not ? more logical for the performances to initiate one time only this class ?, and then modify these parameters with a scope.


    You mean initilize TweenMax just once? Performance has always been main focus of GSAP so I doubt @GreenSock will miss something obvious.

    • Like 1
  9. @jonForum No problem at all.


    I gave it a try using ThrowPropsPlugin, see if it helps.


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


    I also tried to ease it in a way where object will slow down before animating reverse but I doubt that will be possible, maybe Blake can suggest something.


    Also, try avoiding easeIn and easeInOut because they behave very unexpectedly.  @GreenSock can explain why that happens.

    • Like 1
    • Thanks 1
  10. That's pretty unique approach I have seen for the first time. I don't see any issue with it except the play part. I will try to explain.


    When you tween something GSAP records the start and end values to optimize performance plus that's what tween engines do I guess. So when you play the Tween GSAP will record the values and and if you play that tween again it will repeat the same animation. Which you can see in following example. If you click again on window you will see that GSAP is repeating same animation, instead of taking into account new value.




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


    You will also notice that I am passing 0 as argument to the play method, if you remove that you will notice that after first run animation won't repeat. That's because playhead of animation is already at the end so there is nothing to play further.


    So to get around it you will need to invalidate your tween which will cause GSAP to record new values and your animation can move to new location.


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


    Though you will still need to pass the zero because even though you invalidated the tween the playhead is at the end. Does that help?


    I am just getting started with PIXI but this seems like an interesting thread so feel free to ask any questions. @OSUblake will join the conversation once he gets online.


    Also, most of the resources are targeted towards web developers so I don't think you will find a lot of useful tutorials for you. But if it helps you can visit the YouTube channel: https://www.youtube.com/user/GreenSockLearning


    There is also learning page link at the top of menu but I doubt you will find a lot of help there, so feel free to post your questions.

    • Like 4
  11. Hey @jonForum


    Unfortunately no. You can chain certain methods but can't do something similar for easing. Your best way would be write your properties per line, far easy to read or comment out.


    TweenLite.to(obj, 2, { 
      pixi: { 
        pivotX: x, 
        pivotY: y 
      ease: Power2.easeOut 


    • Like 1
    • Thanks 1