Jump to content
Search Community

Search the Community

Showing results for tags 'resetting timeline'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 2 results

  1. What I am supposed to be doing is to throw the bait, and wait for 3 waves and a fish bites. When the fish bites, the bait, must look as if it was dragged down and then the fisherman gets the bait. However, after getting the bait and starting again, the bait is now gone. All that's left is the bait. PS: When throwing the bait, the bait must come from 200px above. It works on my PC however, in codepen, I don't know why it does not go 200px above. mounted() { this.timeline = gsap.timeline() }, methods() { throwBait(e) { let vue = this; this.animation = this.timeline .fromTo( [this.lure, this.bait], 1.3, { css: { left: e.pageX - 25, // 25: Half of lure's width top: e.pageY - 200, scaleY: 0, scaleX: 0, visibility: "hidden" } }, { ease: "elastic.inOut(1, 0.75)", css: { left: e.pageX - 25, // 25: Half of lure's width top: e.pageY, scaleY: 1, scaleX: 1, visibility: "visible" } }, 0 ) .fromTo( this.wave, 2, { y: "-5", width: "0px", height: "0px", border: "1px solid white", opacity: 1 }, { y: "-=5", ease: "Linear.easeNone", width: "50px", height: "10px", border: ".1px solid white", visibility: "visible", repeat: 2, opacity: 0 }, 1 ) .to( this.lure, 1, { y: "-=5px", ease: "Linear.easeNone", yoyo: true, repeat: 6 }, 0 ) .to( this.lure, 1, { y: 20, ease: "power4.out" }, 6 ) .to( this.lure, 0.5, { y: -100, ease: "power4.in", opacity: 0, scale: 0 }, 6.5 ) .then(x => vue.reset()); }, reset() { this.timeline = gsap.timeline(); this.timeline.time(0); }, }
  2. Hi, I was wondering whether someone might be able to help me?.. I am writing a single page kiosk application which has a full screen menu. i rather liked the example here: https://greensock.com/stagger an have been using it as starting point but I have come across a head scratching issue... I have attached a code pen example https://codepen.io/alifixit/pen/YJPQEe with the basic idea of way i am showing and hiding the pages from a main menu based on the Greensock example. I am not sure i am making a major error with the way i am going about this? The pen is working correctly, my app is even working correctly in my development environment but when i compile it and run it on a different machine there are some strange things happening but only with this animation! I am using electron and webpack, everything works fine on my dev machine and even the compiled version works perfectly on that. But, when i compile it and run it on a different machine, weird things start to happen but only with this animation...obviously the first thing to think is there must be something wrong with electron or webpack but, I have investigated the way wepack is compiling it and that seems ok, i am not packaging the files into an asar at this stage.. i have peppered the code with console logs to try and establish what is going wrong but there are no errors at all in the console and everything seems to be reporting as expected. it's just this animation does some very random things... I have tried it on 4 other machines and they all share this weirdness with this animation. The problems are that the animations do not seem to reset themselves correctly after the first time it is run.. the sizes are incorrect sometimes and occasionally some of the buttons opacity is incorrect. Looking at the inspector on a machine it is not working on in a compiled version, the transformation matrices do not seem to reset to where the should. I don't know why on earth it should be any different between machines but i may be doing something fundamentally wrong with the approach i am taking here as this is my first adventure with greensock so i am probably messing up badly! I know it's a tricky one to help with as the pen works.. but, i guess the main questions are: 1) am i using the timeline correctly by creating a new one each time the function is called or is this likely to cause a problem? i.e function menuEntrance(callback) { var timeline = new TimelineMax(); timeline.set(".btn", { visibility: "visible", y: 0, opacity: 1 }) .staggerFrom(".btn", 2, { scale: 0.5, opacity: 0, delay: 0.5, ease: Elastic.easeOut, force3D: true }, 0.2) .eventCallback("onComplete", function () { if (callback) { callback() } }); } 2) is this the best way to do this? 3) has anyone else experienced any issues like this? are there any reasons why the timeline may stop without completing - the callbacks are fired? UPDATE: So i have tried several different versions of GS and using a CDN in the HTML rather than webpack, stripped the app back to the bare bones and still getting the issues, i have also tried it without a timeline using TweenMax https://codepen.io/alifixit/pen/BqyPJv That doesn't help in the app.. the only thing i can think of as to why it is different and why it works in the pen and dev machines and not the others is that the specs of machines are slightly different? the app is working with base64 images as css backgrounds would this have anything to do with it. I think also i need to reset the css afterwards, i have played with clearProps and resetting various different things but i'm not sure how to do it correctly so it doesn't jump around and ruin the effect? UPDATE: Ok, so i tried changing to <IMG> tags, no improvement... adding scale : 1 to the menuEntrance TweenMax.set means they all appear the same size now, which is great but often some do not appear... Any help or suggestion are very much appreciated!!!!! Many Thanks!
  • Create New...