Make elements move across smoothly when changing position css - javascript

I am trying to create a number flip effect using the number-flip npm package as a basis. I wish to make it similar to Robinhood's stock ticker (when scrubbing across a stock chart).
I have been able to customise the base number-flip package so that leading zeros and commas are removed when not necessary. However when the number of digits increases, the rest of the digits simply jump over to the right in position. I would like them to be smoother when moving over.
The current way I do it is, any leading zeros/commas are simply hidden using the position property and then if they are required, they are made visible again. This hiding/unhiding causes all the visible numbers to jump across and make it unsmooth.
I have linked code sandbox below:
https://codesandbox.io/s/nostalgic-taussig-ymfn9?file=/src/index.js
Thank you very much for your help

Related

Right way to include dynamic animation with next.js

I would like to build a character creation app with next js.
This tool should allow the user to alter the character with given slider as well as buttons for the gender.
I would like to have a 2d animated version of the character that is dynamically changed with the input. For example the age slider should change the age of the character and the height should change the height as the slider is moved.
However I have absolutely no idea what the right way is to approach something like this. Of cause I need to create all ne animations before hand, however I am not sure in which way I need to create them. Changing the picture with every movement seems not right. Also I would probably only need to alter parts of the character.
If you have any examples for something like this it would be highly appreciate if you could share them.
You can use Farmer motion in your Next JS By installing it
yarn add framer-motion
# or
npm install framer-motion
or take help from : https://www.freecodecamp.org/news/how-to-add-interactive-animations-and-page-transitions-to-a-next-js-web-app-with-framer-motion/

Vue-draggable-next: increase detection range for empty list

I am using Vue-draggable-next along with Vue 3 to implement draggable lists. My application sometimes requires users to drag items from other lists into initially empty lists. I found that the dragging detection area is determined by how much space its elements are occupying: when there is no item in a list, it is super frustrating to drag one into the list because the detection area is soooooo small (only a dozen pixels at the start of the list on the page). This is demonstrated by the following GIF:
Is it possible to somehow set the detection range height of each list?
with this property you can expand the gap empty area:
:emptyInsertThreshold="50"
The parameter I received is positive numbers, try it, it worked for me.
you can easily solve this problem by adding a minimum size to the draggable, min-heigh: 200px this is because the drop zone is not specified and needs a min-height to be set

jquery slider with multiple handles (dynamically add and remove handles)

What I want to achieve is to make it possible to the user to define as many ranges inbetween a start-value 0 and a max value, i.e. 1000. I thought about how to do this in the best way and I came up with either idea:
Either I could dynamically add and remove sliders on the fly to the page. Make the min-value of the first slider fixed to 0. And somehow link them, i.e. when changing the upper-value of the N-th slider, automatically adapt the lower-value of the (N+1)th slider and vice versa. Problem is that it's some hassle to get this working as I need to also adapt the previous slider (N-1) and next slider (N+1) when removing the slider N inbetween.
Then I thought of the following:
Have ONE slider with a fixed lower-value to 0 and with at least two handles, where the user can add and remove handles on the fly himself. There wouldn't be any gaps allowed, i.e. every pair of consecutive two handles would always define one range. Something like this:
jsfiddle.net/NkjQr/1781/ (this example would define two ranges) with fixed value at 0 and on the fly add/remove handles. Is this possible? Couldn't find any jquery plugin to do this easily...
Or do you know an even better solution? Im looking for the one which is the most easy to implement myself.
Thanks a lot

Clone object with random rotation and position

I have one white line, behind a mask that is in the shape of my logo. And behind that a black background.
I want this line to duplicate once every 5 frames in a completely new 'position' and 'rotation' under the mask, until the whole thing becomes white with lines. I am a complete beginner to expressions and I don't even know exactly where to put the code. I think this is kind of what I am looking for:
seedRandom(1, true);
x=random(minvalue, maxvalue);
y=random(minvalue, maxvalue);
z=random(minvalue, maxvalue);
[x,y,z]
But this doesn't clone the line.
Any help would be great
Max
Unfortunately you cannot clone an object with an After Effects expression. I think you will probably want to add the random position/rotation expression to one layer, then duplicate that layer (command+d on Mac) many times, and then use an After Effects script like this one:
http://aescripts.com/pt_shiftlayers/
(Copy it to Adobe After Effects CS#/Scripts/ScriptUI Panels/, restart AE, and then open it from Window > Scripts > pt_shiftlayers.jsx or something like that).
It will offset your layers the number of frames you specify, 5 in your case. (The script is pay-what-you-want, so you can set the price to $0 and give it a try for free, or pay for it if you really appreciate the developer's work.)
If that doesn't suit your needs, you may be able to use a particle system plugin like Trapcode Particular or CC Particle World to generate a particle every 5 frames with no movement, random rotation, random position.
Let me know if this works for you.

Coding a jQuery rolodex-style clock flip animation?

I'm struggling to build a simple animation based on those old clocks with flip-down numbers. I added an image below copied from a freebie PSD found on Premium Pixels:
The biggest problem I'm running into is building a "flipping" animation using jQuery all in HTML/CSS/JavaScript. The only tutorial I've found is from this net tuts+ article which actually uses images. It splits the top and bottom half of the clock into two different image sets and replaces them for each second that passes by...
This method isn't realistic in a website since it provides no actual context for readers. I'd prefer to have the numbers hard coded into HTML and perform the flipping animation solely through jQuery - preferably no images except background ticker boxes. Or to put it another way the numbers are coded into HTML but the clock itself is a series of rolodex-style bg images.
I hope I've explained this well enough.. I've been struggling on this for a few days and I honestly have no idea how to approach this script. Maybe by splitting the top and bottom halves into different divs, then change the internal numbers for each second that passes? I'm fairly well-off in jQuery but I am weak on animations.
Thanks in advance for any support!
I think I would attempt to do something where the text is duplicated for the top and bottom. Then using images and css to only display each half appropriately.
The next step would be creating the illusion that the text is flipping with the image. I am not sure how you want to do that. I think it is a matter of sizing and speed. The sizing of the text in relation to the image and the speed at which it flips from the top of bottom.
The final part of the animation is having the top half ready with the next number and the bottom half queue up on completion.
I don't have any actual code that will help, but I hope this concept is something that will work out.

Categories