Sahil last won the day on November 17

Sahil had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


Sahil last won the day on November 17

Sahil had the most liked content!

Community Reputation

379 Leader

1 Follower

About Sahil

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

2,440 profile views
  1. Colour tween not completing

    That seems ok to me, I think looking more into how to raise events/callbacks on canvas will help you. For example if you raise event/callback when mouse enters certain grid and leaves, you can use a tween that will update the color value externally without getting called unnecessarily. @OSUblake has great experience with such things, but not sure when he will be online.
  2. Multiple TimelineMax onComplete function help

    Ohk I found the issue, it is because your scroll function returns paused tween. It takes control over all the elements and because you are using from tweens inside timeline, it renders all elements to their end position and pauses itself, which overrides everything. If you remove paused: true from the timeline returned by scroll function, you will see what is happening. I tried to trigger scroll function when onload animation finishes but I don't know exactly what to suggest, a limited codepen demo would be a lot easier to understand visually. Following is the what I tried to quickly have something to test. Following is the video that explains what immediateRender is, it reminded me how I was super excited about using from tween everywhere just to later find out how it gets really tricky.
  3. Colour tween not completing

    I tried console logging onComplete callback, and only few tweens(around 20-30) complete the tween. I don't know if there is any limit on maximum number of tweens but at the moment you are creating around thousand tweens every second. Out of which only 20-30 are able to complete. I don't know solution to it but if it is possible for you to create events every time there is mouse event, that will be a lot more efficient.
  4. Stop animation after hovering navlink

    That's because you are adding new tween into same timeline every time your mouse enters or leaves. And timeline waits for previous animation to finish before it starts playing next animation. Simpler way would be to use TweenMax or Timeline inside the event.
  5. Easing Function Not Displaying

    Interesting. It happens because 'named elements' (elements that have id or name) are added to document object as properties, that's why it works. But in general you should stick to writing string as '#light', it saves you from potential conflict issues where you might use variable with same name as id. If that's confusing you, using light works in most browsers but I will suggest to practice using '#light'. Here you can read more if you are interested.
  6. Multiple TimelineMax onComplete function help

    One question for now, are you sure onload and ScrollMagic enter events are not overlapping?
  7. Loading gsap inline

    You need TweenLite first, it is the lightest with limited features. You can then use other plugins with it. For example, based on your current code you need TweenLite, TimelineLite and CSSPlugin. Here you can read about which plugin does what: Here if you click on download button, you will see different options like Robust, Lightweight, Customize which can also give you some idea about which plugins to use.
  8. Coincidentally I came across this page today. In both Firefox and Firefox developer edition, FPS drops below 5 while using GSAP, in chrome it touches 60 FPS. Is it old test page or something has changed with Quantum? Or 2x speed of Firefox still not enough compared to Chrome?
  9. MorphSVG Mask

    You can morph it as well, it will work same.
  10. GSAP and Chatbot

    Sure it is possible, if you are familiar with events and callbacks you can do it easily. If this chat bot you are mentioning has callback or raises event every time it replies, there you can write a gsap code for animation. For example, in following demo every time you click anywhere, it responds to an click event and animation changes.
  11. Yes and no. You can't animate flexbox so you will have to do some extra work for it. There are some issues with your entire setup at the moment, for example you have nested '&.active' class under '.accordian-group.item' but from javascript you are adding active class to '.accordian-content'. Following is the thread where @OSUblake explains how you can animate flexbox by recording start and end positions. In current situation you will have to expand and shrink columns.
  12. Get co-ordinates in relation to drop target with Draggable

    There is no built in method to do it. Following is demo that shows how you can calculate coordinates inside target. Also, you can just perform hitTest onRelease callback rather than doing it on every drag, unless you need to do it for some other effect.
  13. Show/Reveal part of image slowly SVG

    That's because of transformOrigin, the lines that go down look fine but line going up has problem due to transformOrigin. Also can you please post your demos as normal codepen rather than copy/pasting everything in HTML? It becomes really time consuming to find every bit in single editor. It certainly makes it easy for you to copy/paste but anybody trying to help you has to take extra efforts every time.
  14. MorphSVG Mask

    Here is demo by @PointC in another thread that shows how to use mask to reveal svg. Not sure about masking html elements.
  15. how to killall tween of one game?

    You can use killTweensOf instead and pass all the elements from game1 container, that will kill tweens on any element contained in it. TweenMax.killTweensOf('#container1 *'); or TweenMax.killChildTweensOf('#container'); Though you will have to kill all delayed calls to functions as well otherwise anything being called later will start animating. TweenMax.killDelayedCallsTo(myFunction);