Chain multiple animations within loop

Question

I am trying to chain two animations together in an animation loop. First the text moves left, and then I want to get back to its original position with another animation.

I tried to add a callback within the Animated.timing within moveRight() but that didn't work.

Here is the code I have now. Basically I'm just trying to paste togeher moveRight() and moveLeft().

export default function App() {
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const secondFadeAnim = useRef(new Animated.Value(100)).current;

  const moveRight = () => {
      Animated.timing(fadeAnim, {
        toValue: 0,
        duration: 5000
    }).start();
  }

  const moveLeft = () => {
    Animated.loop(
      Animated.timing(fadeAnim, {
        toValue: -250,
        duration: 5000
      })).start();}
  
  


  const title = "This is some super long title it just keeps on going"
  


  return(
    <SafeAreaView style={styles.container}>
      <View style={styles.bord}>
        <Animated.View
          style={{
            transform: [{translateX: fadeAnim}]
          }}
        >
          <Text
          style={styles.title}
          >
           {title}
          </Text>
        </Animated.View>
                <Animated.View
          style={{
            transform: [{translateX: fadeAnim}]
          }}
        >
          <Text
          style={styles.title}
          >
          </Text>
        </Animated.View>
      </View>
      {moveLeft()}
    </SafeAreaView>
  );
}

joaocout · Accepted Answer · 2022-12-19 17:14:18Z

3

If I understand correctly, what you're trying to achieve is to make your text move in loop, going left, then right, then left...

If that's the case, you should be able to do this by composing some smaller animations.

Also, if you want to trigger your animation right after the component is rendered, you should be putting it inside an useEffect.

So, refactoring your animation, and putting it in a useEffect:

// ...
useEffect(() => {
    const moveRight = Animated.timing(fadeAnim, {
      toValue: 0,
      duration: 5000,
    });
    
    const moveLeft = Animated.timing(fadeAnim, {
      toValue: -250,
      duration: 5000,
    });

    Animated.loop(Animated.sequence([moveLeft, moveRight]), -1).start();
  }, [fadeAnim]);
// ...

Basically, we are creating a infinite loop of a sequence of two animations: moveLeft and moveRight.

Hope this helps!

answered Dec 19, 2022 at 17:14

joaocout

5582 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

laxboy436 Over a year ago

100%, answered my question perfectly. Thank you very much, Joao!

Collectives™ on Stack Overflow

Chain multiple animations within loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related