icekomo

This seems to still effect my projects. When I add the GSDevTools it seems to call all of the onCompletes on load, it also prevents me from using .seek or play("startAtALable"). I wasn't sure if I should have created a new question since this is 2 years old now.

Thank you so much! I was hoping it was something super simple that I was overlooking!

I set up a simple demo that has 3 sections. What I would like is for #section-1 to scroll normal, section-2 to get pinned at the top of the viewport and have #section-3 scroll over #section-2. Sort of a parallax effect, but not pin sections on the page, just the hero image ( section-2 ). Am I setting this up correctly, it seems as though all the demos for parallax have a container set to relative, and all the children ( all sections ) set to absolute, but for my demo I'm only trying to parallax the hero image and the rest of the content would scroll normal. You can see in the demo that section-3 doesn't scroll over top of section-2 it looks as though it falls behind. I think that is due to the fact the the pinning is fixing the element which I know is removing it from the flow of the document. My question would be if there is an easy set up to achieve the effect that I want using ScrollTrigger?

@Jack That is exactly what I was looking for, just wasn't sure how to write it. Thank you so much!

I'm new to ScrollTrigger but I would assume that I am doing this the long way. I actually want 3 different DOM elements to trigger the same timeline animation. The way I am currently doing that is working, I just think there has to be a better / cleaner way. ScrollTrigger.create({ animation: headerColorChange, trigger: "#index-intro", toggleActions: "restart reverse restart reverse", markers: true, //id: "index-intro", start: "top 74", end: "bottom 74" }); ScrollTrigger.create({ animation: headerColorChange, trigger: "#index-brands-container", toggleActions: "restart reverse restart reverse", markers: true, //id: "index-brands-container", start: "top 74", end: "bottom 74" }); ScrollTrigger.create({ animation: headerColorChange, trigger: "#index-weather", toggleActions: "restart reverse restart reverse", markers: true, // id: "index-weather", start: "top 74", end: "bottom 74" });

I have what I feel are 2 kind of basic shapes that I'm trying to morph. But for some reason when I try to morph them, the starting shape becomes this large, very odd shape and tries to morph from that. I have tried a couple of different things. Matching points on both vector shapes. ShapeIndex to try and better align the points, but nothing seems to make a difference. Here are what the shapes look like:

I found this pen which solved my issue. I tried to delete the question but had no luck.

Hello all, I have an SVG that looks like this: <svg id="search" xmlns="http://www.w3.org/2000/svg" viewBox="-150 -5 76 69" height="76" width="400"> <path id="searchCircle" d="M56.5 29c0 14.64-11.86 26.5-26.5 26.5S3.5 43.64 3.5 29 15.36 2.5 30 2.5 56.5 14.36 56.5 29z" fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="10" /> <path id="searchBox" fill="none" stroke="#fff" stroke-width="3.176" stroke-linecap="round" stroke-miterlimit="10" d="M3 2h54v54H3z" /> </svg> And after I SVGMorph the #searchcircle into the #searchBox shape, I would like to animate the width of the search circle, which is what I'm trying to do here. var $circle = $('#searchCircle'); var $box = $('#searchBox'); var tlMain = new TimelineMax(); tlMain.to($circle, 0.25, {morphSVG:$box}) .to($circle, 0.25, {attr:{width:300}}); I can get the morph to happen, but it seems to be ignoring the width property. I have also tried just the normal width: "300px" property as well. Not sure what I'm missing.

This seems like it would be an easy thing to figure out, but I can't seem to find what I'm looking for. I want to animate the width of a div from right to left. It seems that this works left to right by default. TweenMax.from($("#hero-container"),0.5,{width:0}); I tried to change the origin of the div, but that didn't seem to make a difference.

I'm building a off-canvas push menu and everything is working, there are a few aspects I can't seem to figure out. 1. How to disable the scrolling of the content-wrapper. 2. How to only scroll the off canvas menu. Right now it scrolls the height of the website itself. Here is a code pen to show you what issues I'm running into. http://codepen.io/icekomo/pen/LNwEWM Thanks!

Thanks, had no idea I could create a codepen like that. One question I have with the cache function, the x, and y params, don't seem to calculate when the project runs. The example file has an x value of 47.95 and a y of 102. But it doesn't seem to start at a x,y position of 0,0? Does this make sense what I'm asking? I read up on this: http://createjs.com/docs/easeljs/classes/DisplayObject.html#method_cache but it didn't seem to clear up my confussion. Thanks!

Hey Jonathan, I'm building this project out of Flash Pro, which is where my questions is coming from. I'm not sure I can replicate the issue with a codepen, as I'm not able to create movieclips inside the html framework. Does that make sense?

In the example above, it's shown by creating the graphic with javascript, but what about if I was using flash's IDE to create the object (movieclip) and I wanted to change the tint of that. Would I still need to cache the object? I guess that's the only part I'm not 100% sure about. I tried to use this code, but nothing happens: TweenLite.to(instructions.demoColor, 1, {easel:{tint:"#279133", tintAmount:1}});

I'm trying to change the fill color of a movieclip I created using Flash Pro with the canvas tag / Create JS. This is what I'm trying: TweenLite.to(instructions.demoColor, 1, {colorProps:{backgroundColor:"#279133", tintAmount:1}}); TweenLite.to(instructions.demoColor, 1, {colorProps:{backgroundColor:"#279133", tintAmount:1}}); But nothing seems to be working. I saw an older post in the from (2012) that was using : TweenLite.to(circle, 3, {y:150, easel:{tint:"#0000FF", tintAmount:0.5}}); That also doesn't seem to do anything. I don't see any errors so I'm guessing this line is just being ignored. Thanks!

Thanks didn't realize this!

I've been catching back up with Flash Pro and Greensock using the new Canvas and WebGL file formats. One thing I noticed is when I try to use relative numbers with Greensock I get unexpected results. In AS3 I would have use something like this TweenLite.to(mc, 1, {x:"500"}); and the mc would have moved 500px to the right of where it was sitting on the stage. When I use the same piece of code in Flash Pro in JS instead of AS3 TweenLite.to(this.mc, 1, {x:"500"}); The mc seems to move to a location that is far more then 500px and not always in the direction that I thought it would move.. Since I'm using Flash Pro I'm not sure I can recreate this in codepen? Again this might be an issue with CreateJs and not GSAP.

Thanks for the help. I knew it wasn't a GASP issue, but really haven't had much luck in figuring anything out. It's really odd, when I use: this.regX = 0; this.regY = 0; It still uses the center point of the movieclip instead of the top left corner. I'll read up on the links you sent me. Thanks again!

I'm not 100% sure this is the correct place to post this. I have a question about Flash Pro CC 2015 when using the canvas file type. When I create a movieclip and set the registration point to the top left corner and place it on the stage. When I change the properties in the Properties panel and set the x and y values to 0 it moves to the top left corner like it should. But when I set these values using javascript this.mc.x = 0 and this.mc.y = 0; It uses the center point of the movie clip. So the top and left half of my mc are off of the stage. I'm not sure why this is. Does it have something to do with how the DOM reads the js file? I would like to have it when I write that code that it does the same thing as it does on the stage when i use the properties panel Thanks!

Has anyone used Loadermax to preload a starling project? I have used Loadermax in the past, but seem to be stumped on how to get it working for a starling project. Does anyone have any suggestions or some sample code they could should me. I am using Flash Pro 6, if that makes a difference. Thanks!

I wanted to give a quick update, I implemented this into my project last night, and it was actually pretty easy, thanks for the help!

I have an instructions screen that I would like to be able to just flick off the screen. I was thinking about trying to implement the ThrowPropsPlugin into starling, but figured I would ask here first to see if anyone has successfully done this, as I know you can't use MouseEvents with starling, so it would have to be changed to the starling touchEvent. Thanks!

I have this code here, the first queue loads up and i can see the onComplete event fire, but the 2nd queue seems to get hung up on 96% and never reaches 100, which then the onComplete is never called. But the swf is still being loaded into the container. Anyone see or know why that might be? queue.append( new XMLLoader("xml/siteXml.xml", {name:"myXML", estimatedBytes:"17408", onprogress:progressHandler, onComplete:loadXml}) ); //starts the load for the swf file, and adds it to this container queue.append( new SWFLoader("my.swf", {onprogress:progressHandler, estimatedBytes:"2936012", onComplete:completeHandler, container:this}) ); //loads the data queue.load();

I have an idea as to why this might be happening.. in the example the text is populated at build.. but for my example.. im trying to use a container (this) and have the content dynamically added, so I think I would have to use the height of (this) somewhere in this code.....

Hello, I am trying to just take apart one of the demo files you have on the site to better understand how everything works. I got most of it working.. but for some reason my demo will only let me pull down and have it slide back to the stop... it wont allow me to scroll up the list of items. (I thought it had to do with a Y issue, but so far no luck.) Below is the code, that is almost identical to the example...just not sure what is causing it not to scroll up.... again I'm trying to get a better understanding how this all works for future projects: public class NameContainer extends MovieClip { private var t1:uint,t2:uint,y1:Number,y2:Number,yOverlap:Number,yOffset:Number; private var bounds:Rectangle = new Rectangle(0,0,640,825); private var blitMask:BlitMask; public function NameContainer() { blitMask = new BlitMask(this,bounds.x,bounds.y,bounds.width,bounds.height,false); blitMask.update(null, true); blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); blitMask.bitmapMode = false; } function mouseDownHandler(event:MouseEvent):void { TweenLite.killTweensOf(this); y1 = y2 = this.y; yOffset = this.mouseY - this.y; yOverlap = Math.max(0,this.height - bounds.height); t1 = t2 = getTimer(); this.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); this.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function mouseMoveHandler(event:MouseEvent):void { //this.mouseChildren = false; var y:Number = this.mouseY - yOffset; //if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) if (y > bounds.top) { this.y = (y + bounds.top) * 0.5; } else if (y < bounds.top - yOverlap) { this.y = (y + bounds.top - yOverlap) * 0.5; } else { this.y = y; } blitMask.update(); var t:uint = getTimer(); //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second if (t - t2 > 50) { y2 = y1; t2 = t1; y1 = this.y; t1 = t; } event.updateAfterEvent(); } function mouseUpHandler(event:MouseEvent):void { this.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); this.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time:Number = (getTimer() - t2) / 1000; var yVelocity:Number = (this.y - y2) / time; ThrowPropsPlugin.to(this, {throwProps:{y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300}}, onUpdate:blitMask.update, ease:Strong.easeOut}, 10, 0.3, 1); } }

I have been working on some ipad demos lately and have been using some of the throwProps to achieve some of these effects. Something I was wondering, could you control a tween with a mouseEvent or TouchEvent, and when I say control, let's say we were rotating an object and I wanted that object to rotate with the advancement of the mouse/touch Event. I hope that makes sense, basically tween something that is in relation to the event, being either mouse or touch. Thanks for the help