Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
micUX

So lost trying to cycle images

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

I don't know what your eyes look like, but depending on what you want it to look like another option would be to just create it in SVG, Canvas, or in HTML + CSS and move things around as needed.

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

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?

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

sure please see here. the cog is infinitely rotating  behind the animated eye, but on top of the static background.

 

2074703709_Screenshot2020-06-18at17_52_08.png.35e4c097c1584dc9e2efeaaecca7553a.png

Link to comment
Share on other sites

To me that sort of illustration would be best to do in SVG completely. But yes, the cog can be separate from the eye.

Link to comment
Share on other sites

Thanks, so transforming the svg path between tweens if its svg?

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

in the end i followed your first advice and made a sprite, exactly what I wanted thanks! excellent for my needs. appreciate the help

Link to comment
Share on other sites

Happy to help. Glad you got it sorted.

 

If you're going to use SVG I'd recommend exporting the entire thing as a single SVG. Then you can animate the different components of it.

  • Like 1
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.
×