Is it possible to give an element a certain speed?

[hobiew]

Hey!

 

I'm wondering if it possible to give an Object a certrain speed. Say it keeps moving 50px per second to the right. 

TweenMax.to(obj, infiteTime, {speed:50}); 

Eventually I want my element to reposition itself to the left side of the screen. Once it reaches the right side of the screen. To create a pac-man like effect. (like in old games..Where once you leave the screen on one side you spawn on the other). This way I can create an infinite cycle of clouds for example. 

 

Any idea if this is possible or how I would go about this? I tried calculating the distance the object has to travel to reach the end of the screen, but this doesn't give the effect I want. Since it just speeds up or slows down the object to reach it in-time. 

 

P.S. English is not my first language, sorry if I made any mistakes. 

 

Cheers from the Netherlands

 

Hobie

[Jonathan]

Hello hobiew, and Welcome to the GreenSock Forum!

 

Do you mean something like this:

 

See the Pen qeHac by GreenSock (@GreenSock) on CodePen

 

Using the GSAP ModifiersPlugin to due a seemless loop:

 

See the Pen QEdpLe by GreenSock (@GreenSock) on CodePen

 

 

Just for fun Ghosts:

 

See the Pen uhKIy by GreenSock (@GreenSock) on CodePen

 

As far as giving an element a certain speed please check out the timescale() method:

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/timeScale/

.timeScale( value:Number ) : *

• Factor that's used to scale time in the animation where 1 = normal speed (the default), 0.5 = half speed, 2 = double speed, etc.

And dont forget to check out the JumpStart GSAP JS playground

 

https://greensock.com/jump-start-js#from-tween

 

Happy Tweening

[hobiew]

Thanks for the fast reply!

 

It comes close to what I want. When the first ghost leaves the "scene" I want it to spawn again. Currently it waits until all the ghosts have dissapeared but It should be a continues loop with ghosts. Do you think this is possible. I have to go for now but will check on this tomorrow. Will also provide some code I have written then to make it a bit more clear. 

 

Cheers

[Jonathan]

The last ghost example was just for fun.

 

The first 2 codepens show how to do an infinite seamless loop. If you toggle the overflow check box then you can see how once the elements exit on the right they stop moving and respawn on the left.

 

[OSUblake]

Here's a thread about animating clouds using a different approach...

http://greensock.com/forums/topic/14818-infinitely-repeating-svg-clouds/

[GreenSock]

@jimeast posted this in case it helps: 

 

I have an example where the speed is set and elements "regenerate" on the left after going off the right side.  I'll have to make a simpler example as this does a couple of things you are probably not looking for ant it's done in the background with tiled images.  http://codepen.io/jimeast/pen/QyxPXK

 

 

Also, as for having something go a certain speed, you have several options:

1. Use a linear ease (Linear.easeNone) and do the math yourself, like duration = distance / pixelsPerSecond
2. -OR- You could use the PhysicsPropsPlugin or Physics2DPlugin because you can define a certain velocity in those. 

If it were me, I'd probably just do #1  

[hobiew]

Thanks for the replys, very appreciated. I will try these suggestions out next week. Loving the library so far, will also post my progress of the current project im working on. 

 

Quick and detailed responses, not something you find everywhere! 

 

Cheers. 

[hobiew]

Hey there!

 

The modifier plugin seemed to do exactly what I wanted. So I tried the code from the video to replicate the effect, but it didn't gave me the seemless loop I was hoping for. 

 

Here is my Pen:

 

See the Pen oYYxmr by anon (@anon) on CodePen

 

 

Could it be that I'm using SVG Objects with a set Coordinate? Any tips on how I would make a seemless loop out of these objects. Thanks in advance.

 

 

- Hobie

 

edit: With some trial and error and a closer look at your codePen I come to this state:

 

See the Pen bBBwZb by anon (@anon) on CodePen

 

I dont think it quiet works how i want it to work. I either want it to check if the object left the screen on the X axis or the Y axis. If so then I want to start from its start point in the top of the screen. 

[Dipscom]

Hi Hobie,

 

In your pen you have forgotten to add the ModifierPlugin. Having said that, I have added it to your pen but found that it throws a bunch of errors to do with the SVG.

 

I know Jack has patched GSAP recently but I am not sure which is the latest version, I'll see if I can find a version that works or when Jack comes around he'll be able to point out if that bug has been squashed or not.

 

 

Don't listen to this Dipscom guy. He's talking nonsense - there's nothing wrong with the ModifiersPlugin - the errors showing up is his ability to break everybody's code by simply staring at it.

 

Just hang on there while I dig a bit to figure out what's the matter.

Edited November 17, 2016 by Dipscom

[Dipscom]

Ok, so I now worked out what the issue is. And it is so simple that I did not see it to begin with.

 

1) You need to add the Modifiers plugin to you pen in order to use it.

2) The values the plugin are evaluating are relative to each element. The reason all of your plateaus jump back to the start at the same time, even when you are using the Modifiers Plugin is because they are spread alongside the space straight in the SVG so, when you are calculating the Modulus of 1000, they all reach 1000 at the same time.

 

If you refer to the example pen: 

See the Pen QEdpLe?editors=0010 by GreenSock (@GreenSock) on CodePen

you will see that the boxes are first spread using GSAP before being animated. And so, when they are Tweened after, each box has a different starting point.

 

In order for your idea to work, you will have to do something similar.

 

Does it makes sense?

[hobiew]

Hi, yes I forgot to add the ModifierPlugin. Here is a new pen I made also using the set.

 

See the Pen bBBwZb by anon (@anon) on CodePen

 

It kinda works but also kinda not. If I edit the values from the set to get them to allign more correctly it breaks. Or if I want the objects to move more diagonal and edit the +y and +x values It also starts doing weird things. How do these values with the set the +y and the module interact with eachother. Maybe I should use an If statement, to check if they leave the field on the Y or X axis?

 

Sorry if this sounds like ramblin im still trying to wrap my head around the problem. 

 

For now I want them to increase the set Y (to 220) so they allign better but if I do this. The stream of objects get all messed up. 

 

Another thought I had is that my Start point (which is currently located outside the SVG Viewbox see: https://i.imgur.com/jHho27W.png) is wrong and I should calculate this more so it matches the X and Y offset of the items and the direction its heading. 

 

This should be the final design: https://i.imgur.com/Z22ynJo.png

 

A big part of the animation is the diagonal seemless loop. 

 

Sorry if I made any error spellings. I should check if the problem is in my starting point/number of objects/design first. 

 

edit: TL;DR Cause the above text might not make alot of sense.

 

I suspect I should edit my design to match the code instead of the other way around first to rule out mistakes you guys couldn't possibly fix. Although I would appreciate it if you could explain the different values (set y,x/to y,x/module y,x) and how they are interacting with eachother. 

 

Cheers

[Dipscom]

Let's tackle one thing at a time.

 

I got it correctly, the main point in your last comment is to understand the relationship between the set x/y to the tweening of x/y and then module of x/y.

 

It's to do with translating the element in a coordinate system (in this case SVG but it's the same logic with DOM elements).

 

Before you do any modifications to the elements with GSAP, your elements are all sitting at translate(0,0)  (assuming no other translate() modifications were applied), when you tell GSAP to tween the elements using the relative syntax "+=", GSAP will add the amount specified to the element's current position.

 

The first thing you want to do is to spread your elements along the space you have available. The .set() loop.

 

Now the elements are sitting at translate(x * i,y * i), no longer all at the same spot. Tweening them by "+=10" will mean the element[0] is at translate(10,10), element[1] would be at translate(20,20) - assuming a 10 units gap - element[2] would be at translate(30,30) and so on.

 

With the modifiers plugin, each element gets a check on its own local translate(x,y). By using a function that calculates the module of specific amounts, you can clamp the translate(x,y) as the value returned by the function is a number, not the relative "+=" string. When you ask for a module of a number by the same number, you get 0, making the element jump back to the starting position.

 

Looking at your Pen (which is very helpful, by the way) I can see that you're nearly there. The main issue that I see is that you're not hitting the end of the x and y at the same time, the panels are all moving slightly to the right as they move as they get to the bottom. Basically the proportions are not right.

 

With six elements, being 388 wide and 220 high, you want to move them by 2328 x and 1320 y. (388 * 6 = 2328 and 220 * 6 = 1320)

 

Here's a fork of your pen with one of the lines corrected. I have also tweaked your css so we can see the clipped elements, it helped to see what was going wrong.

 

See the Pen ZBBeJb?editors=1010 by dipscom (@dipscom) on CodePen

[hobiew]

Amazing!! Thanks so much. That fixed my problem. Is there any way, to reduce the choppiness of the animation? I've used other animation but only noticed this while translating things. I still would like to use SVG but I read that switching to PNG's might fix it. 

 

Applied your fix and my current progress on the project incase you were curios!

 

See the Pen bBBwZb by anon (@anon) on CodePen

 

Will be working on this next week again. Early weekend for me haha

 

Thanks again for taking the time to reply. 

[Dipscom]

The choppiness will be due to the amount of vector points you are moving.

 

Sadly there's no hardware acceleration for SVGs at the moment. That's why switching to PNG's will give you an improved performance. The browser will be able to give that element to the GPU since you're translating using transforms.

 

But! Fear not! You don't have to switch to PNGs and lose all the lovely crispiness of SVGs. If you export the assets you are going to use as individual images and don't inline them into your HTML document, but use the SVGs as images, then, you can translate those using the GPU.

[OSUblake]

It's really easy for your brain to detect any framerate drops in a linear animation. @Dipscom's advice for improving performance is great, but if you're still noticing framerate drops, you could lower the lagSmoothing threshold. I've noticed that dropping it down really low can even out the framerate if you have a bunch of linear animations going on. You should of course thoroughly test a value that low might actually slow down your animations.

TweenLite.lagSmoothing(33, 16);

Your project reminded me or making isometric games. In an isometric perspective, your tiles aren't moving diagonally. They're moving from left to right. So to make that animation, all you have to do is convert your movement along the x-axis into isometric coordinates. It's actually really simple. A square's width is equal to twice its height, so...

var isoX =  x - y;
var isoY = (x + y) / 2;

I made a demo with your graphics, but they are drawn at the wrong angle for that perspective. For it to look correct, the angle of your graphics would be need to be at 26.565 degrees instead of 30. It's close, but not perfect...

 

See the Pen zooERj?editors=0010 by osublake (@osublake) on CodePen

 

For comparison, I added a red line that is at 26.565 degrees so you can see the difference.

 

See the Pen ENNbpY?editors=0010 by osublake (@osublake) on CodePen

 

.

[Dipscom]

There's just not a topic that Blake isn't able to give great advice on.

 

Blake, tell me. How do I find tru luv?

[OSUblake]

Blake, tell me. How do I find tru luv?

 

You are my tru luv... member?

http://greensock.com/forums/topic/14575-how-to-create-a-sortable-list-with-draggable/?p=62366

 

 

And just in case anybody wants to make their own version of SimCity, here's how that isometric perspective should look...

See the Pen ?editors=0010 by osublake (@osublake) on CodePen

[Dipscom]

Luv4eva, Blake.

 

Be sure I'll be ripping that isometric grid at some point in the future.

[hobiew]

Allright progress has been made... http://hobiewetzels.nl/gsap/indexJohan.html

 

The lag smoothing did seem to work, but also brought some problems with it. (when I unplugged my charger it comepletely stopped). Also the effect was so minimal I decided to leave it out for now. Gonna save the choppiness reduction for later (might switch to png's if its get worse). My client doesnt mind if it's a bit choppy since it's also 8-bit style.

 

Also thanks for the code for the grid really put some things in perspective and made it alot easier. (Have still alot too learn haha). At the moment i'm playing with the interaction and would like to check if an svg object has been clicked or not. And execute different code based on this. 

var plateau1 = $(".plateau1");
    var object = $(".object");
    for (var i = 0; i < object.length; i++) {
    object[i].clicked = "no";
	}
    console.log(object[1].clicked); //returns "no"

$( plateau1 ).click(function() {
	var thisPlateau = $(this).find(".object");
	console.log(thisPlateau); //returns the element .object of the clicked plateau1 in which it states clicked : "no"
	console.log(thisPlateau.clicked); //return undifined
	if (thisPlateau.clicked == "no"){
    	TweenMax.to(thisPlateau, 0, {autoAlpha: 0});
    	thisPlateau.clicked = "yes";
    };
    if(thisPlateau.clicked = "yes")
    {
        TweenMax.to(thisPlateau, 0, {autoAlpha: 1});
    	thisPlateau.clicked = "no";
    }
});

This should be really basic JavaScript but I'm clearly missing something obvious. Also I read its different to acces DOM svg then it is to acces DOM html. Maybe this causes this problem? How ever other interactions with click and accesing the svg DOM works fine. Is this something your library handels?

 

Any idea why thisPlateau.clicked returns undefined?

 

Also how would I go about adding these TweenMax's to a timeline so I can change the TimeScale dynamicly while the animation is executing. 

function DiagonalGreen(){

var rows = 2;
var cols = 6;
var tiles1 = $(".plateau1");
var flat1 = $(".flat1");
var space = tiles1[1].getBBox().height * 1.5;
var spaceY = tiles1[1].getBBox().height * 3;

TweenLite.set(tiles1, { xPercent: 150, yPercent: -20 });
TweenLite.set(flat1, { xPercent: 150, yPercent: -15 })

for (var i = 0, y = 0; y < rows; y++) {  
  for (var x = 0; x < cols; x++, i++) {

    var p1 = toIso({ x: 0, y: y * spaceY });
    var p2 = toIso({ x: cols * space, y: y * spaceY });
    
    TweenMax.fromTo(tiles1[i], 20, { //add this animation to a timeline
      x: p2.x,
      y: p2.y
    },
    {
      x: p1.x,
      y: p1.y,
      repeat: -1,
      delay: -x * 20 / cols
    }).timeScale(2);   
  }
}
};

Thanks in advance!

[OSUblake]

That's odd about the lagSmoothing not working without your charger. Sounds like something that might need further investigation.
 
Your animation is very CPU intensive. I would definitely look into optimizing it. If you want 8-bit style choppiness, you could use the ModifiersPlugin. Check out this pixel snapping demo...

See the Pen rLGpGk by osublake (@osublake) on CodePen

 
To add the tweens to a timeline, use the delay value for the position parameter like this.

myTimeline.fromTo(tiles1[i], 20, { //add this animation to a timeline
  x: p2.x,
  y: p2.y
},
{
  x: p1.x,
  y: p1.y,
  repeat: -1
}, -x * 20 / cols); 

Demo of that....

See the Pen 7bd57ee1f75fad89e63c44cc8f62262c by osublake (@osublake) on CodePen

 
 
And I'm not sure why your click returns undefined. Accessing DOM and SVG is pretty much the same using vanilla JavaScript. JQuery is another story as it technically doesn't support SVG.

https://github.com/jquery/jquery/wiki/Won't-Fix#svg-or-vml

 

If you can make a demo showing that problem, it will be much easier to figure out what's going on.

[hobiew]

Allright thanks again for the replys i'll look into it tomorrow. I already found a way around the DOM issue. Yes I will definately try to optimize it as much as possible. Cheers

[hobiew]

Hey!

 

The project has been put on hold for a while but I recently started completing it. And wanted to share my progress with you guys. 

 

See the Pen VPgBQX by anon (@anon) on CodePen

(Artwork is property of Spielerei.)

 

Will also update once the website is live, sometime next week.

 

As you can probably see there are still performance issues. Most noticably with FireFox and when the charger of some laptops are unplugged. If you guys have any tips to increase performance I'd be glad to hear of them.

 

Greetings,

 

Hobie 

 

Thanks again for all the help in the past, and for the amazing library!

[Jonathan]

Hello hobiew

 

For Firefox you can add a slight rotation:0.01 to any tween that uses scale, x, y, or z. This will help with the jitter when translating or scaling.. helping fix a pixel snapping bug in Firefox.

 

I forked your codepen and added that slight rotation:0.01 to any tween that used scale, x, and y.

 

See the Pen wgNEpW by jonathan (@jonathan) on CodePen

 

You are moving a lot of elements at once so also keep in mind that many DOM elements animating can cause jitter jank (lost frames), due to how the DOM is and having layout being calculated depending on the CSS properties you are animating.

 

I also noticed that your mixing a lot of jQuery css() methods with GSAP. Its best to make sure that you are not changing any CSS properties outside of GSAP, so GSAP can keep track and record values and properties. Otherwise GSAP will not be able to keep track of elements being modified or changed outside of itself. The GSAP equivelent to jQuery css() method is the GSAP set() method.

 

Just my two cents for what its worth.