dneckles

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

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

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

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

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/

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

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.

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.

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

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

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

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

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.

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

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

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.

Hmmm... great question. I couldnt find any example that used class. Question: Why does have to be a class instead of an id?

Just a quick heads up, I am glad to see this thread. I have a simple example using react and gsap. (thanks to OSU Blake and these forums btw) Its really simple but ill share "styled-components" Some may know I hate CSS, but I've found that using a library called "styled-components" has made using CSS a bit more of a joy to use with react. The css is separated by component, which fits my thinking better. I don't have go to a different file and scroll through what I don't need to find a particular style. "not use greensock? I dont wanna" To the point about ReactTransition Group on this thread, I have to say, this may sound arrogant, but i never got the need for React's TransitionGroup or https://facebook.github.io/react/docs/animation.html As long as I put the code in the right lifecycle methods, my instinctive response is "why do that when I could just use Greensock to accomplish the same with less code?" But I am still open to it. Thanks for this thread. If its okay with the original poster, I will share my learnings here.

are you talking in the context of using ReactJs. That's the only subject where using className or inline styles come up. Without knowing that I'd say using classes are for more if you are animating with CSS not with greensock JavaScript Bem on its own is really nice and easy to understand I think you may be confusing CSS and JavaScript combo of animating with the JavaScript way greensock offers but I will let the magicians of the forum chime in

cjke would u say the docs are the best place to understand these "especially regarding the virtual dom and the importance of the key attribute and lifecycle methods. " or another resource, i found the docs explanation rather technical not that helpful edit i found this desc very helpful from a random site componentDidMount is executed after first render only on the client side. This is where AJAX requests and DOM or state updates should occur. This method is also used for integration with other JavaScript frameworks and any functions with delayed execution like setTimeout or setInterval. We are using it to update the state so we can trigger the other lifecycle methods. https://www.tutorialspoint.com/reactjs/reactjs_component_life_cycle.htm

Thanks so much for this, I too am getting into react and tying it in to greensock. I will look at the key lifecycle and virtual dom concept since you mentioned it..

http://blogs.adobe.com/flashpro/welcome-adobe-animate-cc-a-new-era-for-flash-professional/ and.. As of November 2015, Edge Animate is no longer being actively developed. http://www.adobe.com/be_en/products/edge-animate.html - alwayz

wow, i think i its safe to safe the animation capabilities of greensockjs are moving at an accelerated pace! its starting to remind me of flash as years ago. Congrats guys. and in regards to the guy "went to another open source library author, insulted our work and asked them to copy what we're doing (but in the "right" way)." I guess you know you you are doing the right not just when you have a lot of fans but when you have a lot of attention from critics. wow, lol.

that cool brackets has that feature to preview instantly....for those whouse sublime txt with live reload installed...to achieve something similiar so that it updates on save... if i really wanted instantaneous feedback, its possible to save sublime every millisecond or on keystroke. then livereload would update...

right next to 0,