ng-animate | flexible animations | Animation library

2D noise can yield a 1D loop. 4D noise can yield either a 2D plane that loops in both directions (different example), or an unlooping 2D plane with a looping time axis (this example). Basically, it takes two unlooping dimensions to create one looping one.

The 4D example produces a looping 1D line at each (x, y) point on the image, but the difference is that you can vary that (x, y) to generate a 2D image that itself animates over time. With the looping line yielded by the 2D noise, you only have that line itself. The (x, y) come from the two extra dimensions of the 4D noise.

Also, Perlin shows a lot of 45 and 90 degree bias. Simplex is a lot better in that regard, and I designed OpenSimplex to satisfy that too. Perlin works fine for the looping 1D line, but if you're using the 2D noise to produce a 2D result, then you'll see that bias.

I will however suggest that you now use OpenSimplex2 instead of OpenSimplex (shameless plug), because it is supposed to be more uniform over the space. Esp. OpenSimplex2S, which is a direct replacement to 2014 OpenSimplex.

Instead of replacing the digit in the whole URL using location.href = location.href.replace(regExDigit, newLink);, you only want to replace it in the hash part of the URL (i.e. the part after the #)

What we can do instead is generate the new URL after we replace the number, instead of replacing the number in the current URL. This makes sure we only change the image number. Your new imageLink function will look like this (I've also removed the global variables to make the code cleaner and clearer):

The problem is that you are setting fixed widths for ticker elements.The ticker container has a width of 720px no matter what size the screen, and on screens < 767px the container for the scrolling text is just 230px.

Either change the CSS if it is your own, or if not you can add these rules after the Ticker CSS in included:

HTMl

Adding:

.ng-leave { display:none !important; }

to my css seems to have done the trick.

EDIT:

So @hpalu kindly pointed out that my previous answer wasn't the best as it leads to multiple loops being rendered at the same time which was visualized here when I tried to create hover events.

Here is @hpalu 's working sandbox with the updated code that utilizes useFrame which allows components to participate in the render function which is called 60 times/second.

As you can see here, the mouse event is working well with this code with no complications

Original answer:

Okay so from looking at the example provided in the documentation. It looks like I was missing the the animator.animate() within the animate function. So I had to include this function within my sprite function export:

To avoid writing any files, you can just save your image to BytesIO object. For example:

I would suggest the following

1) Determine what properties are accessible on the object that is passed through to the directive.

Digging into the code I can see things like it has a .view property. You could inspect this at runtime in the browser console to see what additional properties are available

2) You can write a rule on the button to show if the collection of fields contains one with a certain property you might have identified

something like this...

Hope this helps

I had the same problem with my animation. This solved it for me: https://www.bountysource.com/

You add renterer = gifski_renderer() to the making of the animation like so: