Jump to content
GreenSock

wpoosanguansit

Seamless continuous looping with EaselJS objects.

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

Thank you for your library.  I have been testing out and trying to create a infinite scroll of images in EaselJS with TweenMax and TimelineMax.  However, I always see gaps in images scrolling from the left and also a gap in the loop.  I saw a similar question on the semless looping that has the suggestions for css trick.  I am not sure how to get the effect with EaselJS canvas.  Here is my code:

 

            tweens                      = []
            for key, manifest of manifests
                break if index >= NUMBER_OF_ITEMS
                imageContainer          = new createjs.Container();
                imageContainer.x        = -itemX;
                y                       = Math.floor(Math.random() * (displayHeight - itemY - 10))
                y                       = y + (itemY / 2) if y < itemY
                imageContainer.y        = y;
                imageContainer.name     = key
                tweens.push(TweenMax.to(imageContainer, 50, { x: displayWidth + itemX / 2, ease: "linear" }))
                stage.addChild(imageContainer);    
                preload.loadManifest(manifest);
                index++
            mainTimeline.appendMultiple(tweens, 0, "normal", 8.5)

 

I would repeat this append each time a set of images are loaded into the canvas.  But the two problems above are always present.  Is there a way to overcome those? 

 

Also, related to this question.  I have a drag and drop on the image.  I pause the timeline when drag and drop is performed.  However when the timeline plays again, it always go back to the same previous postion.  I have this to set the new position but it doesn't seem to do anything:

 

mainTimeline.set(o, {x: newX, y: newY})

 

Is there a way to set the position of the object in the timeline that would conitnue the flow?

 

Thank you for your help.

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

As for the gaps between images, I imagine it has to do with how EaselJS handles rendering sub-pixel values. Perhaps the gaps are due to anti-aliasing or snapping to nearest whole-pixel values.

Maybe you should try using RoundPropsPlugin to assure that only whole numbers are generated by your tweens

TweenMax.to(imageContainer, 50, { x: displayWidth + itemX / 2, roundProps:"x", ease: "linear" }))

Does this give any better results?

 

I'm not so sure what you were trying to do with

mainTimeline.set(o, {x: newX, y: newY})

I don't know what o is. 

 

Timelines, or tweens rather, record their ending values when they are created. The starting values get recorded the first time the play. If you pause a timeline and then start moving assets around that were previously controlled by the timeline.. the timeline literally has no knowledge of that. From your explanation of what you are trying to do with the drag and drop, I'm not so sure a timeline is the best solution. 

 

Its hard to visualize what is happening from code fragments.  If you could put a reduced test case on codepen or jsfiddle it would help us get a better idea of what you are trying to do and the problems you are facing.  

Link to comment
Share on other sites

Carl,

 

Thank you for your help.  I have put up the test code that  I am working on at

 

http://54.243.56.68/pages/canvas-page/

 

I would like to be able to push out images that come in to the display and allow people to drag and drop those images on the canvas as they like.  And the tween would loop infinitely.  For the gap in between the repeat, I am not sure how do I close that gap with canvas.  For drag and drop, if you drag & drop the images, they will just snap back to their prior positions.  So to set the new positions, I query the tweens and try to set the x and y of those tweens but I am still not able to make it work.  Regarding the gap between images, I will try that out your suggestion later tonight.  But I suspect that I have made some error in the way I added the tweens instead of the rounding error.

 

Also, I looked around your tutorials, I found that you have made Blitmask for the looping purposes.  Will you have those for JS as well?  Again, thank you for your help.

Link to comment
Share on other sites

Hi,

 

Thank you for posting the example.

I don't think the needs of your project make for the best usage of TimelineLite/Max.

A timeline has a beginning and an end. As the timeline plays a virtual playhead advances that makes sure that each internal tween is being rendered at the appropriate time. The playhead can only be in one position (time) at any given time. 

 

The type of seamless loop that you want requires that items at the beginning of the timeline are appearing on screen while items towards the end of the timeline are still tweening off screen. it sounds like you want the first tween to start playing right behind the last tween. its impossible to render the beginning of the timeline while the end of the timeline is still playing. 

 

Back in the Flash days it was common to duplicate the items being animated and place them back to back to create the illusion of a seamless repeating loop. This approach wouldn't make much sense in your situation as you are allowing the items to be dynamically positioned with drag and drop. 

 

Another thing to point out is that tweens don't have x and y positions. It isn't possible to change the x position of a tween. You can change the x/y position of the target of the tween (object being animated), but as pointed out earlier, once the tween resumes, the object will snap back to where it was when the tween that was controlling it resumes. 

 

Tween's have a startTime property which represents where the tween starts relative to its parent timeline. It is possible to adjust the start time of a tween. Technically speaking you could change the startTime of the tween that controls the object that was drag/dropped so that the tween's current time would line up with the parent timelines current time and render the object in the proper position. 

 

For instance if your tweens all move at 100 px per second and the user drags the item back to the left 100px, you could in essence adjust the start time of the tween to be 1 second earlier than it originally was. In your app this could be quite complicated and ultimately it wouldn't help much as the seamless looping is still going to be an issue.

 

And don't worry, its perfectly fine that you started out trying to use a timeline for this. Its sometimes difficult to understand all the theory behind timelines until you start using them. There are 100 other situations where they make sense, but I don't think this is one of them.


 

I think you would be better suited if you had a mechanism that simply updated the x position of each item at a constant rate. On each update you would check to see if the item has gone off the canvas to the right. When that happens, you just move it back behind last item in the row.

 

This approach will accommodate the drag and drop and seamless looping. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×