Kevin Powell - Community•12mo ago

React Race Animation

My code runs an animation of a track. I want to some how overlap the img of finish line which is just a transparent checkered finish line over the track near the end so it looks like the finish line is animating in with it. I can't figure it out. For context I am trying to make something like [1]: https://www.online-stopwatch.com/car-racing-timer/?countdown=00:00:07 If you think GSAP isn't the way please suggest any other libraries etc. I am still learning but want to know if there is a better library etc. I used GSAP because I can track position of animations which is what I need. I have tried to animate or appear the finish line. But can't figure It out. I don't even want the code for help. I just want a better thought process of how to do it. Finish line img: https://i.stack.imgur.com/egHmb.png Track img: https://i.stack.imgur.com/qXjnS.jpg

import React, { useEffect, useRef, useState } from 'react';
import { gsap } from 'gsap';
import trackImage from '../../public/img/track2.png';
import finishImage from '../../public/img/finishline.png';

const Race = () => {
  const [isAnimating, setIsAnimating] = useState(true);
  const backgroundRef = useRef(null);

  useEffect(() => {
    const background = backgroundRef.current;

    const tl = gsap.timeline({
      paused: !isAnimating,
    });

    tl.to(background, {
      duration: 5,
      backgroundPosition: '200% 0',
      ease: 'linear',
    });

    return () => {
      tl.kill();
    };
  }, [isAnimating]);

  return (
    <div style={{
      position: 'relative',
      overflow: 'hidden',
      height: '300px',
      width: '500px',
      backgroundImage: `url(${trackImage})`,
      backgroundSize: 'cover',
    }} ref={backgroundRef} />
  );
};

export default Race;

import React, { useEffect, useRef, useState } from 'react';
import { gsap } from 'gsap';
import trackImage from '../../public/img/track2.png';
import finishImage from '../../public/img/finishline.png';

const Race = () => {
  const [isAnimating, setIsAnimating] = useState(true);
  const backgroundRef = useRef(null);

  useEffect(() => {
    const background = backgroundRef.current;

    const tl = gsap.timeline({
      paused: !isAnimating,
    });

    tl.to(background, {
      duration: 5,
      backgroundPosition: '200% 0',
      ease: 'linear',
    });

    return () => {
      tl.kill();
    };
  }, [isAnimating]);

  return (
    <div style={{
      position: 'relative',
      overflow: 'hidden',
      height: '300px',
      width: '500px',
      backgroundImage: `url(${trackImage})`,
      backgroundSize: 'cover',
    }} ref={backgroundRef} />
  );
};

export default Race;

Car Racing Timer

A cool Car Racing Timer! Or Car Racing Countdown - a great new timer to share with your class! Set the time, and watch the cars race! Vroom! Vroom!

1 Reply

MarkBoots•12mo ago

I don't have experience with gsap, but i think you can add another none-repeating background-image on top of it (comma separated). starting with a position of center right -100% to center right 0

Gaming

Programming

React Race Animation