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

Everything posted by Sahil

  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. 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.
  3. 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'.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. Sahil

    Swipe cards using Greensock

    Ya you will need Draggable. I added some comments in the demo so you can understand what is happening.
  9. 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.
  10. 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.
  11. 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,
  12. 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.
  13. 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.
  14. 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.
  15. Sahil

    Does totalDuration() respect timeScale()?

    You can use endTime method instead. In other cases you might want to calculate the time based on local and global timeScale. https://greensock.com/docs/TweenLite/endTime()
  16. I am not sure @GreenSock or @OSUblake can comment on that.
  17. Oh right, we forgot to mention that Draggable has it's own properties like x, y and rotation. If you animate element externally you need to call update method of draggable so it will update these properties. Take a look at following thread. The version you are using is latest but I don't see the behavior of element jumping. Are you talking about behaviour in your project? And in which browsers is it happening? Please post a reduced test case.
  18. You don't have to worry about it, it is your forum.
  19. You just need to reset x and y properties. GSAP creates an object _gsTransform and attaches it to the DOM object to keep track of all the transform related values. Usually you will want to avoid trying to manipulate css transform directly and use gsap instead. It keeps things simple. For draggable of type 'rotation' you will need to reset 'rotation' property. https://greensock.com/docs/Plugins/CSSPlugin
  20. Sahil

    Symmetrical vertical motion

    You might be able to use CustomWiggle for symmetric movement from center. https://greensock.com/docs/Easing/CustomWiggle Following is a demo I created where elements have their default animation but when you move mouse they start following the mouse. Instead of animating actual elements, I have some objects that I tween. The elements follow certain item based on some conditions and their speed is changed as their target changes. It uses Canvas but that shouldn't be issue, you can duplicate same logic for html elements. Though feel free to ask if you have questions about certain parts in the demo.
  21. Sahil

    draggable update

    I don't understand. What is your expected behavior and what problem you are facing?
  22. Sahil

    Synchronize Draggable with ScrollMagic scene

    You can update Draggable using timeline's progress. You might want to tweak some calculations but this should get you started. The onDrag calculation assumes your page only contains the draggable. Maybe you will be able to use Scene's enter event and some element's height to do the calculation if you will have other content on page.
  23. Sahil

    Draggable on Mouseover

    Check out demos in following thread, you can achieve it with little bit changes.
  24. Sahil

    draggable update

    Draggable has it's own x and y properties. So in situations where you animate element that is draggable, you might want to update draggable to reflect element's current x and y translate. You can do that using update method. Or you can apply bounds by passing first parameter to true. The second parameter is sticky which is useful when you change element's parent as you are dragging, if you set it to true then element will stick to pointer even if element's parent changes. I was creating a demo, but looks like @OSUblake responded already.
  25. Sahil

    Don't know how linking my bonus plugins correctly to my project

    You can add them inside node_modules/gsap if that is fine for you. Adding them to a separate folder so you can track them will be a bit tricky. We had that discussion in following thread. Following is another thread with angular 2 that might help you.