Popmotion is a javascript library that helps create fluid and complex animations.
Questions tagged [popmotion]
24 questions
7
votes
2 answers
Popmotion carousel fix for new version
https://codepen.io/popmotion/pen/Kyewbv
This is not working for some reason.
https://popmotion.io/pure/ as mentioned here it has to be
const slider = document.querySelector('.slider');
const sliderX = value(0,…
user3697484
7
votes
1 answer
Converting Popmotion example to GreenSock
I'm trying to convert this Popmotion example to GreenSock.
https://codepen.io/popmotion/pen/xVeWmm
var SELECTOR = '.box';
var velocityRange = [-1000, 1000];
var maxRotate = 30;
var smoothing = 100;
var box = ui.select(SELECTOR, {
…
Harry
- 52,711
- 71
- 177
- 261
6
votes
1 answer
React-Testing-Library(RTL): Animation causing TypeError with React Pose
I have a React application with an animation using React Pose (https://popmotion.io/pose/).
This works fine, but when I write an integration test for the component (using react-testing-library), the test fails.
The error I get when running the test…
DownChapel
- 1,384
- 1
- 16
- 31
4
votes
2 answers
How do I Rotate, Translate, and Scale rectangle from a keyframe using popmotion pure?
How do I make the last keyframe rotate my rectangle to a 35deg angle using popmotion pure?
https://codepen.io/matthewharwood/pen/XWmRPaK?editors=1111
HTML:
…
Armeen Moon
- 18,061
- 35
- 120
- 233
4
votes
2 answers
Single animation on stateless React component
I've started working with react-pose and had a question that I had for most animation setups in React.
It would seem you can't trigger animation on a component on first render?
Here is why I ask the above questions. Below is a react-pose example…
me-me
- 5,139
- 13
- 50
- 91
2
votes
1 answer
react-pose delay the pose group height transition until after children
const Item = posed.div({
enter: {x: 0, opacity: 1},
exit: {x: 1000, opacity: 0}
});
Currently when I remove an item from the list, the pose group div gets shorter and the item slides out…
AlexMorley-Finch
- 6,785
- 15
- 68
- 103
2
votes
1 answer
Why the ref in react is null here?
I have been experimenting with popmotion pure, since animation will have to use "ref" i am using it.
Here, why the value of ref(number) is null.
import React from 'react'
import {
styler,
tween,
merge,
action,
easing
} from…
Alpit Anand
- 1,213
- 3
- 21
- 37
1
vote
1 answer
react-pose animation flashing on mount
I have the following code, which should render a simple fade in animation for the Container component after 3 seconds. However, the component is flashing fully visible before fading in. My question is: why is this happening, and how can I stop it…
Colin Ricardo
- 16,488
- 11
- 47
- 80
1
vote
1 answer
Loop and morph an SVG between two paths
I am using Popmotion, Pose and flubber to morph and transition two paths of an SVG between React Route changes.
This works perfectly as
import posed from 'react-pose';
import { tween, easing } from 'popmotion';
import { interpolate } from…
Darren
- 2,176
- 9
- 42
- 98
1
vote
1 answer
react-pose: enter from left, exit from right
I'm trying to implement a enter/exit transition for my div,
But I want my div can enter from left, and exit to right,
after playing with the example here, I still can not figure it…
Littlee
- 3,791
- 6
- 29
- 61
1
vote
1 answer
Width and Height Animation with Pose on React Native
I really love to use pose on react native because it's really easy. But I got some small issues. My question is; is there any way to use pose on react native to make animations with width, height or padding? I made some animations with position,…
the_bluescreen
- 3,126
- 2
- 18
- 31
1
vote
1 answer
popmotion tween filter for unique number count
I'm trying to use a tween as a counter that only returns 0-4 over a duration.
I only want it to return a number of the same once.
I'm using https://popmotion.io/. Here is what I have so far.
import { tween, easing, transform } from…
me-me
- 5,139
- 13
- 50
- 91
0
votes
2 answers
Framer Motion , can we stagger items only on enter, but simultaneously exit them?
We're staggering animations using Framer Motion with some code like below. The problem is, we only want to stagger items in, not out. Is there any way to specify staggering behavior specific to initial and exit, as opposed to the top level…
Slbox
- 10,957
- 15
- 54
- 106
0
votes
1 answer
stagger doesn't exist in Popmotion's package
im getting the following error, when trying to use Popmotion's packages in my react-native expo app. ERROR TypeError: (0, _popmotion.stagger) is not a function. (In '(0, _popmotion.stagger)(array-content, 4000 / 5)', '(0, _popmotion.stagger)' is…
Prince D.Taylor
- 47
- 1
- 10
0
votes
1 answer
Popmotion end a tween immediately and jump to the end of the tween
I've got a simple tween:
const grass = styler(/* some element */)
const from = +grass.get('opacity')
const tweener = tween({from, to: 0, duration: 5000, ease: easing.linear}).start(v => grass.set('opacity', v))
How do I make it jump to the end of…
danday74
- 52,471
- 49
- 232
- 283