Jump to content
GreenSock

alwayzambitious last won the day on May 14 2014

alwayzambitious had the most liked content!

alwayzambitious

Members
  • Posts

    101
  • Joined

  • Last visited

  • Days Won

    2

Posts posted by alwayzambitious

  1. Quote

    There is no "right way" to do it. If you get the result you want, then it's right. Sure, there are better ways of doing things, but that shouldn't be your focus while learning.

     

    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

  2.  
     
    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 Transitionsanimation 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. .
    • Like 1
  3. On 3/26/2017 at 2:04 AM, t.coenradi said:

    I have been using React and GSAP together since react was first created.

     

    I have tried using it in a number of ways, but have found that tweening values in vanilla javascript objects combined with the use of the greensock onUpdate function (combined with onUpdateParams) and then pushing the values into a react component has been the cleanest.

     

    This completely avoids the need for using findDOMNode (or getDOMNode if you have an older version of React).

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

  4. I got it now

     

    See the Pen RpNEYr?editors=0011 by dwayneaneckles (@dwayneaneckles) on CodePen

     

    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 :-D 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/

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

    Hi,

     

    This is Javascript Ternary operator:

     

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

     

    Basically takes an expression and evaluates it. If true the first part of the code is executed, that is before the colon, if false the second part is executed.

     

    Normally to toggle a GSAP instance I use it like this:

     

    var t = TweenLite.to(element, 1, {x:300, paused:true, reversed:true});t.reversed() ? t.play() : t.reverse();
    In this case I'm using a GSAP setter/getter called reversed(). Reversed either gets the reversed status of the instance and returns a boolean. So if the instance is reversed means that is going backwards or is static but after playing backwards. If the instance is going forward or is completed then reversed returns true.

     

    Now considering that you're playing the animation forward but then you hide the elements immediately, there's no need to reverse the timeline, just pause it at the beginning and then since the animation wasn't actually reversed we use the method as a setter reversed(true), therefore:

    tl.reversed() ? tl.play() : tl.pause(0).reversed(true);
    Hopefully this makes things clearer.
  6. 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.

    post-5947-0-62179500-1486839381_thumb.jpg

    post-5947-0-53136900-1486839394_thumb.jpg

  7. This is exactly why I was waiting for the advanced devs,

    I will be sure to read that article.

    Thank you @dipscom.

     

    How about tweening the tween? I changed it to x rather than opacity only to make it easier to see the change.

     

     

    See the Pen oBYwze by dipscom (@dipscom) on CodePen

     

    This is one gem Carl explained in this article: https://medium.com/net-magazine/7-hidden-gems-of-the-greensock-animation-platform-4fb71389f6ca

     

    Make sure you read that, there's loads of good tricks there.

    • Like 1
  8. 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

     

    Ad agencies send me only a storyboard and a source .psd. My responsibility to close my eyes and see the animation and code it with GSAP.  They occassionally append text to storyboard frames to describe their vision more pecisely. 

    There is no better and more flexible solution than scripting an anim with GSAP. If You get through the painful asset exporting/optimization and css positioning, You have the clear field to play with movements, alphas, masks, rotations, spawn particles... The timeline approach is not the way. It is seems easy at first glance, but You are doomed if You want to make size mutations, or the client coming out with a brand new modification idea. Ergo there is no reason to convert a timeline to GSAP. That is a rocky road, don't go that way.

    The question is: How do You make all the pixel, vector, box, ( text ) assest from that .psd, and how do You make a raw HTML from them, ready to TweenMax it?

    My answer was ( after trying out all the commercial tools ) to write my own IDE which is resides in Photoshop. It exports assets, writes and formats HTML and offers me a convenient tweenScript editor, and tons of more. It's a pre alpha and not released yet, but I have to say: I can concentrate on animation now, not on the dirty HTML business.

    adFury.jpg


    www.bannerhost.hu/test/adFury.jpg

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

    See the Pen oBzgjO by dwayneaneckles (@dwayneaneckles) on CodePen

    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.

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

    See the Pen dNpyzj by dwayneaneckles (@dwayneaneckles) on CodePen

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

    • Like 2
  12. 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

    • Like 1
  13. 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

     

     

    I've been using greensock since the as3 days (and love it). Over the past year I've been using React full time. 

     

    I want to echo what Steven has said. The react questions that seem to be popping up when linked to animation and/or gsap often appear to stem from a lack of understanding about how React works - especially regarding the virtual dom and the importance of the key attribute and lifecycle methods. 

     

    Jack has asked for examples of gsap breaking react (in a few threads I believe) but no examples have really popped up. There is no doubt that the linked enhancer above can help smooth out things - but you definitely can work with gsap+react without it.

     

     

    Simple things to remember:

     

    Use ref instead of findDOMNode

     | In most cases, you can attach a ref to the DOM node and avoid using findDOMNode at all.

    source: https://facebook.github.io/react/docs/react-dom.html#finddomnode

     

    When using ref, prefer ref callback over the older (yet supported) string variation:

    | If you are currently using this.refs.myRefName to access refs, we recommend using this pattern instead.

    source: https://facebook.github.io/react/docs/refs-and-the-dom.html

     

    Key is key

    Key is super important with repeated elements because it's Reacts way of telling if its the same element or not. If an item in a loop has the same key on the next cycle, react won't attempt to unmount the old and mount a new, instead it will just update its props. This is really important for animations because you don't want the next cycle to remove an element that is currently animating. 

     

    ReactTransitionGroup

    Also very important when items are being added or removed to the DOM. By wrapping your element in ReactTransitionGroup, you can delay when an element is actually unmounted - meaning you can hold off until an animation is finished before an element is removed from the vdom. 

     

     

    gsap is no different from all the other non-React-aware libraries out there. TinyMCE, Google Maps, etc can all work with React despite having very complex architecture. Before you scream - "but there is 'react-google-maps' and 'react-tinymce' on npm!" They are quite simple wrappers that, like above, utitilise the lifecycle methods and refs to tap into the dom while staying react.

     

     

    Happy to throw some codepens together if needed. 

     

    *Edit*

     

    Super simple example, can provide more:

     

    See the Pen qqWJzv?editors=0010 by cjke (@cjke) on CodePen

     

    Things to note is that the overall state is kept declarative (as per Reacts liking). The component is given props about its current state (is it animating, etc) and a child component communicates its internal state outwards via callbacks (again this is standard React  - think like a normal input component, pass value={value} in and onChange callback). 

     

    During the timeline animation, the state is maintained (the counter - ironically this is set is via gsap, but the counter state count could be from clicks or anything). 

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

     

    I've been using greensock since the as3 days (and love it). Over the past year I've been using React full time. 

     

    I want to echo what Steven has said. The react questions that seem to be popping up when linked to animation and/or gsap often appear to stem from a lack of understanding about how React works - especially regarding the virtual dom and the importance of the key attribute and lifecycle methods. 

     

    Jack has asked for examples of gsap breaking react (in a few threads I believe) but no examples have really popped up. There is no doubt that the linked enhancer above can help smooth out things - but you definitely can work with gsap+react without it.

     

     

    Simple things to remember:

     

    Use ref instead of findDOMNode

     | In most cases, you can attach a ref to the DOM node and avoid using findDOMNode at all.

    source: https://facebook.github.io/react/docs/react-dom.html#finddomnode

     

    When using ref, prefer ref callback over the older (yet supported) string variation:

    | If you are currently using this.refs.myRefName to access refs, we recommend using this pattern instead.

    source: https://facebook.github.io/react/docs/refs-and-the-dom.html

     

    Key is key

    Key is super important with repeated elements because it's Reacts way of telling if its the same element or not. If an item in a loop has the same key on the next cycle, react won't attempt to unmount the old and mount a new, instead it will just update its props. This is really important for animations because you don't want the next cycle to remove an element that is currently animating. 

     

    ReactTransitionGroup

    Also very important when items are being added or removed to the DOM. By wrapping your element in ReactTransitionGroup, you can delay when an element is actually unmounted - meaning you can hold off until an animation is finished before an element is removed from the vdom. 

     

     

    gsap is no different from all the other non-React-aware libraries out there. TinyMCE, Google Maps, etc can all work with React despite having very complex architecture. Before you scream - "but there is 'react-google-maps' and 'react-tinymce' on npm!" They are quite simple wrappers that, like above, utitilise the lifecycle methods and refs to tap into the dom while staying react.

     

     

    Happy to throw some codepens together if needed. 

     

    *Edit*

     

    Super simple example, can provide more:

     

    See the Pen qqWJzv?editors=0010 by cjke (@cjke) on CodePen

     

    Things to note is that the overall state is kept declarative (as per Reacts liking). The component is given props about its current state (is it animating, etc) and a child component communicates its internal state outwards via callbacks (again this is standard React  - think like a normal input component, pass value={value} in and onChange callback). 

     

    During the timeline animation, the state is maintained (the counter - ironically this is set is via gsap, but the counter state count could be from clicks or anything). 

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

    • Like 3
×