Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 12/07/2017 in all areas

  1. lol, i had to google this myself and it seems JS has a native toLocaleString() function that does the trick too https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
    3 points
  2. That's not really GSAP related question. Most of the javascript related answers can be found with a simple google search, it will be great if all questions asked on this forum are directly or indirectly GSAP related only.
    3 points
  3. Here is similar thread. I am not completely sure but I remember reading @Jonathan's comment recently where he advises to not animate margins as it will cause browser to repaint layout.
    3 points
  4. I tried editing your pen, but it just seems too complex along with issues in css, html. I will post few links to video tutorial, that should cover most of the basics about how you can repeat animations etc and how to create complex animations with functions. I hope you will go through these tutorials, otherwise it just opens door for more questions. Also, try to post your questions with as simple example as possible with reduced codepen demo specific to the question. It makes it a lot easier to answer and will also help you understand quickly. https://www.youtube.com/watch?v=sXJKg8SUSLI https://www.youtube.com/watch?v=tMP1PCErrmE https://www.youtube.com/watch?v=QO1mLs96krY https://www.youtube.com/watch?v=ZbTI85lmu9Q https://www.youtube.com/watch?v=8ETMjqhQRCs
    3 points
  5. 1. I already provided 2 demos that showed how to make it work perfectly (degrees matched where the mouse position was), but if you're asking me to dig into your 700+ lines of code in a complex demo that uses a different framework (D3) and isolate where the logic may be wrong, that's not something I have the time to do, sorry. Hopefully you can take one of my earlier demos and apply the same concepts to get it to work in your complex project. 2. Here's an updated demo of a previous one I provided, and it now has an animated (gradual) change on press, but an instant update whenever dragged: I hope that helps. Happy tweening/dragging
    2 points
  6. It looks like the Chrome (in responsive mode) is automatically firing a "pointercancel" event even though Draggable does everything in its power to avoid that. It's basically ignoring the preventDefault() call, and acting like you want to touch-scroll the content. Definitely seems like a browser bug to me. The only way I could find to resolve your demo is to simply add the following rule to the CSS: .item { touch-action: none; } Again, I'm pretty confident this isn't a Draggable bug. But at least there appears to be a relatively easy fix you can apply to your CSS. Does that help?
    2 points
  7. BTW have you created plugins before? Just guessing, it can happen that both instances are referencing same variables, it had happened with me. If not I will suggest to start with something really small and simple example, once you are sure your implementation is working then you can start working on this. Otherwise you will end up spending endless time on figuring why something isn't working.
    2 points
  8. Hello @mk1 When @Sahil uses that "<div />" in the Draggable create() method. That can be done because @Sahil has jQuery included. And the Draggable.create() method accepts a CSS selector or a jQuery object. In jQuery, a self-closing tag as a selector "<div />" tells jQuery to create a new DOM node (element). So in this case it is being created just as a proxy for Draggable. https://greensock.com/docs/Utilities/Draggable Happy Tweening!
    2 points
  9. transform values like x and y are relative to the objects natural position. If you have an item with left:100px and another with left:200px, their x value is 0. If you give them both an x of 100, they will move 100 pixels to the right of their current position landing at 200px and 300px respectively. The solution for you is to give all your balls position:absolute. This will in effect put them all in the same place with x:0, y:0. You can then place them in a row and space them however you like (I use a TweenLite.set()) and then if you tween them to the same x,y values they will end up in the same spot
    2 points
  10. Hello @friendlygiraffe, why not just use an SVG clip-path or SVG mask? Examples of animating the SVG <mask> element using the GSAP AttrPlugin: You want to stay away from animating left, margin-left or width since they trigger layout like @Sahil advised above. which means the browser has to calculate the layout on each render tick, which equals bad janky (lost frames) jitter bug https://csstriggers.com/width https://csstriggers.com/left https://csstriggers.com/margin-left Happy Tweening!
    2 points
  11. @friendlygiraffe whenever you are animating any element, make sure to set it's position. Otherwise you will see a lot of unexpected behavior. @craftedbygc When you are animating width, transform origin doesn't really matter. It is only taken in consideration when you are doing any transforms like scaling, animating skewX/skewY etc.
    2 points
  12. Hi, like this one Best regards Mikel
    2 points
  13. And after writing all that, I noticed you were checking for a media query. That is not the same as a resize event. You should use a media query listener instead. It will only fire when the media changes, and not on every resize. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries https://docs.microsoft.com/en-us/microsoft-edge/dev-guide/css/media-query-listeners
    2 points
  14. I don't have any data to back this up, but I'm pretty sure that the only people who resize a browser window are developers. On top of that, resizing a window is somewhat limited to Mac users. Yes, you can resize stuff in Windows, but the UI is designed to snap the window into certain sizes, making resizes a lot less common. And then you have mobile devices, where resizes only happen when you rotate the device. Depending on the browser and device, events like resize, scroll, keydown, mousemove, touchmove, and pointermove will fire constantly, so you never want to do any work in those event handlers. Move the work to another function, and limit how often that function can be called. A common approach is to throttle or debounce the event, but there are problems with those approaches. With throttle, the last call may never happen. And with debounce, it may delay the call for too long. For most animation and UI related stuff, using requestAnimationFrame (rAF) is probably the best approach. That will ensure that any work you do will happen on the next screen render. Not too soon, not too late, just right. Here's how that might look. var requestId = null; window.addEventListener("resize", function() { if (!requestId) { requestId = requestAnimationFrame(update); } }); function update() { // run your update requestId = null; } The trick with using requestAnimationFrame is to make sure you don't call it more than once per animation frame. Doing so will add any additional calls to a queue, creating all sorts of problems. That's what the if statement inside the resize handler checks for. When you call requestAnimationFrame, it returns the id of the request. The first id will be 1, the next id will be 2, and so on. If you know your truthy values, every number except 0 will evaluate as true, so using the id is the same as setting a flag to true. When update gets called, do your work, and then set the requestId to null, allowing the next resize event to call requestAnimationFrame. If you're wondering why I'm using the id instead of a true/false flag for the if statement, it's because sometimes you may need to cancel a request. To do that, you have to pass in the id into cancelAnimationFrame.
    2 points
  15. Just a note about skew. The way CSS handles skew causes the object to scale. GSAP can skew like that if you pass in skewType as "simple" or set the CSSPlugin.defaultSkewType = "simple". See the section on 2D transforms in the CSSPlugin for more info. Comparison of skew types.
    2 points
  16. @Sahil I did, but not with this boilerplate. I tried to stick to the description I found on the web and maybe some info from that article mislead me a little bit. Still, I am going to do in depth debuging in order to fully understand what's going on under the hood. I thought I know, as you can see I was wrong I did many simple examples, that's why I wanted to make the next step :), well... it's still a progress
    1 point
  17. I was trying do that with absolute, but something gone wrong. But now it works, thanks for your help! Even tho my questions is kinda not about tweenmax, actually. Anyway, thank you!
    1 point
  18. Well that's just proxy target, so you don't have to use any extra html or use CSS to hide it, but I don't think it should be an issue. I had created video tutorial on it couple of weeks ago, see if it helps you. It explains the draggable part only, it's my first tutorial ever so I am not that fluent. The reason why both carousel respond to drag is, probably you are not isolating them. Plus I don't think using Modernizer would be good idea, because it just increases dependencies. @OSUblake can suggest what will be best approach to implement it as plugin/prototype. Plus he can also suggest what will be best approach to enable/disable draggable for touch devices.
    1 point
  19. Hey Guys, based on @Sahil solution I came up with a simple jQuery plugin. Feel free to post any thoughts or fixes. It's not yet finished, but Sahil's functionality is already implemented. Quick question, I can see some issues while Pressed and Mousemove same time, how can I make those two play nice together with draggable plugin? Quick question no.2 , I want to disable draggable for non touch screens, should I use a modernizr for this or GSAP have some plugin to make this work as well?
    1 point
  20. Hello @jack challenger and Welcome to the GreenSock forum! Here is another way if you need the last two decimal places if its a currency: Happy Tweening!
    1 point
  21. I had this error before and it was a wrong element id in string format without #. Got this too once when I dinamically created the IDs with a runaway for loop. I am pretty sure it is not GSAP bug.
    1 point
  22. Hi Sahil, Thank you very much, it is much appreciated. i will try to keep it more relevant! Thanks!
    1 point
  23. Yes, onRepeat fires at the end of each iteration, regardless of which "yo" it is
    1 point
  24. @sahil, thanks for the clarification. I didn't get that from his first post and demo. makes sense.
    1 point
  25. I haven't looked at all the examples in depth but setting right:0 on the element will make it grow from the right when you increase its width. .mask2 { position:absolute; right:0; } The trick is just putting it in the proper place to begin with.
    1 point
  26. Thanks Jonathan, good to know.
    1 point
  27. Ya, modifiers plugin gives you access to access calculated value on each frame, it gives you opportunity to modify these values before applying them. You can read more about in docs. It is really powerful feature. Following is thread with countless examples by @OSUblake, he basically requested this plugin and has done a lot of work to demonstrate all the crazy possibilities. Again the mapping function is something Blake posted, it lets you map two values in ratio. I am using it to avoid excluding height 'auto' of child element. Here is what happens if you don't use it. If you have played a lot with timelines, progress etc you will quickly understand what is going on. I don't fully understand mapping function either but I can see myself using it a lot in future, if you play with absolute values you will understand what is going on. Blake might explain it in detail once he reads it.
    1 point
  28. Hi, And here a proper made to measure ... It could be easy. Happy learning ... Mikel
    1 point
  29. You had missing quotes and comma on line 9, I have changed timescale so you can see that animation stops after repeating twice. Didn't really understand your question about infinite repeating animation.
    1 point
  30. We had similar question yesterday, where @Carl posted the following solution. I tried to implement it for height, though there is 1 problem. You still need to record 'auto' height and you can't do that without pausing ongoing animation. You can solve this by using a wrapper, and use height of child as 'auto' height and animate wrapper to expand or shrink. UPDATE: Another demo with slight adjustments to calculate paused animation.
    1 point
  31. Welcome to the forums, @Kerry. The main problem is that your SVG artwork isn't set up correctly - those look like lines but they're actually filled shapes. In other words, instead of there being a single path running down the center of each line (stroked), you've got outlined shapes (almost like thin rectangles that are joined). That's why it seems like yoyo:false isn't working - it's just that the circles are following the outline of the shape which goes down and back up again on the other side. It's not yoyo-ing. Once you clean up the SVG artwork so that it's simple stroked paths, I can help you with significantly reducing the amount of code necessary to do the animations. You can use a function to do the repetitive work. As for the offsets, you probably don't need to set any offsets at all - just set this on each circle: TweenMax.set("#circle-1, #circle-2, #circle-3, #circle-4", {xPercent:-50, yPercent:-50, transformOrigin:"50% 50%"}); The xPercent/yPercent make it shift over and up by half the width/height of the shape itself. The transformOrigin just ensures that transforms take place from the center of the shape. Hope that helps.
    1 point
  32. In this example the animation always returns to the start position when you press the stop button. Perhaps you can do something similar on over() out(). If you need something different please provide a reduced test case that we can work with.
    1 point
  33. Thanks @Sahil for the kind explanation, I really appreciate it, thank you!
    1 point
  34. Hi @OSUblake Thank you ! They contacted me after seeing my initial bike animation ( the one on top of this topic ). I understand your theory and it seems like a good idea ! Feel free to reuse my SVG as much as you want ! I don't feel like I'm able to contribute enough for the canvas part because of my current skill on this technology. So if I can help by editing the SVG with illustrator tell me. I remember you suggested reusing as much as possible the same paths. I tried that a bit but gave up half way in this new SVG because this kind of design was new to me and the delay was short. Would it help if I send you an edited SVG using a set of path that only differs in scale / position / rotation ( with a list of the "template" paths ) ? Let me know, I'd love to help ! .
    1 point
  35. Hi @alaric Nice job on Codrops article. I'm curious, did they ask you to do that, or do you have to ask them if you want to do an article? I'm still kind of curious to see how it would perform using canvas. The problem with SVG is that is scalable. That means everything needs to be recalculated when it changes. For every path, it has to calculate the geometry of the fill, the geometry of the stroke, and then draw those shapes on a bitmap so it can be rendered to the screen. But in your animation, the stroke is the only thing that is actually changing. The fill doesn't. You're just changing its opacity, which doesn't affect its geometry. That's a huge optimization that could be made with canvas. You can convert the fill to a bitmap, and keep reusing that instead of drawing a new path for the fill on every animation frame. In theory, that will reduce the amount of time the browser spends on doing path operations in half. If I get some free time, I might mess with your new SVG. The markup looks really clean, which should make it pretty easy to convert into a canvas animation.
    1 point
  36. Aw, thanks Oliver. Means a lot. Sometimes when most of what I hear is about some strange browser anomalies, rendering bugs, feature requests, or general questions, it's easy to lose sight of why we do what we do which is to help folks like you. So when you take the time to share a little "thanks", it's a really nice reminder. I'd like to thank you as well for all the times you've pitched in with answers in these forums. I'm so proud of the community around here. Happy tweening!
    1 point
  37. That's great to hear, Oliver. I'll be sure Jack gets to see this. We really appreciate all your participation in the forums and helping others. It really means a lot and helps us in more ways than we can express. Thanks so much for taking the time to share your kind thoughts.
    1 point
  38. ya, got distracted in trying to explain.
    1 point
  39. You could just call the function directly since you're not using a delay. function animateBg(){ TweenMax.to("#left-1", 20, { opacity: 1, skewY: '+=360deg', rotation: '+=10', ease: Power0.easeNone, onComplete: animateBg }); }
    1 point
  40. When you use repeat on any tween, it will repeat same animation. Such cases can be handled using different approaches, but always depends on animation. You can use recursive function that will get called every time animation completes and instead of using absolute values, you can use '+=10' which will take whatever current value is and animate it with +10. I am using TweenMax.delayedCall() method instead of timeout or interval because in complex animations it gives you control over everything. Also, you can't have separate eases for from and to parameters. You seem to have wrong idea about easing, easing just defines how entire animation is going to calculate, so it basically eases animation itself nothing else.
    1 point
  41. Remove that completely if you want GSAP to do the animation. It's one or the other - can't have both
    1 point
  42. First of all, welcome to the forums! Glad to hear you're enjoying GSAP. It looked like you were missing some positioning on the main-wrap element, like position:relative and overflow:hidden. This certainly looks like a general CSS question rather than a GSAP one. We try to stay focused on GSAP questions around here just because we don't have the resources to answer more general questions. I also noticed that you have a "transition" applied in your CSS on the same element you're trying to control with GSAP. That will definitely cause problems because every time GSAP makes a change (60 times per second), it'll start transitioning again and again for 0.5 seconds each, thus you'll probably find that it looks like your animations are taking way too long and have a strange ease to them. That's all due to the conflicts between CSS transitions and GSAP both trying to control the same thing. Happy tweening!
    1 point
×
×
  • Create New...