paul_ngc
paul_ngc's Achievements
2
Reputation
-
Hi GreenSock thank you for replying. I guess the lagSmoothing doesn't make sense indeed. But as I written in the opening post that I already tried the TweenLite.ticker.useRAF(false); But it is not working. I can hear it because I fade the music that is playing based on the progress of the animation: onUpdate: function(){ _animateItem( Math.round( ((nextItem._gsTransform.x + 45 ) / vpW ) * 100 ) ); }, So, my question is what do I need to do to make this work with a ThrowPropsPlugin.to Tween? I tested it on OSX latest (Chrome and Safari latest).
-
Hi @Jonathan, thanks for the detailed post. I tried the HTML5 Visibility API, but there is no difference. Visible/hidden is detected. Just like the focus/blur is working as well. But the framerate of the tween is adjusted due to the RAF that Greensock uses (which is a good thing). But not in this case, because I want the animations to continue playing in the background. But without RAF, because the framerate is throttled otherwise to like 2fps. When I focus the window again the RAF should be used again.
-
I have the following tween that is called every 60 seconds with a setTimeout: ThrowPropsPlugin.to( nextItem, { throwProps:{ x:{ velocity:200, min: 0, max: 0 } }, onUpdate: function(){ _animateItem( Math.round( ((nextItem._gsTransform.x + 45 ) / vpW ) * 100 ) ); }, ease: Power3.easeOut, onComplete: DRA.prepareNext.init }, 4 ); Everything is going fine, until I leave the browser window (new tab). I want it to continue animating. I read that I can cancel the usage of RAF. But I couldn't read anything about it in the docs ( So I've read that ThrowPropsPlugin uses the TweenLite. I've added the following code to cancel the RAF: function focusBrowserTab() { TweenLite.ticker.useRAF(true); } function blurBrowserTab() { TweenLite.ticker.useRAF(false); } window.addEventListener('focus', focusBrowserTab); window.addEventListener('blur', blurBrowserTab); This would be the best possible solution for me. Disable the usage of RAF when the window is blurred. When the window focus is back I want to make use of RAF again. It is animating now in a non focussed tab, but the tween does not take 4 seconds. More like 30 or so. And when I focus on the tab the timings seem to be messed up. Is there something I do wrong here? Edit: Forgot to tell that I also tried the TweenLite.lagSmoothing(1000, 16); But this didn't make any difference.
-
Thanks! The element._gsTransform.x works great. But I cannot seem to get it when working with a ThrowPropsPlugin tween. I want the coordinates when I send an Item to a different position. Animation is all good and smooth. But I want to get all the coordinates during this tween. I only get 1 output at the end when I use the onUpdate function. I've added an Codepen that probably makes it more clear what I want to accomplish: http://codepen.io/anon/pen/qqbvYp?editors=0010
-
I'm using Draggable to give a few elements the option to be dragged around the viewport. I have a function that I'm calling later on that needs the position (x,y) of these dragged items. Is it possible to get the x and y values of those dragged elements? OffsetTop is not working due to the 3d translates.
-
Wow! This community is really helpful Thanks to everybody for all working suggestions. I've marked the solution from Diaco, because I've used that code.
-
Hi Diaco and PointC, thank you for your ideas. Now I can explain better what the problem is. When I give a z-index value by hand it will be on the top. But this value is not working together with the zIndexBoost. When I click the button (codepen from PointC) the blue on gets on top. When I start dragging the other they won't get to the top. Unless I start dragging the blue one the z-index gets set by the zIndexBoost and the other ones can get on top when I interact with them. I'm not sure if this is somehow possible, but the 'cleanest' for me would be when I click the button and the draggable item would be like 'active' and gets the correct z-index from the zIndexBoost.
-
I have some draggable items that are overlaying. When I press on one of them it gets to the top because of the zIndexBoost. This is great. But I was wondering how I can only let a specific (item 3 from 11) to be on top by clicking a button outside the draggable space. Is this possible?
-
Hi OSUblake, thank you for your answer. This helped me a lot. And I learned that I can do it all with GSAP
-
Hi Diaco Thanks for Codepen. This helped me. I didn't know about the pause function. @OSUblake Bingo That's what I'm working on. When it's ready I hope it will make it into the example pages from GSAP. I have one more question. I've made a new Codepen (http://codepen.io/anon/pen/dYqBNj). Now there are 10 Items. By clicking a item it starts rotating. All is working fine, but what is the best way too handle this situation? Does every Item need his own TweenMax? There will be around 40 items (and growing). I guess it could be a performance issue later one.
-
Hi Dipscom, thank you! That helped me a lot. Now I have this: http://codepen.io/anon/pen/jbvawr Now i'm not sure how to make the item don't move at the start. It has to react when I click on 'play'. This is how it should work: 1. TweenLite.to(rotateCD, 1, {timeScale:1}); after this TweenLite it should blend into 2. TweenMax.to('#creature', .3, {rotation:"360", ease:Linear.easeNone, repeat:-1}, {timeScale:0} ); after clicking 'pause' the speed decreases (this is working) 3. TweenLite.to(rotateCD, 2, {timeScale:0});
-
Hello, at the moment I have a div that rotates infinite with normal css animations. But I want to do it with Greensock, because i want the animation to be more responsive depending on what I click. The idea is that I want the div to start rotating after clicking a button. It start slow and builds up speed. After 1 Second it's on full speed and keeps rotating until I press the button again. Then it should decrease the rotation till it stops. Could somebody point me in a direction? I would prefer to use tweenLite if that is possible.
-
Hi Diaco, sorry for the late reply. This works great. Thank you! I'm just wondering what the difference between onPress and onClick is. OnPress is active as long as the click/tap is not released?
-
Is it possible to ignore all events on a drag container ( type = scroll ) when I drag a nested element ( type = x,y )? When I use dragContainer[0].disable(); the container resets the position to 0,0. I tried to disable interaction with dragContainer during the onDrag event from a nested element, but no success. edit: I've added a pen. So when you drag the yellow container around you will see some images. When I drag those images (nested draggables) you will see that the container is moving as well. When you uncomment #111 & #116 you will see that the disable/enable is making trouble somehow.
