alwayzambitious last won the day on May 14 2014

alwayzambitious had the most liked content!

alwayzambitious

Members
  • Content Count

    100
  • Joined

  • Last visited

  • Days Won

    2

alwayzambitious last won the day on May 14 2014

alwayzambitious had the most liked content!

Community Reputation

54 Contributor

About alwayzambitious

  • Rank
    Advanced Member

Recent Profile Visitors

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

  1. alwayzambitious

    React and GSAP

    Here's the thing: I think they are super simple examples floating around but not much more harder than that. I have been looking for how to do: Shared Element Transitions - animation pattern where you reparent an element w/ a translate and tween to new pos? See tweet for example Staggered Tweening - Animating the elements within the component <Header /> - ele1 - ele2 <Main /> - ele1 - ele2 <Footer /> - ele1 - ele2 I dont want to only animate the header Main and footer but the elements within them. So the ele1 in <Main/> fades in right after the ele2 in <Header/> --- Ive considered AnimatedJS but despite its power, its a completely different paradigm and more verbose code. If anyone has suggestions on achieving the above let me know. When I figure it out I will definitely share and open source it. With that said thanks for sharing your code zachschnackel. .
  2. alwayzambitious

    React and GSAP

    Hi @t.coenradi would you happen to have any kind of example of what you described?
  3. alwayzambitious

    Menu annimation with GSAP

    I got it now http://codepen.io/dwayneaneckles/pen/RpNEYr?editors=0011 I think my confusion was because without reading the docs expected tl.reverse() to be like tl.play() but just play reverse. I understand now, from reading the docs and experimenting that it doesn't "play" the timeline, it just sets the mode or state of timeline, unless you add a number as a param ugh bold request gsap team, is it possible to change reverse() to setModeToReverse() reversed() to IsModeReversed() jk I think I got it now. Thanks everyone for having the answers in the threads.... Carl said it what it does in a separate thread and I used Blakes Codepen for reference https://greensock.com/forums/topic/15617-hover-animation-which-reverses-back-to-original-state-when-mouse-moves-away/
  4. alwayzambitious

    Menu annimation with GSAP

    Question for you Rodrigo, I'm having trouble with the meaning of reverse in the example for Tl.pause(0).reversed(true) The pause here means moved playhead to 0 and pause it. Then set reversed equal to true which is the original state It started... Does reversed() mean that it should play In Reverse? If so then if the Ani is paused and has reversed set to true, if it's asked to play while at it's starting point then that means it stays still, correct? It shouldn't play forward right? Despite the command to play I guess I'm not seeing how the playhead moves the very first time... if reverse is set to true I'm definitely missing something about the reverse property. I found this thread with an explanation but It's a little confusing https://greensock.com/forums/topic/9468-toggle-reverse-and-play/?hl=reversed#entry69838
  5. alwayzambitious

    Jack Doyle will you please save Flash?

    https://greensock.com/animatecc-templates It's not native but Does the above link not do what you want? I may not be understanding your question.
  6. alwayzambitious

    scaling a panel height in up dir from bottom

    Hey Blake, Good points – I will try countering. and i forgot that transform-origin doesn't affect height at all just scaleX. Lol. I attached is what the desired behavior should be but I think i have the answer now. Thanks! Edit: In addition to what Blake mentioned above I just found that when you set the position of the div using bottom: XXpx for some reason it treats the bottom part of the div as the anchor it animates from. Yet when you set the y pos using top: XXpx , it treats the top as the anchor that it animates from which I thought was interesting. Thanks for the codepen as well, Blake.
  7. alwayzambitious

    scaling a panel height in up dir from bottom

    http://codepen.io/dwayneaneckles/pen/vgQagv Hey everyone, I'm trying to create a sliding door effect on a responsive webpage and i cant get the bottom door to expand in the up direction. Ive tried setting the transform origin to be center bottom but no luck. Below is the codepen, let me know if I'm missing something? Thanks
  8. alwayzambitious

    Tween, pause and reverse with different speed

    This is exactly why I was waiting for the advanced devs, I will be sure to read that article. Thank you @dipscom.
  9. alwayzambitious

    Animation Strategies

    i know your pain... some ways banner devs use are to export the all text as pngs cut around the word and put them on a sprite sheet. another way is to export all text as pngs the same size as the banner, which may seem wasteful, but its easy to position everything at 0,0 make sure to run all pngs through tiny.png afterwards. photoshop cc has an option to generate assets automatically, once you name the layer with a png or jpg. something like that does take the tediousness out of the job. and it makes it faster.. some places ive seen use live text with css but rarely as the web font is not as good looking as the original font. I completely hear you about the lack of a gui. I've found that to be a bit of a gift... i can do resizes faster than in Flash. But i see a sweet anim here and agree it would be hard to create with code. hope i answered your question
  10. alwayzambitious

    Read This First: How to Create a CodePen Demo

    I think if your greensock issues are really css, which i find often, you may want to try css tricks they have a forum...
  11. alwayzambitious

    the difference btw tweening width vs scale

    Thanks Kez, yea no it doesnt look good doing that im fine with using the width. I just wanted to make sure, there wasnt something in the docs i was missing. trying to do things the "right" way. its not an issue
  12. alwayzambitious

    Tween, pause and reverse with different speed

    Check this out, I'm not sure it's the best way but it's "a" way. let me know if it's what you want. http://codepen.io/dwayneaneckles/pen/oBzgjO var tl = TweenLite.to($('#box'), 30, {opacity: 1}); $('#button').click(function() { TweenLite.to($('#box'), 1, {opacity: 1,overwrite:true}); TweenLite.to($('#box'), 1, {delay:1 ,opacity: 0}); }); You have to use a property called overwrite:true. and i delayed the start of the fade to zero, the same time it took to fade it to 1 The second call will overwrite the first one, if you didn't set that overwrite to be true, then neither tween would at work. This doesnt mean it cant be done the way you had, with pause resume...but thats how i would do it. I'd be curious to see a better way to do that though.
  13. alwayzambitious

    the difference btw tweening width vs scale

    Hey everyone, lets say I have a div with text inside. tweening the scaleX squishes the text inside but tweening the width, correctly only animates the div.. TweenMax.to(header, 2, {delay: 2.2, width:"0px"}); //vs TweenMax.to(header2, 1, {scaleX: .5, delay:.2,transformOrigin:"0% 0%"}); Ques: Is there a way to scale using transform/scale without scaling the text inside the division or is that just how CSS works... on initial search, i didnt see this discussed elsewhere Thanks in advance, alwayz
  14. alwayzambitious

    Tween, pause and reverse with different speed

    Hey anonty, I couldnt follow the logic – see if you can code a quick codepen example to troubleshoot. codepen.io,
  15. alwayzambitious

    Stuck with trying to recreate animation from CSS to Gsap

    Try changing the line 8 from rotationY:60 to rotationZ:60. I did that and it no longer animates toward the user I havent done 3d stuff in a minute, but I can see why you used rotation. That's confusing a little bit.