Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

5 Newbie

About icekomo

  • Rank
    Advanced Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. how can I change color with GSAP at Animate CC...?
    I try so many different things without success

            //TweenLite.to(MC, 3, { easel:{tint:"#0000FF", tintAmount:0.5}, ease:Elastic.easeOut});
            //TweenLite.to(MC, 1, {colorProps:{backgroundColor:"#279133", tintAmount:1}});
            //TweenLite.to(MC, 1, {easel:{tint:"#0000FF", tintAmount:0.5}});
            //TweenLite.to(MC, 3, {easel:{colorFilter:{redMultiplier:0.5, blueMultiplier:0.8, greenOffset:100}}});
            //TweenLite.to(MC, 3, { easel:{tint:"#0000FF", tintAmount:0.5}, ease:Elastic.easeOut});
            //TweenLite.to(MC, 1, {easel:{tint:"#279133", tintAmount:1}});

  2. Thank you so much! I was hoping it was something super simple that I was overlooking!
  3. 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 s
  4. @Jack That is exactly what I was looking for, just wasn't sure how to write it. Thank you so much!
  5. 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",
  6. 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:
  7. I found this pen which solved my issue. I tried to delete the question but had no luck.
  8. 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 #s
  9. 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.
  10. 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!
  11. 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!
  12. 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?
  13. 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}});
  14. 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 b