Search the Community

Good afternoon, colleagues! Please tell me, in the solution below, for some reason, sometimes there is a "twitching" of the line that moves. Moreover, in my project - it sometimes "jerks" (as if it starts anew every time, and does not continue) - uploaded to codepen.io - everything works stably, nothing jumps. With what it can be connected? How to make the RIGHT implementation? Sincerely.

I am trying to replace a jQuery plugin called "li-scroller" which combines the <li> tags from an unstructured list and scrolls the items inside a div one after another from left to right indefinately. Unfortunately the plugin distorts the letters slightly as the speed increases and I was hoping that Greensock would produce a more fluid result. Since I am new to Greensock, I am not sure which approach to take to accomplish this. Is Split Text necessary or would a method using Split Text produce smoother results than the alternative? Any guidance or examples to help get me started is appreciated. When I get something to work, I will post it to CodePen. Below is a list of some of the features I am trying to incorporate: Start at right of div, fade in letters and scroll from left to right. At left of div, letters fade out of display. First list item starts right after last list item without break in list. List repeats indefinately. Mouseover list causes the list scroll to pause. Seems simple enough but I have no clue how to tackle this. Thanks, James

Hello Sir ! I want Some Optimization On my Custom Cursor Example and most importantly i want to remove .hover-active on scroll ( plz suggest some logic in the place where i comment in codepen ) in the best way as calling a function on scroll may create lag or jank

Hello dear friends. I try to use some parallax effects using Intersection Observer following this article: https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa --- When I set wrapper position to relative its elements which I want to animate are getting last stop of animation and don't listen to progress property. --- Thank you in advance.

Hey. I lost a lot of time trying to implement a similar ticker with the ability to pull it along the x-axis. I found you have an example that almost suits me, but I can’t get to ask him a new position when I release the ticker and keep it playing

I want to make a fortune wheeler game where user can click the button to spin the wheel then when it stops, it will show what user get. I create the function to spin the wheel but not I'm sure which approach to detect which item is chosen. Can someone give me an idea how to approach this? Thanks a bunch!

As many games and simulations have their own request for animation frame calls that can be core to rendering obj positions frame by frame, it would be nice if I could call GSAP's from our own request frame function. Ideally everything gets a position in a single RAF. For instance I would love to do this: function animate(){ requestAnimationFrame(animate); TweenMax.ticker._tick(true); //call GSAP rfa manually render() } requestAnimationFrame(animate); TweenMax.ticker.setManualRequestAnimation = true; //set a flag somehow //now all tween run off from the user defined RAF TweenMax.to(obj1,1, { x:,y:,z:.... TweenMax.to(obj2,1, { x:,y:,z:.... I do realize there is the ticker event that i can listen to, but I dont want run my entire application based off of GSAP's RAF event. This would mean stop my RAF run tween then turn on my RAF in my own, with multiple tweens. It seems to make sense that GSAP runs off an game animation render loop and not vice versa. Is there a way to do this?

Hello GSAP, Looking for a way to return the actual ticks per second and display on the browser so I know when the animations are getting heavy. function addListeners () { TweenMax.ticker.useRAF(false); TweenMax.ticker.addEventListener("tick", handleTick); TweenMax.ticker.fps(60); } function handleTick(e){ fps.innerHTML = Math.round(TweenMax.ticker.FPS) + " fps"; }

Hi GS, I've got another question for some thing I'm trying: In the codepen I've attached you'll see a quick set up for something like a pong game. I managed to get the pong-handlers to move on click Now to move the ball I was just exploring to use the ticker and the ball position++ - Is there a way to change the velocity of such movement? Of course I have a lot of other challenges ahead, like the collision detection and the direction of the ball; But that's for later (most probably I have to consult the forum again :-)) Hope to hear from you again! D

Hey everyone I've linked a draggable to other animations many times, but they always start/stop with the onDrag event. In this case, I need the animation to be based on the draggable onDrag position and it needs to continue animating until I release the draggable. The animation stops on release and the draggable element tweens back to 0. The simplest thing I could think of was using the ticker adding a listener onPress and removing it onRelease. Is this the best way to approach this? Anything more efficient or easier? Thanks.

I'm looking at the documentation for TimelineLite.ticker and I'm curious: is it possible to set a priority to the event listener, such that it would be run before tweens and timelines update visually? I'm thinking of, for example, touching the DOM in order to take measurements that might affect a progress parameter, to which timelines refer. Basically read/write or "measure/mutate" batching. addEventListener(type, callback, scope, useParam, priority) Obviously, I can separate this in other ways but let's assume I need to read this value from the DOM just before the tweens and timelines update

Hi, I'm getting more and more familiair with GSAP and JS, but I'm only diving in to it since last week. Now I was playing around with the TweenMax.ticker and mousemove event based on: But I got stuck on trying two things: 1)move SVG paths in the same way as the circle element; I did get the rect element to work by changing the cx and cy into x an y, but I don't know how to interpret this with a path position, since the ticker event does not seem to work if I give the SVG group tag an id. 2)I attached a codepen sketch based on the pen from Blake Bowen; as you can see I simply added a timeline to rotate one of the elements. Now I want this to keep on rotating around the origin value of the element, but this doesn't happen. The origin point stays on the begin value of the element (which is the top left corner) and does not move accordingly to the mouse position. Initially I want to be able to do: 1)move SVG paths based on mouse position 2)know how to apply more than the change of position accordingly Can anyone help me? Please let me know if my question is unclear. Thank you in advance!

Hello! It's my first time useing the tick event provided by greensock, and i am having trouble to figure it out what i am missing in my code, because there are signs that something is not right. Well the concept is that there is a horizontal scrolling area (with iscroll.js), and during scrolling the upcomming element should scale up / animate to it's full size. I use the TweenMax.ticker.addEventListener('tick', myfunction) on line 312 to call the function which detects which box should be animated. On every tick event the selected box(es) properties get updated with TweenMax.set. The problem is that the performance is not right, there is a flickering during scrolling and in IE11 it is even worse (very jumpy). I have put together a fiddle to see it in action: https://jsfiddle.net/LaszloOveges/yykc0356/ Anyone has an idea what is wrong with this code? I would really appreciate any comment. Cheers, Laszlo

I need to do a small "news ticker" type animation - it would just consist of text scrolling along a single line. I spent a considerable amont of time looking around for somethig like this, and all of the references I found were either old Flash-based things, or jQuery code that is many years old. Is there a simple way to use Tweenmax to create a horizontal text scroller? Ideally, I'd like it to just use a bunch of <li> elements as sequential text scrolls. TIA!

Hello, I am having a little trouble using the FlexBlitMask to scroll an RSS feed. My goal is to create a scrolling RSS feed on the screen. I found an issue with TextFields a long time ago which basically causes the object to behave odd when too much text is asked to be rendered on the screen. Sometimes the text will stop at some character point and begin printing over itself. Other times, it displays nothing. The way I got around this was to create an HGroup, cut the text into blocks of say 100 characters, then as they are scrolling, queue them in and out of the HGroup. This method works just fine, but the text is jumpy and laggy. I attempted to use Blitmask to fix this problem, but it doesnt seem to want to show anything on the screen for me. I suspect some of the problem is due to me using horizontalScrollPosition on the HGroup to move the textFields it contains across the screen. hTextGroup = HGroup. It contains TextFields of RSS text. // How I declared blitmask blitmask = new FlexBlitMask(hTextGroup,hTextGroup.x, hTextGroup.y, this.width, this.height, true, false); A timer updates the hTextGroup.horizontalScrollPosition by a few pixels every x milliseconds I was successful in getting this to work with just one TextField and BlitMask, but using an HGroup, I'm having trouble. Any help you could provide would be appreciated. Thank you!

Hello, First of all, thanks for the great work and I (but I belive I speak in the name of the community) thank you for all your hard work that you guys have put on your beautiful product. I've successfully used TweenMax in past projects in different scenarios (animations, hover effects, games on dom, canvas, svg), but for my current one, I think I might need some extra help . To explain the issue I'm having, first I need to walk you through my environment: I am basically building a slideshow animation on canvas using TweenMax and createjs (to be more specific only the easel.js lib). Everything works fine, except that at some point the tweens are jerky. In my app, the browser is doing other things in parallel with the animations and - as expected - this has an impact on the framerate. From time to time the fps drops from 60 to 20-30 and after that it goes back up to 60. I know that the frame drop is mainly caused by the other things that my app is computing, but of course the effect is more visible on less powerful devices. The problem is also described in the codepen attached (which is obviously exaggerated in order to point out the evident). Unfortunately, I can't totally separate the logic from the animation and I need to run many things in parallel, so changing the architecture isn't a solution for my problem. From my research and try-outs, none of the cool stuff you guys are offering is a real candidate as a solution to my problem, and so far I've tried numerous combinations of ticker and animation settings (raf, no raf, different fps speeds, lagSmoothing and lazy rendering). After some more research and digging on the net, I'm starting to think that the problem is that I'm approaching the animations like a movieclip: I have a strict duration of time in witch I must go from point A to point B, while I should be approaching them more like a game: moving one step at a time, recalculating positions, velocities and other factors that influence the position of my items on each loop (in our case Timeline.ticker tick event). In game development, in order to ensure maximum fps while having other important (and probably CPU intensive) logic computed (such as collision detection or multiplayer sync), the most common approach is to implement a fixed time step loop (there are many other useful articles on this on the web, but this was one that explained the solution more clearly). I guess that the basic idea is to decouple the logic from the rendering process and try to predict when the next render will occur in order to approximate the position better. This approach seems to be working for most loop-based games (although not too many of them are written in javascript). I myself tried to implement this approach using my current architecture but failed and in order to not rewrite everything from scratch, I looked into implementing this kind of solution in the gsap animation engine. While I (clearly) don't know what I'm doing, it seems that this kind of implementation can be either implemented in the core Animation object (as an extra option, just like lagSmoothing) or as a plugin. The latter is more convenient, but from my understanding, plugins are targeting animations and specific parameters, while I would want to be more generic and target a timeline of tweens, not a specific property. Now that you've had the patience to read my lines, my questions for you are: Do you consider that having a fixed time step loop solution might fix my problem? Do you have any other suggestion that might help me solve my issue? Can the solution I presented be implemented as a plugin (if yes... could you provide some basic steps?) Have anyone else (because I couldn't find anyone else) suggested this approach for gsap? I look forward to your answer, because I really want to make this work with gsap and not to have to rewrite all my animation engine from scratch. Thanks, Gion

Hey guys, I'm using TweenLite's ticker to provide my game with a loop I can use for updating the physics. To make my game framerate independent I need the delta time (DT). The docs suggest the callback receives event which I thought might include the DT, however the event is undefined. I can calculate the delta time myself however I was hoping it would be available. For now I can do this... var previous_time = 0, current_time, dt = 0; TweenLite.ticker.addEventListener("tick", function() { previous_time = current_time current_time = TweenLite.ticker.time dt = (current_time - previous_time) * 1000 game.tick(dt) });

I was wondering if anyone could help me with an issue involving TweenMax and Easeljs. We're nearing completion of a game built in EaselJS, and just in the device testing phase. We're finding on some lower end devices, such as the iPhone 4 (iOS7), that whenever the framerate drops from our standard of 24 to around 18 or less, any TweenMax tweens currently running will appear to run at an incredibly low framerate compared to anything else. Other non-tweened movements will continue as you would expect at the framerate drop, but we'll only see as little as three frames in any one TweenMax tween - the start properties, maybe one or two frames somewhere in the middle, and eventually the end properties applied to the object, and that's about it. Very odd. It makes it look like the game is struggling much more than it actually is, as everything not tweened is often running at a reasonable rate. Originally we added an event listener to TweenMax's ticker, telling it to update the canvas on tick but this resulted in a lot of performance issues, as it was trying to update the canvas more often than it needed to. So now we just update the canvas on the EaselJS ticker update. I've since tried setting the TweenMax ticker's fps property to whatever the current easel framerate is, and this is adjusted each frame. This generally improves the animation speed of the tweens quite a bit, but they're still not updating as smoothly as any other animations we have playing on screen during these slightly more intensive moments. The canvas is continuing to update fine, so it seems to be that TweenMax isn't updating the values as frequently as it should be. Does anyone have any idea what might be happening? Is there a relatively easy way to manually update the progress of the tweens, so that the canvas ticker and the TweenMax ticker can be properly synced? Thank you

Hi everyone, I am using TweenLite.ticker.addEventListener("tick", updateGameState); to update the state of my game. The updateGameState function is called as it should be but when I leave the game screen and remove the listener using TweenLite.ticker.removeEventListener("tick", updateGameState); the ticker continues to tick and the time / frames continue to count. When I re-register my updateGameState function to the ticker then the current time is not zero. I would like to stop or pause the ticker while I leave / enter the game screen, in order to keep track of the game state. Is there a way to do this? Or am I to the wrong path?

I am accessing the time property via the ticker() methods event object: TweenMax.ticker.addEventListener("tick", loop, this, true, 1); function loop(e){ // the time property in the target if(window.console) console.log(e.target.time); // the time property in the target._eventTarget if(window.console) console.log(e.target._eventTarget.time); // do stuff with passing time } When accessing the time property in the event object that gets passed, which time property is best to use when keeping track of the passed time: e.target.time or e.target._eventTarget.time Any help will be highly appreciated!