Daniel Park

Members
  • Content count

    6
  • Joined

  • Last visited

Community Reputation

3 Newbie

About Daniel Park

  • Rank
    Newbie
  1. Animating children directly or parent container element.

    Interesting, that's the same thought process I had. Yeah I'm using a transform: translateY(100px) instead of the top property. Made the change after inspecting performance in the browser. Cheers!
  2. Tween slide in and out animation only works once.

    You're right. Had an extra object and the ease function wasn't working either. All is working as it should be!!
  3. Let's say we have a div that contains two child elements. If we wanted to animate the opacity from 0 => 1, and also the top property from 50 => 0. Is it more efficient to just animate the parent div element or animate each of the children directly? Some thoughts on this and why?
  4. Tween slide in and out animation only works once.

    Ahhh, interesting. Some oversight on my part! I simply changed the 0 to '0%' and it works as it should. Interestingly enough though, when I use xPercent the Tween doesn't work. openContactAside = () => { this.setState({ asideOpen: true }, () => { TweenMax.to(this.overlayEl, 0.5, { xPercent: 0 }, { ease: Cubic.easeIn, yoyo: true }); }); }; closeContactAside = () => { TweenMax.to(this.overlayEl, 0.5, { xPercent: 100 }, { ease: Cubic.easeIn, yoyo: true }); }; However when I use the %-based string value of '0%' everything works fine. Thanks for the detailed answer!
  5. openContactAside = () => { this.setState({ asideOpen: true }, () => { TweenMax.to(this.overlayEl, 0.5, { x: '0' }, { ease: Cubic.easeIn, yoyo: true }); }); }; closeContactAside = () => { TweenMax.to(this.overlayEl, 0.5, { x: '100%' }, { ease: Cubic.easeIn, yoyo: true }); }; I have these two functions. When a button is clicked, the overlay element (this.overlayEl) animates from an initial position set by CSS of .overlay { transform: translate3d(100%, 0, 0); } The animation works as desired the first time the button is clicked to open the overlay. The overlay slides out and populates the full width and height of the viewport as desired. The animation to slide the overlay back to its original position works the first time its clicked. The user presses the close button and it slides back to its original position as it should. However, once both the open and close animations have fired once, I try to open the overlay again but nothing happens. I've inspected the dom and its stuck at <div className="overlay" style="transform: translate(100%, 0%) matrix(1, 0, 0, 1, 0, 0);" /> I don't see the translate property being animated back to 0% again. It's as if its stuck there. Am I completely missing how TweenMax's to/from methods work? Is there something I have to do to reset or set the positions of an element that's been animated for it to work properly?