Jump to content
Search Community

VJ90102

Members

  • Posts

    5

  • Joined

  • Last visited

VJ90102's Achievements

0

Reputation

  1. VJ90102
    Thanks for the quick reply. I've seen that video and it helped me "get off the ground" with GSAP. But let's take it up a level: I have multiple JavaScript files with GSAP timelines that operate on their own html files. I keep things in separate files because I can add new animations without disturbing/breaking what already works. I want to loop these animations in sequence, and allow the viewer to click a button and skip to whichever one they wish to view. Then the sequence continues from what they clicked. In other words, I need some sort of "player" that can sequence and jump between multiple animatins. I've experimented with the following idea so far: I have many pairs of JavaScript GSAP timeline files and html files. The JavaScript files contain closures with GSAP timelines, the html files contain the layout of images and text. I have a JSON file that lists what JavaScript file and html file work together. That JSON file can be read and loaded into an object array called "obMove". Each obMove element contains: .closure == name of the closure and containing file (closure "mymovie" is in file "mymovie.js") .animbody == name of html file .folder == folder path to these files On a webpage, I use jQuery to AJAX load the JavaScript files into the <head> tag and the html file into a <div id='anim_banner'></div>. Here is the loading code: // The JavaScript files accumulate in the <head> but are not loaded more than once if (typeof window[objMove[ndx].closure] == 'undefined') { $('head').append("<scr" + "ipt type='text/javascript' src='" + objMove[ndx].folder + objMove[ndx].closure + ".js'></scr" + "ipt>"); } // The paired html replaces the prior completely... $('#anim_banner').load(objMove[ndx].folder + objMove[ndx].animbody, function(response, status, xhr) { if (xhr.statusText == "OK") { // detect that images are loaded before running closure's onAnimStart() $('#content').waitForImages(function() { window[objMove[ndx].closure].onAnimStart(); // ... start timeline }); } else { // html did not load -- skip to next closure ++ndx; } }); When enclosed in a loop (with some house keeping code) this works to play each animation in sequence. Now I want to add functionality to allow the user to kill a playing timeline and start another. I think this would involve calling a kill() function in the running closure. I'm sure this has all been done before by someone. So, before "reinventing the wheel" I'd like to see what others have done. Can anyone point me to an example?
  2. VJ90102
    Are there any examples / tutorials showing how to handle multiple GSAP animations playing in sequence / repeating? A plus would be to have the user able to click to skip to the animation of their choice. This technique would probably require ajax to load the html and .js files.
  3. VJ90102
    The following snippet uses TimelineMax to show two alternating items: one fades in as the other fades out and then they reverse roles. The timeline is paused until a click event starts things off. In the click handler -- $(".dDot").click(function(){} -- the first item is made visible before playing the timeline. If the duration of the opacity change here is not zero, playing the timeline will fade that item out and never bring it back. Only the other item appears -- blinking all alone. var t_duration = 0.5; var tl = new TimelineMax({repeat:-1, repeatDelay:3, yoyo:true, paused:true, delay:3}); tl.to("#Car_parts > .part_image", t_duration, {opacity:1, ease:Linear.easeNone}) .to("#Car_parts > .part_image2", t_duration, {opacity:0, ease:Linear.easeNone},'-=' + t_duration + '"'); $(".dDot").click(function(){ TweenMax.to("#Car_parts > .part_image2", 0, {opacity:1, ease:Linear.easeNone}); tl.play(); }); You can see this in action here: http://codepen.io/anon/pen/HuCxk There is a 3 second delay on the timeline play(). I don't understand why the initialization of one of objects has such an impact on the timeline.
  4. VJ90102
    If I load the timeline code in the <head> and put play() in the <body>. The code "runs" but doesn't "display" animation on screen. By "display" I mean: no animation happens on the browser screen. By "runs" I mean: if I put a breakpoint on the .play() line in the <body>, I can step into the TweenMax code in the <head> and watch variable like "e", and "this._duration" assume the correct values as I step deeper into the code. I'm used to splitting things this way on the jQuery animate code I've been writing and must do so for compatibility. So why can't timelines be defined in the <head>? I'm assuming there must be a little "trick" I'm missing to make it work. Please see <body> only and split code below (and attached). With all code in the <body> this works no problem: <html> <head> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> </head> <body> <div id="title">This is growing title</div> <script type="text/javascript"> var timeline = new TimelineMax({paused:true}); timeline.to("#title", 2, {color:"#F0F", fontSize:"48px"}); timeline.play(); console.log("yes it ran"); </script> </body> </html> With the timeline in the <head> and play() in the <body> this doesn't do anything on screen but the console.log()string shows in the console, you can step into the timeline code and there is no error break: <html> <head> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script type="text/javascript"> var timeline = new TimelineMax({paused:true}); timeline.to("#title", 2, {color:"#0FF", fontSize:"48px"}); </script> </head> <body> <div id="title">This is growing title</div> <script type="text/javascript"> timeline.play(); console.log("yes it ran"); </script> </body> </html> [sorry I attached both twice, only download the first two!] simplest_timeline.html simplest_timeline_head.html simplest_timeline.html simplest_timeline_head.html
  5. VJ90102

    debugging advice

    VJ90102 posted a topic in GSAP

    [see "Why can't code be in <head>?" thread as the problem has been pinned down to putting the timeline in the <head> and .play() in the <body>] Been using jQuery animation and am new to GSAP. I created a TimelineLite animation on a standalone page. The page includes all the scripts and style resources used by my live website so I could check for conflicts. It ran fine -- animation was mostly opacity changes. I put the script into my test site. [uPDATE: On the test site I use a JS closure to encapsulate the TimelineLIte animation -- this seems to be the problem]. I see the text and image resources but nothing is animated until it hits the onComplete on the last line. That calls a TweenLite.to() outside the TimeLineLite to fade everything out. I stepped through the GSAP code (min version) on the test site and it seems to be running through all the steps in the animation. For instance, in TimelineLite.min.js the value of "this._totalDuration" is the total length of all the durations and delays added up. In the TweenLite.min.js code the value "e.id" takes on the values of each of my selectors as it loops around. Yet the screen shows nothing happening. I'm using this resources. <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script> Any tips on debugging a problem like this [closure]? Is there a line in TweenLite.min.js I can set a breakpoint on and see what is really going on?
×
×
  • Create New...