[Use splittext to stretch out letters from a pile]

Thanks Mikel,

I'm trying to first start from all the letters on top of each other in Z space, and then stretch them out with a bounce. Using margin-right I'm able to get some of them on top of each other in Z space,  but some of them are now also above and below in y space (on 3 lines) when i use margin-right with the negative number. why is that happening and how to stop it, so that it's just one line?  Also I don't seem to be able to get a nice bounce to happen at the end when I stretch them out again, or to stop them going on two or three lines for a moment or two... Any ideas?

See the Pen zYYyNNo by LeafySeadragon (@LeafySeadragon) on CodePen

 . - 

[Use splittext to stretch out letters from a pile]

I'm trying to start with a pile of all the letters up on top of one another on the right, and then stretch them out from right to left.  
 

If one could animate letter-spacing smoothly for instance, it would be something like letter-spacing 0 to letter-spacing 2 stretching from right to left, however I've not been able to get smooth animation using css letter-spacing. So I'm trying to do something similar using splittext. However I don't seem to be able to first pile up the letters on top of one another, and then stretch them out. It would make sense to use the set command to stack the letters. Hmmm... maybe I need a forEach loop with an incrementing distance?  Any ideas gratefully appreciated!

 

See the Pen RwwEbZV by LeafySeadragon (@LeafySeadragon) on CodePen

[GSAP with Animate CC 2019 - scale and scaleX/scaleY not working?]

Thank you. Excellent answer. There's a reason for the images / pngs / mc's being the way they are with all the empty space.  I just changed the registration point and now they're working fine. Much appreciated.

[GSAP with Animate CC 2019 - scale and scaleX/scaleY not working?]

Thanks so much @Carl and @ZachSaucier  Here's the file, you can see it's animating alpha, but not scale: http://deepplanet.com/test.zip 

[GSAP with Animate CC 2019 - scale and scaleX/scaleY not working?]

I'm unable to get any scaling to happen using GSAP in an html5 environment in Animate CC 2019. 

I'm trying the following:  TweenMax.to(this.s1, 2.5, {delay: 0.25, scale:2, alpha:1});
Alpha works correctly, but not scale, it does not scale.

Also scaleX and scale Y is not working, I tried the following:  TweenMax.to(this.s1, 2.5, {delay: 0.25, scaleX:2, scaleY:2, alpha:1});  Again the alpha works, but the element does not scale. 

How do I get GSAP to scale movieclips in Animate CC 2019? 
 

Thanks.

[Selectors issue.]

Perfect, thanks so much.

[Selectors issue.]

Simple problem with my selectors, for some reason my very simple code is not working  What am I doing wrong?

 
JS:

var m = document.querySelector("#m"); 
TweenLite.to("m", 3.5, {x:150, y:200, rotation:30, alpha:0.3});

CSS:

#m {
  background-image: url("http://i.imgur.com/kBaLqYH.png");
  width: 150px;
  height: 150px;
}

HTML: 

​<div id="m"></div>

Here's a codepen: 

 

See the Pen gpdQbG by LeafySeadragon (@LeafySeadragon) on CodePen

[HTML5 Banners w/GSAP & jQuery: best practices? file sizes?]

@Jonathan, can you clarify implementation of using document.querySelectorAll() ?

You suggest to use the following instead of jquery selectors:

var elements = document.querySelectorAll(selectors);
// or use
var element = document.querySelector(selector);

Then do you just need to do the following? Is this it?

//select a single element by it's ID
TweenLite.to("#elementId", time, vars);

//select one or more elements by class name
TweenLite.to(".elementClass", time, vars);

Also doing things this way, how would you suggest preloading image assets (other than using sprite sheet)?

[Running multiple timelines at the same time.]

Great! Can you point me to a resource on how to run multiple timelines at the same time?

Basically, in pixi.js, I want to run one timeline tween set on a background element and a 2nd timeline set on foreground elements. The tweens will be dictated by the y position of a pixi.Point driven by the scrolling mouse or arrow keys.

[Can I tie a tween to a changing Y position?]

.

[Running multiple timelines at the same time.]

Is it possible to run multiple timelines at the same time?

[Can I tie a tween to a changing Y position?]

Thank you both! Super helpful. I'm wanting to implement this in Pixi.js. I love Greensock so it's a natural way for me to go.

Carl ScrollMagic looks amazing!  What do you think it's benefits are over skrollr.js?

[Can I tie a tween to a changing Y position?]

Instead of using a time element to run the tween for x seconds, and instead of saying if y = (a number) run tween, I want the tween to be completely tied to the y mouse movement so when I scroll down or up, I can essentially 'scroll' the tween. Basically the tween would be updating every 24 sec or whatever, and running in sync with the mouse movement. so that the tween moves with the y of the mousescroll. Let say I have something like: 

 

TweenLite.to(element, 2, {scale:1.5, x:10, y:0, alpha:0});

 

I could say if y == 400 run tween but it would just execute and be finished. But I want this tween to run y 400 to 450, so not use a time element (currently 2sec), but two y positions instead. So then if I moved the y with my mousescroll to 410, 20% of the the tween would have run in sync with my mouse scroll, if I moved the mouse back to 400, the tween would reverse back to the beginning in sync with the mouse movement, if I moved it to 403, a tiny amount of the tween would happen, etc, etc so the tween events always stay in sync with the mouse scroll y. Does this make sense? How would I do this?  Can I do this with greensock?

 

[flv seekBar and duration]

I was playing around with using LoaderMax to load some flv's, I ran into problems with the seek bar and showing current time / total duration.

 

If someone can point me to a great reference in doing this when using LoaderMax to load the video that would be awesome.

 

Thanks

[Loading Progressive Video]

Hi there, I'm exploring LoaderMax for loading flv's.

 

I am using the onComplete command. Are videos loaded with LoaderMax downloading progressively? ( ie playing before they have finished?) or are they downloading completely (due to the onComplete command) before they play?

 

If they are downloading completely, how do I get it to download progressively and start playing after only some of the video is downloaded?

 

And how do I change the amount needed to buffer before it plays? If indeed I actually need to do that?

 

Does putting a buffer command in the loader string mean that the onComplete now refers to not the completion of the video completely downloading, but completion of the loader string, which includes a buffer command, and theirfore the download is now progressive as its acting on the buffer command?

[paths to container]

Hey my apologies, for the complicated fla, and also for not thinking about the issues surrounding uploading the GreenSock classes.

 

I stripped out all the other stuff, here is the fla http://deepplanet.com/test.zip LoaderMc is actually inside the 'clip' MC - Basically I am trying to load this image on the bottom stack of an MC - hence I've put the MC 'LoaderMc' inside the 'clip' MC, and that is what needs to be the container for the image for the rest of the application to function correctly.

 

thanks so much for your willingness to take a look!

[paths to container]

No its not the alpha, thats taken care of later in the code. As i mentioned this was working fine until I stuck 'LoaderMc' on the timeline of 'clip' - but I really need it like that, so that I can make sure the image loads at the lowest level of the clip MC.

 

Here's the file: REMOVED Thanks for your willingness to take a look!

[paths to container]

the above might be confusing. Simply I have an MC inside an MC (the 2nd MC on the timeline of the first MC), I'm loading the image into the MC within the MC, and the outer MC is dynamically added to the stage with as3.

[paths to container]

When I was dynamically adding the container called 'LoaderMc' inside an MC called 'clip' (also dynamically loading) the following worked just fine. Now I am still adding the MC 'clip' dynamically, but the LoaderMc is now inside the MC 'clip' already (on the timeline) - basically my image is not loading boo. Not sure what to do, how to get this working. I tried the following:

 

queue.append( new ImageLoader(myUrl, {name:"photo1", estimatedBytes:2400, container:LoaderMc, alpha:0, width:520, height:390}) );

AND

queue.append( new ImageLoader(myUrl, {name:"photo1", estimatedBytes:2400, container:clip.LoaderMc, alpha:0, width:520, height:390}) );

 

Neither works. I'm not using instance names, the MC LoaderMc has the class name LoaderMc - what am I doing wrong?

[Image Loader with variable as URL]

Using image loader with a dynamic url, how do I use a variable as the url?

 

This is without the var

 

//create a LoaderMax named "mainQueue" and set up onProgress, onComplete and onError listeners
var queue:LoaderMax = new LoaderMax({name:"mainQueue", onProgress:progressHandler, onComplete:completeHandler, onError:errorHandler});
 
//append several loaders
queue.append( new ImageLoader("images/1286579991.jpg", {name:"photo1", estimatedBytes:2400, container:LoaderMc, alpha:0, width:520, height:390}) );

 

I tried this, but it did not work yet.

 

var myUrlbase = "/images/";
var myImgLink = "1286579991.jpg";
var myUrl = myUrlbase+myImgLink;
trace(myUrl);

//create a LoaderMax named "mainQueue" and set up onProgress, onComplete and onError listeners
var queue:LoaderMax = new LoaderMax({name:"mainQueue", onProgress:progressHandler, onComplete:completeHandler, onError:errorHandler});
 
//append several loaders
queue.append( new ImageLoader(myUrl, {name:"photo1", estimatedBytes:2400, container:LoaderMc, alpha:0, width:520, height:390}) );

 

[structure - talking between parent + child]

Ok I got it, that looks like it was a part of the problem, the other part was that I had autoPlay:false set on the child swf being loaded... lol.

 

THANK YOU!

 

man this AS3... such a damn simple thing to accomplish took so long to figure out.

 

Anyhow, I very much appreciate your help.

[structure - talking between parent + child]

ok, in the child swf when I do

 trace(this.parent);

I get the result: [object Loader] When I do

 trace(this.parent.parent);

I get the result: null -

 

If this is so, then what's the correct path to a function in the parent?

[structure - talking between parent + child]

I think the jump from AS2 to AS3 is massive. I've been able to accomplish some really cool things in AS3, but all this good object-oriented encapsulation practices stuff is just totally alien concepts. lol

[structure - talking between parent + child]

Thanks greensock, though honestly that actually makes it seem even more complicated to me. Is not getting into custom event classes extending the event class more complicated than what I'm suggesting? All that stuff is totally confusing. All I want to do is to trigger a function thats in the parent swf from the child swf. The function works fine when called inside the parent swf, but when called from the child swf I still can't get it to work. I get the error: TypeError: Error #1009: Cannot access a property or method of a null object reference.

at testload_02_fla::MainTimeline/frame1()

 

I'm using the following code in the child swf

 MovieClip(this.parent.parent).doSomething();

 

And in the parent swf the code is as follows:

import com.greensock.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.display.*;

var queue:LoaderMax=new LoaderMax({name:"mainQueue",onProgress:progressHandler,onComplete:completeHandler,onError:errorHandler});
queue.append( new SWFLoader("testload_02.swf", {name:"childClip", estimatedBytes:3000, container:this, x:0, autoPlay:false}) );
 
//start loading
queue.load();


function progressHandler(event:LoaderEvent):void {
trace("progress: " + event.target.progress);
}

function completeHandler(event:LoaderEvent):void {
trace(event.target + " is complete!");
}
 ;
function errorHandler(event:LoaderEvent):void {
    ;
trace("error occured with " + event.target + ": " + event.text);
}


function doSomething() {
queue.unload();
trace("calling a function from the main timeline");
var queue2:LoaderMax=new LoaderMax({name:"mainQueue1",onProgress:progressHandler,onComplete:completeHandler,onError:errorHandler});
queue2.append( new SWFLoader("testload_03.swf", {name:"childClip1", estimatedBytes:3000, container:this, x:0, autoPlay:false}) );
//start loading
queue2.load();
}

 

What could possibly be the problem here? why is flash reading the code in the child swf as a null object reference?

[structure - talking between parent + child]

I'm playing around with this doing tests etc, its just the call back from the loaded swf to the function in the pre existing swf thats the problem.

 

MovieClip(this.parent).doSomething();

TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::Loader@458780e1 to flash.display.MovieClip.
at testload_02_fla::MainTimeline/frame1()

 

My actual function in the pre existing swf that unloads the old swf and loads a new swf works fine.