micUX Posted June 18, 2020 Share Posted June 18, 2020 (edited) 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 June 18, 2020 by micUX added images hosted online Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 18, 2020 Share Posted June 18, 2020 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 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 18, 2020 Share Posted June 18, 2020 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 More sharing options...
micUX Posted June 18, 2020 Author Share Posted June 18, 2020 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 More sharing options...
micUX Posted June 18, 2020 Author Share Posted June 18, 2020 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 More sharing options...
ZachSaucier Posted June 18, 2020 Share Posted June 18, 2020 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 More sharing options...
micUX Posted June 18, 2020 Author Share Posted June 18, 2020 sure please see here. the cog is infinitely rotating behind the animated eye, but on top of the static background. Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 18, 2020 Share Posted June 18, 2020 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 More sharing options...
micUX Posted June 19, 2020 Author Share Posted June 19, 2020 Thanks, so transforming the svg path between tweens if its svg? Link to comment Share on other sites More sharing options...
micUX Posted June 19, 2020 Author Share Posted June 19, 2020 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 More sharing options...
micUX Posted June 19, 2020 Author Share Posted June 19, 2020 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 More sharing options...
ZachSaucier Posted June 19, 2020 Share Posted June 19, 2020 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now