Sahil last won the day on August 7

Sahil had the most liked content!

Sahil

Moderators
  • Content count

    854
  • Joined

  • Last visited

  • Days Won

    55

Sahil last won the day on August 7

Sahil had the most liked content!

Community Reputation

1,971 Superhero

About Sahil

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

6,873 profile views
  1. Sahil

    collision detection

    Yup it is fun book to learn from, good to see you are enjoying it. I am not aware of any game development related book to recommend. @OSUblake can suggest for sure, he was the one who introduced me to that book. In the mean time take a look at following thread that might interest you. https://greensock.com/forums/topic/14033-looking-to-learn-more-about-physics/
  2. Hi Sahil, I don't know if you're the guy to ask, but, I just purchased the 'Shockingly Green' membership for a project that I'm working on with one other developer. I'm wondering if the other developer on my team will be able use the code? Will we need to share an environment or can we both work independently? What all can you tell me about this?

     

    Thanks,

    Jesse

    1. Sahil

      Sahil

      Hi Jesse,

       

      @Carl and @GreenSock can comment on any licence related queries. They would be notified as I have tagged them but you can message them directly or post in forum just to be sure they see your question. 

  3. Sahil

    drawSVG not recalculating path length during tween

    Couple of days ago I was working on something out of personal interest. I didn't have any plans to post it in the forum, it was meant to be a PM to @GreenSock I haven't spent more than couple of hours on it so it is not complete and I haven't tested it for performance. Few days ago there was a question about using drawSVG for canvas, so I wrote little class as experiment that will do it. Today I saw your question and I modified it to support path modification. Bonus: You can use MorphSVG on it. Though all browsers don't support Path2D so you will need pollyfill for that. See if you can use it. Also, what I am doing is very little and I have too much freedom to do it, while GSAP is really big library and every change has to be considered for any side effects and if enough users need it.
  4. Sahil

    Stop animation function

    Ya that works too, I was just overthinking about when you mouseout element will jump. But of course it won't even be noticeable with such short duration. @sali and the kat You might want to replace your 'mouseover' and 'mouseout' events with 'mouseenter' and 'mouseleave'. If your elements contain child element then mouseover will keep triggering on child elements, it won't happen with 'mouseenter' and 'mouseleave'.
  5. Sahil

    Stop animation function

    Switch is not ideal for such scenarios. You can instead keep track of active animation and element, and reset them when you hover on other element. Also, on codepen under each panel there is dropdown with option 'tidy'. Try clicking on that, you won't have to manually format your code. Also, you don't need to return a paused tween because your animation plays as soon as you construct the tween. Unless you are trying to reuse same tween for the element, in that case you can create objects that will contain element and it's tween. So you can pause it and resume it.
  6. Sahil

    Animating SVG attribute, blur, very bar rendering

    Nice trick! The values that you are trying to apply are too small to see changes in Firefox. (At least that's what it seems like) Chrome is doing weird stuff, it doesn't render any changes. So I tried adding circle to svg and applied filter to it and it started working, only to stop when circle got out of the viewport. Then I set the svg's position to fixed and it worked. Maybe you can add tiny svg in background somewhere with fixed position and have it's opacity to 0 or stroke/fill same as background. Though not sure what is the reason for such behaviour.
  7. Sahil

    Draw svg Issue with firefox

    I was on it too. It is because firefox doesn't report measurement when we use getBBox method on hidden elements or in this case line inside the mask. And GSAP uses getBBox because it is not path, so you should convert your line to a path. PS: Yup I have started digging into files, seems fun.
  8. Sahil

    Svg blob transition effect

    In video, Chris mentions he uses Bodymovin to try out animations or prototype them to get approved and then recreates them using GSAP. I usually do what I am asked to do or from comes to my mind. @PointC probably has some process for planning animations.
  9. Sahil

    Swipe cards using Greensock

    Ya you will need Draggable. I added some comments in the demo so you can understand what is happening.
  10. Sahil

    Swipe cards using Greensock

    Ohk there is too much confusion here. You looked at my demo instead of the comment I linked which had Blake's demo. But forget about it, you will need to study that entire demo before making any changes to it. Now focus on your demo only. In your demo you were supposed to trigger those button clicks. And please avoid editing your demo after posting it. Fork your original demo instead. Also keep in mind, if you practice by copy pasting code instead of trying to understand and learn from it, you will make your life really hard.
  11. Sahil

    Swipe cards using Greensock

    If you just want to swipe and don't want to redo all your work, then you can use trick as in following demo. I am just using Draggable to detect swipe, you can add that on top of your demo. If you want to drag and willing to recreate everything then take a look at demo by @OSUblake in following thread. That's where my second journey with GreenSock started. The demo is responsive and you can use media queries as well, given that all your slides are of same width.
  12. Sahil

    collision detection

    Hey @makis2404 With GSAP you can use Draggable's hitTest method to perform the hit test. On codepen under each panel there is option under drop down, called 'tidy'. It makes your code far more readable and neat, give it a try. I see you are having fun with small games etc. I would recommend a book you will enjoy learning from. All examples are for Canvas but you can apply same logic for the HTML elements. https://www.apress.com/in/book/9781430236658 All the examples from book can be found here: http://lamberta.github.io/html5-animation/ Checkout the video by author of original book,
  13. Sahil

    GSAP in Articulate 360 - Storyline 3

    GSAP works with any JavaScript objects. When it is working with DOM elements like div etc and if you try to change the scale, GSAP will use the CSSPlugin to apply changes in CSS. Now your snippet, TweenLite.to(Picture 1, 1, {scaleY:-0.5}); That is incorrect because object names cannot have spaces, so you must be getting errors in console. In order for that to work your object name should be without spaces, if it has spaces then it isn't an object. Second, your Picture1 object must have a scaleY property so you can use it to animate. I am not sure what kind of output you get with Articulate 360, if you can post a super simple demo on Codepen then I can take a look at which properties can be animated. A quick google search shows you can manipulate it with JavaScript but one page I visited only had examples to call functions.
  14. Sahil

    Pause animation on reverse complete

    You can reduce your code to few lines. While defining the timeline, set it's paused property to true so you don't need to use pause method. Also set it's reversed property to true. Now inside click function use the ternary operator, on first execution it will check if timeline is reversed, if it is reversed then it will play the animation. If it's not reversed then animation will reverse. That's where setting reversed property comes into play for first execution. Also I am using from tween, so you don't have to use 0 duration tween to hide your div. In cases where you want to do that, you can use set method instead. Plus in case your animation is just single line then you can instead use a tween instead of timeline.
  15. Sahil

    Svg blob transition effect

    Not sure which effect you are referring to. If you meant the blobs for loading animation, you can achieve that by using blur and contrast filters, take a look at following video by Chris Gannon. If you meant the logo animation, that can be achieved by DrawSVGPlugin, take a look at demo by @PointC in following thread. Apart from that I don't really see any animation on the site.