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
MarkBoots13mo 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
Want results from more Discord servers?
Add your server