Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

micUX's Achievements



  1. Ah okay, thanks, at least its not my js
  2. Hi guys, I hope you don't mind me using CodeSandbox? It's just easier to host images. Please see link below: https://codesandbox.io/s/freebie-added-brakes-d72k2?file=/index.html I've been away from Greensock for a good while. Used it quite a lot a couple of years ago for timelines, really found it useful for interactive animations for some e-learning content I was working on. I'm trying to design a basic transition for a fade in/out notification. Eventually plan on a few things happening, but for the time being I'm failing at the first hurdle. Why won't my timeline start?
  3. in the end i followed your first advice and made a sprite, exactly what I wanted thanks! excellent for my needs. appreciate the help
  4. 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?
  5. Thanks, so transforming the svg path between tweens if its svg?
  6. sure please see here. the cog is infinitely rotating behind the animated eye, but on top of the static background.
  7. 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?
  8. 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...
  9. 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;