Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Posts posted by mrkos67

  1. roger that. I had ideas similar to your points #1 and #2 about self-managing the active tweens/objects, but didn't know if there was a built in utility function already (that wasn't too inefficient).


    Thanks for the help all, this'll get me started, and if i get something working, i'll post a quick pen. 

    • Like 1
  2. In Flash/AS3, I remember being able to add a label at a specific time beyond the last animation, and it would extend the overall timeline's duration to that label. I thought this was working in JS, but after closer inspection, it wasn't. tl.set({},{},time) worked!


    For those wondering why this might be needed, here's my use case. I'm syncing up some animations to a video. The GSAP timeline needs to be as long as the video duration even though the animations might not last until then. When I seek/play/pause the video, the timeline is seeked/played/paused accordingly. I was running into issues when seeking to a part in the video that was beyond the timeline's duration (before this fix).

  3. HOLY **** I FOUND IT!


    It had to do with that group being hidden before the tween was called to animate it when navigating linearly through the demo (the PBP pump wasn't visible on the first screen of each section, but when navigating directly to that screen, I wasn't automatically hiding it). The transformOrigin was getting set to the SVG, not the group (since the group didn't have height/width). I changed my .hidden class to "opacity:0" instead of "display:none" and voila!

    • Like 2
  4. that's the thing, though: i'm not doing anything different for each pump group. all the screens use the exact same SVG code for the different groups and sections within (minus a few groups for the differences between the different screens). I've added the same class to each of the groups in the SVG code so that I can call the TweenMax call, once, on that class (which targets all of them). there's no x/y on any of the groups in the code, so it's not like some are getting repositioned before the JS code is called on it. Even when I take the transformOrigin off the TweenMax code, the pump groups still behave inconsistently.


    If each pump group would act consistently on the same screen (PBP, Replacement, Effluent, etc), and each of the same pump groups between SVGs on the different screens (whether jumping directly, or progressing linearly through the demo) would be consistent, this wouldn't be such a head scratcher. 


    As it stands now, though, it's inconsistent behavior in only one browser which makes me think it's a bug in the browser and not necessarily my code. Hmm.

  5. 1. I went super basic in Codepen to get something to show; I haven't really played with it much since I'm not sure how much budget I have with the client.

    2. Nope, no "display:flex;" anywhere.


    I'll see what my client says about whether I have the time/budget to track this down. Just figured I'd post here and see if anybody has run into something like this before.

  6. Here's a weird one. 




    Open this link in Firefox, and navigate linearly (clicking the arrows on the right) through this demo. the first screen after the intro is the "full flow" and the pumps spin as they should, specifically the PBP Pump (lower right). Click the right arrow a few times till you see the "Using PBP with SCUF" screen — the PBP pump doesn't spin around the set transformOrigin (it takes a bigger radius around which it's spinning). 


    Now, refresh that link, and using the hamburger menu icon in the top right, jump directly to the "Using PBP with SCUF" screen. The PBP Pump *should* be spinning at the correct transformOrigin — at least it does for me when I've tested. 


    This happens on several of the other screens as well — the PBP pump on most of the "PBP ..." screens and on one of the screens, another pump does it as well (with a bigger radius and a different origin). Again, when refreshing and jumping directly to each of these screens, they seem to spin correctly.


    The code for the pumps on each screen of my demo are all the exact same: some work in Firefox — the "Full Flow Path" seems to always show the spinning pumps, specifically the PBP pump, correctly whether navigating linearly or jumping to that screen from the menu. Not sure why this works, and others don't.


    I've attached a codepen of the basic SVG and JS code, but it seems to always work there. 

    I'm clueless. Is this a bug in Firefox? (Chrome and Safari on Mac function perfectly)

    See the Pen BWWaEj by anon (@anon) on CodePen

  7. I've been tasked with converting a Flash demo to HTML5. I've screen-capped the old animation here. In Flash, I can make a MovieClip follow a path, drawn using the IDE. Not quite as easy in HTML5. Would I use bezier paths for that? for each sprite on there? Is there a way to make a sprite follow an SVG path?

  8. Okay, I figured it out. My timeline didn't actually have a duration. I thought by setting a label at a specific time in the timeline, it would give that timeline a duration. So I had to put in an empty function to actually give it a duration. All is good. Thanks for your help!


    For good reason, the browser doesn't allow the iframe's content to reach up into the parent and mess with it via JS. 


    It actually does, if Page A's iframe has the appropriate sandbox values (http://www.w3schools.com/tags/att_iframe_sandbox.asp), or in my case, I've left off the sandbox attribute, allowing Page B to do anything it wants inside of Page A.


    I've figured out that if page B has included the GSAP libs, parent.TweenMax works on its own, cuz parent is equal to the current window. When Page A has Page B inclded in an iframe, Page B's calls to parent.TweenMax correctly calls Page A's instances of the GSAP libs, so object types are retained between the pages. The only problem is if Page A doesn't include the GSAP's libs, which I've got a check for that. 


    It's not elegant, but it works. So all is good, at least as how I need things to be. 

    • Like 1
  10. I figured out some more... (for reference, page A contains the iframe which loads in page B. )


    It's an issue with page B loading up a new instance of the GS libraries, and those aren't the same as page A's GS libraries. When page B creates a timeline based on parent.TimelineMax (page A's), it works as it should. 


    I'm assuming each import of the GS libraries are sandboxed in some way? Is there a way to reconcile multiple instances of GS library imports?

  11. the try/catch block was throwing an error on the line: _timeline.add( banner.timeline.play(), t );


    the error is: "Cannot add [object Object] into the timeline; it is not a tween, timeline, function, or string."


    So it seems the return value of banner.timeline isn't coming back as a readable TimelineMax instance (which might be because of the iframe?). How do I make sure it's a valid timeline instance? Or is there a way to clone based on a timeline/object?

  12. I've created a modular media player, where add-ons and modules are created and instantiated at run-time. One of these modules is a BannerBar which creates and loads animated banners into their own separate iframes. Each banner has a public access to a timeline variable, which is paused by default. Everything is good here, banners get loaded, are displayed at the correct times (by controlling the display [block/none] of the iframe itself). 

    Now, in the BannerBar file, I'm adding the timelines of each banner onto the BannerBar's timeline; however, the banners' timelines don't follow the playback of the BannerBar's timeline playback when I unpause them on add. This is the code for looping through my data file, retrieving banner info, loading them into a templatized iframe code, initing once loaded, and adding timelines to the BannerBar's timeline:

    // load/init banners into DOM
    var changeBannerTime = _data.times.start;
    for( var i = 0; i < _data.banners.length; i++ )
    	var b = _data.banners[i];
    	// validate id, src, and duplicate banner object
    	if( b.id && b.src && _dctBanners[b.id] == null )
    		// data validation
    		b.time = parseFloat( b.time ) || 4;
    		b.href = b.href || "#";
    		b.data = b.data || {};
    		// create iframe, attach to DOM
    		var htmlIFrame = _tplIFrame;
    		var $iframe = $( htmlIFrame );
    		$iframe.attr( "id", "bannerbar-id-" + b.id );
    		_$slider.append( $iframe );
    		// banner management
    		_dctBanners[b.id] = b;
    		_dctIFrames[b.id] = $iframe;
    		hideBanner( b.id );
    		// load iframe, wait for load, call init
    		$iframe.attr( "src", b.src ).on( "load", ( function( b, t ) { 
    			console.log( "bannerBar :: onLoad() - id:" + b.id );
    			return( function() {
    				try { 
    					var banner = this.contentWindow.banner;
    					// init the banner
    					banner.init( b.data ); 
    					console.log( "  id:" + b.id + " timeline added at:" + t );
    					// add banner timeline to main timeline for playback control
    					_timeline.add( banner.timeline.play(), t );
    				catch( e ) { }
    		})( b, changeBannerTime ) );
    		// set up hide/show times
    		_timeline.addLabel( b.id, changeBannerTime-.01 );
    		_timeline.addCallback( showBanner, changeBannerTime, [ b.id ] );
    		_timeline.addCallback( hideBanner, changeBannerTime + b.time, [ b.id ] );
    		changeBannerTime += b.time;
    All of the banners' timelines start playing immediately even though the BannerBar's timeline is paused. Also, when I pause/play or seek the BannerBar's timeline, the banners timelines don't play pause/play/seek as they should.
    I've tried adding the paused banner timelines to the BannerBar's timeline, but they remain paused, as expected.
    You can see it in action here: http://dev.option5.net/CNCT/CNCT15001/video.html
    The BannerBar slides in at :02s, but the first banner is already playing (it should start at :02s too, presumably). The second banner has some animation which should start at :14s when it appears, but it's already done playing by the time it appears.


  13. Thanks, Carl.


    I was dumbfounded by what svgomg actually did. I went through line by line with my code, copy and pasting over the svgomg code, and it seems the only difference was a double space between points. That was all it was — like I said, I knew it was going to be something stupid. too weird. But thanks for figuring that out!


    and like PointC, now I know about svgomg. That will be a very useful tool in the future. 

    • Like 2