Hi guys,
I thought I was good with Gsap after using it a few years ago. But I've been trying to make a basic step animation for my portfolio, in a react project- on VS Code. I can't for the life of me see what I'm doing wrong!
I want the 'eye' to look left/right and then blink. I've got the pngs to do this and I thought it'd be simple as cycling the div's backgroundImage value in a timeline.
No such luck.
I try using img src instead and changing that.
I can't use .to and .set is instantaneous.
I've even tried standard js by putting the image references into an array and trying to cycle through them, but this didn't work and to be honest, I wanted to use GSAP as it offers better control over the animation (e.g. duration of even screen).
I've copied my code below. Sorry I am unable to set up a Codepen right now but if it's absolutely necessary I can do tomorrow. Appreciate in the meantime my images aren't hosted online either. In the meantime, from my syntax, where am I going wrong? I've currently got it half working changing the visibility of different images. But that's not how I wanted to do it. I get a horrible fading effect, I get blank spaces between hiding one image and showing another. And it reads horribly in code!
Is anyone reading this face-palming over how simple this is? If so please let me know!
All the best,
Mike
Code:
import React, { useEffect } from 'react';
import { TweenMax, Linear, gsap, TimelineMax } from "gsap";
import Background from 'https://ibb.co/kqxV16k';
import Gear from 'https://ibb.co/BskrXLr';
import Open from 'https://ibb.co/9Tj4Bk1';
import Left1 from 'https://ibb.co/3cr7XCJ';
import Left2 from "https://ibb.co/D5dtKzN";
import Right1 from https://ibb.co/FsVTH29";
import Right2 from "https://ibb.co/JckcvKp";
import Close1 from "https://ibb.co/JCDXFkV";
import Close2 from "https://ibb.co/xSbGLys";
import Close3 from "https://ibb.co/87gB272";
const Animation = () => {
var tl = new TimelineMax( { repeat: -1, });
useEffect(() => {
TweenMax.to("#gear", 6, {
rotation: 360,
ease: Linear.easeNone,
repeat: -1,
});
tl.to("#open", { autoAlpha: 1 }, 1)
.to("#left1", { autoAlpha: 1 })
.to("#left2", { autoAlpha: 1 })
.to("#left1", { autoAlpha: 1 }, 1)
.to("#left2", { autoAlpha: 0 })
.to("#left1", { autoAlpha: 0 })
.to("#right1", { autoAlpha: 1 })
.to("#right2", { autoAlpha: 1 }, 1)
.to("#right2", { autoAlpha: 0 })
.to("#right1", { autoAlpha: 0 })
.to("#open", { autoAlpha: 0 })
.to("#close1", { autoAlpha: 1 })
.to("#close2", { autoAlpha: 1 })
.to("#close3", { autoAlpha: 1 }, 1)
.to("#close3", { autoAlpha: 0 })
.to("#close2", { autoAlpha: 0 })
.to("#close1", { autoAlpha: 0 });
});
return (
<div style={styles.container}>
<div id={"gear"} style={styles.gear} />
<img src={Open} id={"open"} style={styles.eye1} alt="eye" />
<img src={Left1} id={"left1"} style={styles.eye} alt="eye" />
<img src={Left2} id={"left2"} style={styles.eye} alt="eye" />
<img src={Right1} id={"right1"} style={styles.eye} alt="eye" />
<img src={Right2} id={"right2"} style={styles.eye} alt="eye" />
<img src={Close1} id={"close1"} style={styles.eye} alt="eye" />
<img src={Close2} id={"close2"} style={styles.eye} alt="eye" />
<img src={Close3} id={"close3"} style={styles.eye} alt="eye" />
</div>
);
};
const styles = {
container: {
width: 200,
height: 200,
backgroundImage: `url(${Background})`,
},
gear: {
width: 68,
height: 68,
backgroundImage: `url(${Gear})`,
position: "absolute",
top: 120,
left: 15,
},
eye1: {
width: 200,
height: 200,
position: "absolute",
},
eye: {
width: 200,
height: 200,
position: "absolute",
visibility: "hidden",
},
};
export default Animation;
