Kanye
Kanye
KPCKevin Powell - Community
Created by Kanye on 11/12/2023 in #front-end
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;
2 replies