Jump to content
Search Community

Search the Community

Showing results for tags 'asynchronous'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 3 results

  1. hi, Is there a way in GSAP to properly override the delay? I am looking for a valid way when I create a tween with the same object reference in memory, it properly overrides the animation and its properties. However, I would like the animation to have a starting delay, and this starting delay does not seem to be supported when overriding another tween. Therefore, I am looking for a behavior that would properly handle the delay when overriding a tween. here test code you can past in your console: setTimeout( async () => { console.log( '💚' ); const obj = { x:0 }; gsap.to( obj, { x:1, onStart:()=>console.log( '💨tl1', obj.x ), onUpdate:()=>console.log( 'upd-1', obj.x, ), delay:1 }); // how overide this tween with new delay ? gsap.to( obj, { x:2, onStart:()=>console.log( '💨tl2', obj.x ), onUpdate:()=>console.log( 'upd-2', obj.x ), delay:5 }); }, 1000 ); In the console log, I would expect the following result: 💨tl1 0 VM33167:4 upd-1 0.16821 VM33167:5 💨tl2 0.16821 VM33167:5 upd-2 0.476336 VM33167:5 upd-2 0.876304 VM33167:5 upd-2 1.304408 VM33167:5 upd-2 1.507727 VM33167:5 upd-2 1.729329 VM33167:5 upd-2 1.83238 VM33167:5 upd-2 1.921491 VM33167:5 upd-2 1.959754 VM33167:5 upd-2 1.987915 VM33167:5 upd-2 1.996086 VM33167:5 upd-2 1.999553 VM33167:5 upd-2 1.999989 VM33167:5 upd-2 2 instead i get this 💨tl1 0 VM33244:4 upd-1 0.039404 VM33244:4 upd-1 0.283607 VM33244:4 upd-1 0.53675 VM33244:4 upd-1 0.675071 VM33244:4 upd-1 0.810253 VM33244:4 upd-1 0.882882 VM33244:4 upd-1 0.942352 VM33244:4 upd-1 0.968883 VM33244:4 upd-1 0.988843 VM33244:4 upd-1 0.995772 VM33244:4 upd-1 0.999423 VM33244:4 upd-1 0.999948 VM33244:4 upd-1 1 VM33244:5 💨tl2 1 VM33244:5 upd-2 1.039404 VM33244:5 upd-2 1.283607 VM33244:5 upd-2 1.547878 VM33244:5 upd-2 1.675071 VM33244:5 upd-2 1.821494 VM33244:5 upd-2 1.882882 VM33244:5 upd-2 1.942352 VM33244:5 upd-2 1.968883 VM33244:5 upd-2 1.989514 VM33244:5 upd-2 1.995772 VM33244:5 upd-2 1.999423 VM33244:5 upd-2 1.999948 VM33244:5 upd-2 2 thanks
  2. Hello, I'm having trouble trying to debug what is going wrong with my animations. I was able to use mock data and get the desired effect of having my animation stagger through my array of card objects. However, once I started using real data my animations will no longer trigger. Now there are a few strange observations I made: 1. My data is making it into the gsap related mapping func (I have a console log that is proving the cards do exist inside the map) 2. The callback at the very end of my animation is still firing and updating state. So, in short, despite it working with mock data when I switched over to 'live-data' it no longer even triggers the animation despite the `console.log` showing that there is indeed data to map over and the fact that the callback at the end of the animation still triggers... Any ideas? Here is the component: import React, { Component } from "react"; import { connect } from "react-redux"; import "./PlayerHand.scss"; import TreasureCard from "../TreasureCard/TreasureCard"; import ActionCard from "../ActionCard/ActionCard"; import Card from "../Card/Card"; import { TimelineMax } from "gsap"; import { gsapCardsCycleIn } from "../../greenSock/animations"; import { mockPlayerData } from "../../mockData"; export class PlayerHand extends Component { constructor(props) { super(props); this.cards = []; this.tl = new TimelineMax({ paused: true }); this.state = { renderHand: false }; } componentDidMount = () => { gsapCardsCycleIn(this.tl, this.cards, this.showUserHand); }; // componentDidUpdate(prevProps, prevState) { // if (prevProps.playerHand !== this.props.playerHand) this.tl.restart(); // } showUserHand = () => { this.setState({ renderHand: true }); }; render() { // this.tl // .kill() // .clear() // .pause(0); return ( <React.Fragment> <section className='hand-animations'> {this.props.playerHand && this.props.playerHand.map((card, i) => { // this console.log is logging the relevant data, but for some reason nothing is animating console.log(card); return ( <div className='animated-card' key={i} ref={div => (this.cards[i] = div)}> <p>{card.name}</p> </div> ); })} </section> <button onClick={() => this.tl.play()}>Start</button> <button onClick={() => this.tl.reverse()}>Reverse</button> <button onClick={() => this.tl.restart()}>Restart</button> <section className='PlayerHand' style={ this.state.renderHand ? { transform: "translateY(50%)" } : { transform: "translateY(100%)" } } > {this.state.renderHand && this.props.playerHand.map(card => { if (card.category[0] === "Money") { return <TreasureCard card={card} key={card.id} />; } if (card.category[0] === "Action") { return <ActionCard card={card} key={card.id} />; } if (card.category[0] === "Victory") { return ( <Card name={card.name} desc={card.desc} category={card.category} image={card.image} cost={card.cost} id={card.id} key={card.id} /> ); } })} </section> </React.Fragment> ); } } export const mapStateToProps = state => ({ playerHand: state.playerHand }); export default connect(mapStateToProps)(PlayerHand); Here is the GSAP animation I built and imported import { Back } from "gsap"; export const gsapCardsCycleIn = (timeline, dataArray, onComplete) => { timeline .to( dataArray, 0.8, { scale: 1.09, opacity: 1, ease: Back.easeInOut.config(10) }, 0.3 ) .staggerTo( dataArray, 0.4, { left: "45vw", bottom: "25vh", scale: 1.4, cycle: { rotation: i => Math.random() * ((i + 3) * 2), ease: i => Back.easeOut.config((i + 1) * 0.5) } }, 1.2 ) .staggerTo( dataArray, 0.5, { left: "45vw", bottom: "5vh", rotation: 0, scale: 1 }, 0.2 ) .to(dataArray, 0.7, { opacity: 0, y: "100vh", ease: Back.easeInOut.config(1.2), delay: 0.4 }) .to(dataArray, 0, { onComplete: onComplete, delay: 1 }); };
  3. KerryRuddock

    .kill

    Hi guys, Several months ago I was working on a reaction tester where I used GSAP timeline to aid with animating balls around a screen. I was happy with my experience using GSAP, but left an issue on the table that I have revisited in the past week but have had problems diagnosing exactly where the problem lays.... In my codepen, I have a function called movekill() that is called when the animation completes by hitting a border. // movekill() is initiated by an onComplete callback method, a property of the GreenSock Animation Platform. // We use GSAP timelinelite's .to method to 'tween' the x,y and rotation properties and upon animation completion // this function is called to resupply the animation aka. 'tween' with new x,y, and rotation properties. function moveKill(tween, obj, border) { if ( tween.target[0]._gsTransform.x == undefined || tween.target[0]._gsTransform.y == undefined ) { alert ("undefined _gsTransform.x or _gsTransform.y") } // Get tween.target (shape) current position obj.posX = Math.floor(tween.target[0]._gsTransform.x); obj.posY = Math.floor(tween.target[0]._gsTransform.y); console.log("id " + obj.id + " pX " + obj.posX + " pY " + obj.posY + " " + ((obj.stageRight === true) ? "R" : "L") + " " + ((obj.stageTop === true) ? "T" : "B") + " CurX " + Math.floor(obj.posX) + " CurY " + Math.floor(obj.posY) + " wall " + border ); var i = obj.index, wall=""; // Check if our shape hit a corner if (( obj.posX === 0 && obj.posY === 0 ) || ( obj.posX === 0 && obj.posY === obj.borderY ) || ( obj.posX === obj.borderX && obj.posY === 0 ) || ( obj.posX === obj.borderX && obj.posY === obj.borderY )) { // debugger; } if ( obj.posX <= 0){ obj.toX = obj.borderX; obj.stageRight = true; wall="L"; } else if ( obj.posX >= obj.borderX){ obj.toX = 0; obj.stageRight = false; wall="R"; } if ( obj.posY <= 0 ) { obj.toY = obj.borderY; obj.stageTop = false; wall="T"; } else if ( obj.posY >= obj.borderY ){ obj.toY = 0; obj.stageTop = true; wall="B"; } if ( wall === "" ) { console.log ("houston we have a problem"); } t2[i].kill(null, obj.id); // $("h1").text("x: " + obj.posX + " y: " + obj.posY); moveTarget(obj, myConst.SET_SPEED_FALSE); } Using chrome developer tools I placed a js breakpoint at line 269, to track an intermittent glitch where sometimes a ball hits a corner and then 1 or 2 things happens: the ball appears in 2 places at once on the screen, or the ball freezes in the corner. I have stepped through my javascript code from the breakpoint until the re-entry of a new timeline and the glitch appears to be occuring within the GSAP timeline method I am not sure where to go from here. I have attached a chrome developer tool profile that shows function execution times. I don't see anything obvious. The code appears to be running correctly 99% of the time, but that 1% is the part I need help with and would appreciate whatever guidance you can offer. Sorry I trimmed the javascript length in the codepen as best as I could. The moveTarget() and moveKill() functions are where I use the GSAP timeline.to method and moveKill() is where I kill the tween and resupply moveTarget's obj with a new X and Y position for the ball that has hit the border.
×
×
  • Create New...