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!