In my React Native project I'm using the Switch component. It can be switched directly by pressing it, but I also want to let the user change it by pressing nearby related items.
It of course animates the switching when pressed, but when I changed its state using setState() it just jumps directly to the other position without animation.
Is there a way I can programmatically trigger the animation when changing its state from code?
(There is a question with a similar wording but it seems to be to an unrelated problem I can't quite work out.)
Depends a little on the approach you're taking, but I'd say your best bet is with Animated (which is part of React Native).
You can do something like this:
render(){
var animVal = new Animated.Value(0);
Animated.timing(animVal, {toValue: 1, duration: 300}).start();
var animatedViewStyles =
{
marginLeft: animVal.interpolate({
inputRange: [0, 1],
outputRange: this.state.switchOn ? [100, 0] : [0, 100],
}),
// add some other styles here
color: 'green'
};
}
return (
<Animated.View style={animatedViewStyles}>
<TouchableHighlight onPress(() => this.setState({switchOn: !this.state.switchOn}))><Text>This is my switch</Text></TouchableHighlight>
</Animated.View>
);
See the docs https://facebook.github.io/react-native/docs/animated.html for more info.
Related
First things first. I absolutely love GSAP and their Scrolltrigger. Everything works fine, but unfortunately, the object I move on the x-axis based on scroll does not update when the user resizes his browser window.'
The x value is based on a formula I wrote.
Here is a part of the function later added in a master timeline with matchMedia Scrolltrigger:
var seoShowBenefitsTl = gsap.timeline();
seoShowBenefitsTl.addLabel("first Benefit")
.to(".anim-screen-item-0", {opacity: 0, duration: 0.5}, "first Benefit")
.to(seoATFHardware, {x: () => (document.documentElement.clientWidth - seoATFHardware.clientWidth) / 2 + calculateOffsetToElement(document.querySelector('.anim-point-item.--revenue'), 120, "right"), duration: 1, ease: Power3.in, onUpdate: function() {
if (this.progress() >= 0.5) {
document.querySelector('.anim-screen-item.--revenue').classList.add("js-screen-item-engaged");
document.querySelector('.anim-point-item.--revenue').classList.add("js-point-item-engaged");
} else {
document.querySelector('.anim-screen-item.--revenue').classList.remove("js-screen-item-engaged");
document.querySelector('.anim-point-item.--revenue').classList.remove("js-point-item-engaged");
}
}}, "first Benefit")
//some more code
return seoShowBenefitsTl
Thank you so much in advance!
Make sure you add the actual tween to the ScrollTrigger timeline, not a timeline. This helps making sure the values get update easier because of the following point.
Use invalidateOnRefresh: true on the ScrollTrigger timeline.
Doing those things results in this demo.
Hello everyone I'm trying to make a complex animation And I'm new to the framer motion so I need help if it's possible.
I'm trying to do this animation
all the animation will be revealed when scrolling but I don't Know How?
I tried this example but I think it will not take me any where example
So, Any clue please?
Thanks in advance.
i think useAnimationControls will help, but i think there is another better solution or another way, but any way i wish this help you here is the documentation, it says that it returns a promise (and also can be used in async function with await).
like the following code:
import { useAnimationControls, motion } from "framer-motion"
export default function App() {
let controls = useAnimationControls()
controls
.start({
opacity: 1,
backgroundColor: "red",
color: "white",
})
.then(() =>
controls.start({
color: "black",
backgroundColor: "lightgreen",
x: -100,
})
)
.then(() => {
controls.start({
opacity: 0,
x: 100,
})
})
return (
<>
<motion.div initial={{ opacity: 0 }} animate={controls}>
hi there
</motion.div>
</>
)
}
the above code will do these things below respectively:
will increase the opacity to 1 and change the color & bg color
then it will change color & bg color again and change the x position
then will decrease the opacity to 0 and x position too
here is another animation library that is simple and also may be useful to use named animejs, and also they have a friend and non-boaring documentation you can check it here
I'm developing a TimeLine component. There are Views list inside horizontal ScrollView that represents half an hour blocks. And I have a Component called TimeRangeSelector, which I use to select a range of time in TimeLine ScrollView. So while I scroll the ScrollView I need to move the TimeRangeSelector in parallel without any lag. Below is the TimeLine component. You can see the 30mins blocks are filled inside ScrollView. The yellow color one is the TimeRangeSelector which is a Animated.View. And the left position of the TimeRangeSelector is set using the scroll position. Each time ScrollView moves im setting the state as below.
<ScrollView
horizontal={true}
onScroll={this.onScrollFunc}
>
{timelineElements}
</ScrollView>
onScrollFunc = (event, gesture) => {
this.setState({
contentOffsetX: event.nativeEvent.contentOffset.x,
scrollStopped: false
});
};
And Im passing the scrollBarPosition as props to the TimeRangeSelector and setting its left position style as shown in below code
<TimeRangeSelector
scrollBarPosition={this.state.contentOffsetX}
/>
let styles= [
{
position: "absolute",
left: this.props.scrollBarPosition,
backgroundColor: backgroundColor,
marginTop: 20,
marginLeft: 1,
width: this.state.selectionWidth,
height: 100
}
];
But the issue is when I scroll the ScrollView the TimeRangeSelector moves with it, but it has a delay.. when I scroll faster the distance between where it should be and where it is, is becoming high. Can anyone give me some ideas according to your knowledge.
My assumption: According to my understanding, I think the lag is because of it takes several instances to reach the setState in and set the ScrollBarPosition as below steps.
ScrollView moved 1 frame.
ScrollView fires the onScroll function and emmits the event with new x point.
Then in the onScroll function it sets the State.
As I understand it takes some time to happen all these steps from JavaScript thread all the way to Native Thread and come back to JS thread again.
You should use something like const onScroll = Animated.event([{ nativeEvent: { contentOffset: { x: animatedValue } } }], { useNativeDriver: true }); with const animatedValue = new Animated.Value(0). This way the animation is only done on the native level without going back and forth through the JS thread.
This animated value can only be used effectively with opacity and transform style properties, but it should help you with your problem.
You can read more about this, in this awesome article.
I am trying to create a web app using React VR and run it using Samsung Gear VR.
I could not see the default white dot (VR pointer) while in VR mode in my scene. Consequently methods such as "onInput" and "onClick" are not working. The same methods work quite fine if I view the same scene outside VR mode - even using the browser provided in Gear VR.
Am I missing something? How do I access those methods while in VR mode in Gear VR?
Example code that works fine in normal web browser (including the one in Gear VR), but not when I am in VR.
<Text
style={{
// backgroundColor: '#777879',
fontSize: 0.2,
transform: [{translate: [0, 0, -5]}],
color: this.state.textColor
}}
onEnter={() => this.setState({textColor: 'gold'})}
onExit={() => this.setState({textColor: 'white'})}>
This text will turn gold when you look at it.
</Text>
You need to add a raycaster:
To do so, you need to do the following:
In your project, go to <project root>/vr/client.js.
Just before the init method, add a SimpleRaycaster constant.
const SimpleRaycaster = {
getType: () => "simple",
getRayOrigin: () => [0, 0, 0],
getRayDirection: () => [0, 0, -1],
drawsCursor: () => true
};
function init(bundle, parent, options) {
//...
Then, in the init method, set cursorVisibility: visible and add the raycaster to the array of raycasters:
function init(bundle, parent, options) {
const vr = new VRInstance(bundle, 'Example', parent, {
raycasters: [
SimpleRaycaster // Add SimpleRaycaster to the options
],
cursorVisibility: "visible", // Add cursorVisibility
enableHotReload: true,
...options,
});
vr.render = function() {
// Any custom behavior you want to perform on each frame goes here
};
// Begin the animation loop
vr.start();
return vr;
}
window.ReactVR = {init};
That's it. Now you should have a white dot in the middle of your view.
Desired Effect:
I want to create a basic animation of a smooth sliding View (left or right) in sync with the drag pace of my finger.(e.g. sliding an off- canvas menu into and out of view)
Currently I'm using Animated.spring in a parent component that handles all gestures. Then I'm using transform,translateX in a child component to slide a View left or right.
For Example:
Root.js(Parent Component that handles gestures)
_handlePanResponderMove(e: Object, gestureState: Object) {
let dx = gestureState.moveX - this.state.swipeStart;
Animated.spring(
this.state.slideValue,
{
toValue: newValue,
velocity: gestureState.vx,
tension: 2,
friction: 8,
}).start();
}
Navigation.js(Child Component that slides)
render(){
<Animated.View style={[styles.navigation,{transform: [{translateX: this.props.slideValue}]}]}>
<View >
</View>
</Animated.View>
}
The Problem:
There is sticky/lagging behavior with animation instead of a smooth movement that paces the finger sliding guesture.
My reasoning so far:
From my limited Animation experience - Animated.spring, Animated.ease and Animated.timing don't really describe well the equally paced sliding movement I'm after - but I suppose I need to be using one of them to get optimized native performance
(otherwise I'd just use .setState(slideValue) and do some math with the current location of my finger to figure the position of the View.)
Question:
What would be the preferred way to describe this type of smooth sliding animation using the optimized React-Native Animated library?
What I've tried out:
1) Using Animated.timing and setting duration low and easing to linear(my best guess at what I should do)
Animated.timing(
this.state.navSlideValue,
{
toValue: newValue,
duration: 10,
easing: Easing.linear
}).start();
2) Moving up the tension on Animated.spring
Animated.spring(
this.state.navSlideValue,
{
toValue: newValue,
velocity: (gestureState.vx),
tension: 300,
friction: 30,
}).start();
The preset functions timing, spring are useful for running animations to a specified value with a given easing. If you want to tie an Animated value to an event, you can use Animated.event instead:
PanResponder.create({
// on each move event, set slideValue to gestureState.dx -- the
// first value `null` ignores the first `event` argument
onPanResponderMove: Animated.event([
null, {dx: this.state.slideValue}
])
// ...rest of your panResponder handlers
});