Jump to content
Search Community

dneckles last won the day on May 14 2014

dneckles had the most liked content!

dneckles

Members
  • Posts

    102
  • Joined

  • Last visited

  • Days Won

    2

dneckles last won the day on May 14 2014

dneckles had the most liked content!

Recent Profile Visitors

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

dneckles's Achievements

  1. Hello.. I have the seamless loop almost working, but the diagonal changes direction when it restarts. Im not sure why that is and Im not sure the debugging technique i could use to figure it out. I know the issue is here return (wrapperWidth-x) % 300+ "px"; I know the issue is in my math, but i am uncertain how to work it out manually I am following the seamless loop codepen btw, Any ideas below is the codepen with the issue Dwayne
  2. This held me up in learning, this stuff, so many ways to do stuff with html css, that it's a lot simpler to go by what you see.. Thanks
  3. dneckles

    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. .
  4. dneckles

    React and GSAP

    Hi @t.coenradi would you happen to have any kind of example of what you described?
  5. 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/
  6. 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
  7. 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.
  8. 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.
  9. 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
  10. This is exactly why I was waiting for the advanced devs, I will be sure to read that article. Thank you @dipscom.
  11. dneckles

    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
  12. 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
  13. 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.
  14. 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
  15. Hey anonty, I couldnt follow the logic – see if you can code a quick codepen example to troubleshoot. codepen.io,
×
×
  • Create New...