celli last won the day on January 3 2016

celli had the most liked content!

celli

BusinessGreen
  • Content count

    245
  • Joined

  • Last visited

  • Days Won

    1

celli last won the day on January 3 2016

celli had the most liked content!

Community Reputation

64 Contributor

About celli

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling
  • Location
    New York
  • Interests
    design, problem solving, drawing and painting, making and building things from scratch, code, creative thinking, skateboarding, and bikes
  1. Great Demo PointC, and thanks for all your help yesterday
  2. 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.
  3. wow. thank you PointC, I am studying this now, and see to apply it to my codePen.
  4. 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 ?
  5. 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
  6. 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 ?
  7. 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...
  8. 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 ?
  9. yes, those are really great. Thanks! They give me some ideas.
  10. 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.
  11. 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
  12. On point and perfect, as usual Point C !!
  13. One more question to add to this. I wanted to get variation between each of the instances that my timeline fires, so that each time it plays the arrangement of the circles would be randomized. If I YoYo and repeat, it obviously would give me the same randomization that played the first time my timeline played. Then I figured if I created two timelines and used an onComplete:restart then they would alternate, giving me a different random arrangement of my circles every time--it works the first two times it plays, for obvious reasons, but I guess when each timeline 'restarts' it actually remembers what the values were played the first time it played, even though it is random. How can I get it to play randomly each and every time ? My codePen should also explain what I mean... http://codepen.io/celli/pen/WxyyKG
  14. Blake, these are very useful and a launchpad for many ideas. thank you!! You guys are incredible.
  15. ahh yes, perfect ! Why didn't I think of that. Awesome update guys !!