Jump to content

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

celli last won the day on January 3 2016

celli had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by celli

  1. Thanks PointC! Here is a codePen: https://codepen.io/celli/pen/MMwpjx
  2. I am having some trouble with adding and removing the addEventListener, it says it can't read a property of a null. This is not GSAP related, so I can keep trying to see what works
  3. Thanks PointC ! I will try this and reply back when it is working.
  4. Hey PointC ! Thanks for responding I was trying to avoid jQuery, even though I am using it in this example I was going to try and convert those instances without using jQuery, if possible. I thought maybe there was a way to play the GSAP instances once, and then reset them when the item is inactive again. If you think the jQuery on and off methods would be the way to go, then maybe I'll keep it while using jQuery, but how would I integrate that into my GSAP timelines?
  5. Hi, I am trying to figure out two things on my codePen link. 1. When you click a dot, it scales down to 2 -- but I am trying to figure out how to make that dot inactive, so that the mouseover and mouseout functions would not run on that specific dot while it is active. 2. The line and date animations can still run now (even if the item is active), but I am trying to figure out how to limit the GSAP animations to run only if the item is inactive
  6. Right! I forgot we are using createJS properties It Works like you said: TweenMax.to(exportRoot.box, 2, {alpha:0}); TweenMax.set(exportRoot.box, {visible:0});
  7. Hi Davi, Sorry that I am re-opening this old thread, while I can control with GSAP the element's position in the HTML, to within the Animate CC canvas element. It doesn't seem to work with anything other than position control. I tried opacity, alpha, visibility, display, etc... Check this updated codePen in the HTML function doAfter. Do you know why we can't control any properties other than position?
  8. Davi, Thanks! Yes, I see it needs to be after the handleComplete() function. that works! I tried to put a function after the HiDPi function but that didn't work... Why does it need to be right after the handleComplete() function ? I wonder if I could put the functions on a separate .js file
  9. Thanks Davi, Check it out here's a codePen that I put a simple Animate CCC Canvas file into. There is only 1 movieClip named 'box' . But I can't get any control over the element from javascript outside of putting the js inside the FLA. it seems like it is a scope issue
  10. Hi, We can control the movieClip with an id of box from within Animate CC like this: TweenMax.to(this.box, 2, {x:500, repeat:10, yoyo:true}); But if I wanted to control the same movieClip with GSAP from the actual HTML file instead, how can I do that ? I am having trouble targeting the actual element from within the <canvas> I tried canvas.box and stage.box and exportRoot.box, but I can;t seem to target the id of a MovieClip that is inside of my AnimateCC canvas... Does anyone know how to target them ?
  11. Thanks Davi ! It's strange though because the getMonth with +1 seems to work for the 11th month (November), which is this month. If you switch the day, you'll see it working-- Am I missing something ? I want to make sure, because this will run during the 12th month actually even though my test is in the 11th month (November)
  12. In case anyone is interested I accomplished it pretty easily. See this codePen, and change the date to see it work... I am wondering if anyone has experience with this running anything like this in a banner ad ? I am hoping there is not a reason that this wouldn't fire appropriately (inside of a banner ad)... or if there was a fail-safe to make certain that the script runs ?
  13. I am wondering if anyone knows how to create GSAP code so that I can send Animate CC to a specific frame only at a specific date (Month, Day and Year) and time ? I wanted to do this in Animate CC, and use GSAP so that I can send the timeline to a specific frame when we reach a certain date and time only... otherwise it would just play the regular timeline.
  14. This should help and show how to easily add nested time lines:
  15. Great Demo PointC, and thanks for all your help yesterday
  16. Hi PointC, I think I have it all correct in this codePen http://codepen.io/celli/pen/ryvXQQ I see my text split, but each lines doesn't animate in separately. I should be selecting the children of the #heroTxt Div I assume, to make each one animate in separately with random duration. Or maybe I'm not applying your demo correctly, or maybe my brain is scrambled at this stage.
  17. wow. thank you PointC, I am studying this now, and see to apply it to my codePen.
  18. That's great PointC. Thanks! I tried using cycle in my codePen and while it randomizes it, they still reach their end point at the same time, so some lines run quicker than others. That was a great idea though. The looping through an array to randomize the duration sounds like that will do it. I just have t figure out how to make that happen--do you know of an existing codePen that I can study to see how that can be achieved ?
  19. You guys are the best. I would have been banging my head against my desk trying to figure out those other options. Thanks guys. I was also trying to add a random value to the time it takes each line to animate in, so that each line animates in more randomly staggered, as opposed to from-top-to-bottom in order. I added a random function randomNumber(2, 0.2) to my time, but I don't think that will work. Is there a better way to randomize the time it takes each line to arrive at the end positions ? New codePen based on PointC's advice: http://codepen.io/celli/pen/WpJgrR
  20. hey PointC and Carl, yes, I see what you mean now with .revert() ! I included that into my resize function and that will work, if someone resizes the browser window, it just stops. One other thing is that I will have a few other timelines after this initial timeline and I set up a quick "red box" as an example that plays onComplete, and it looks like even though the first timeline animation isn't playing (because it's reverted) it still waits the amount of time it would have taken the staggering text to complete before triggering the onComplete event--Can I make that onComplete fire once we resize the window (only on the first time) ? Of Course if that fires every time the user resizes the window that wouldn't work well, But if it fires only on the first time, that would work. Or I can set up a master TimeLine (instead of the onComplete event), and jump to the label that would play my second timeline, but still I would need to control that to fire only on the first time... Do you think that is possible ?
  21. Thanks Carl, I see your pen, but I don't see the text coming in line-by line anymore. Did you mean I can put that into a resize function and it would keep the text justified ? I tried that in my original pen, as well as restarting the timeline, but they don't seem to work. I might be missing something...
  22. I have a simple Split text that animates in each line of text, and it spans the entire browser window width. I have two questions: I see that since it wraps each line in a <div> when I resize my browser, I loose the line breaks and it shows some lines that are truncated. Is there a way to avoid this, and have my split text adjust as I adjust my browser window size ? I wonder if we'd need some type of browser refresh script (every time you resize the browser window) in order to make that happen ? Also I noticed that I have my text set to 'justify' but it doesn't look like splitText honors that, does anyone know of a work-around for that ? To get the text from edge-to-edge maybe if we can't honor 'justify' so that it looks justified ?
  23. yes, those are really great. Thanks! They give me some ideas.
  24. I have a simple wiggle in the codePen example, and I'm trying to see if I can save the position after each circle moves into it's first position and then move it around again randomly (all within the blue box). Right now when it wiggles, it returns to it's original position in-between each wiggle. Is that possible ? I looked at the 'swarm' example, but I am having a hard time making sense of the code, and I really would like to see how I can capture the position after it moves out into position the first time, and then move each circle around from that position each time it wiggles around. Thanks in advance.
  25. Hi Dada78, I added this to your playEnd function and it will fade out the steam, and then remove it completely: .to("#steam, #steamPosition", 1, {autoAlpha:0}) .set("#steam, #steamPosition", {display:'none'}) hope that helps. -Celli