Jump to content
Search Community

So lost trying to cycle images

micUX test
Moderator Tag

Recommended Posts

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;

 

Edited by micUX
added images hosted online
Link to comment
Share on other sites

Hey micUX and welcome to the GreenSock forums!

 

First off, you don't need to import TweenMax, Linear, or TimelineMax. Just use GSAP 3 formatting, it's better :) 

 

Usually sprite animations like this are done using a single image with the position of the image moved around. For more examples/info see this thread:

 

You can do it with a bunch of images but it's more complicated because you have to worry about all of the images loading and showing/hiding them. It's a lot simpler if you just move the background position around :) 

  • Like 1
Link to comment
Share on other sites

Thanks for the quick reply.

 

I originally tried just with one div. I tried to cycle through different backgroundImages in the styles.eye object. But couldn't change it.

 

Have now added eye images so you can see what i'm working with.

 

So your sprite idea is a giant image with different frames, I just move the visible part of the image around? Never thought of that...

Link to comment
Share on other sites

10 minutes ago, micUX said:

I tried to cycle through different backgroundImages in the styles.eye object

That's the worst of both worlds. Don't do that :) 

 

10 minutes ago, micUX said:

So your sprite idea is a giant image with different frames, I just move the visible part of the image around? Never thought of that...

Yes, that's how most sprites are done like I said.

 

10 minutes ago, micUX said:

only other problem is i have a rotating gear cog that is behind the eye. could i have a spritesheet with no background between the different images?

I'm not following you here. Maybe a picture or diagram would help?

Link to comment
Share on other sites

I've exported the different eyes as svgs but they're all quite different, some use defs, some don't... Can I not just import them all individually and switch the component being displayed using a gsap timeline?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...