Search the Community

Showing results for tags 'reactjs'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 4 results

  1. Daniel Park

    GSAP scroll based animations with ReactJS.

    Has anyone worked with a library for scroll-based callback functions to use with GSAP in ReactJS? I've been working with a small library but I'm looking for a more robust solution and don't have the time to write my own. I'd rather not use CSS animations with popular libraries like AOS. The goal is to find a library that fires a callback function (which I would use to fire an animation function) when an element reaches a certain offset, exits/enters viewport.
  2. 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?
  3. Is there a way to animate children #staggerFrom in a react component which has received children as props.children ?
  4. I am refactoring and running cleanup on a production app, and optimizing dependencies. We have a React component that uses GSAP for some transition-related stuff, but only the TimelineLite library. It's all simple stuff, without any eases or anything, so we have no need for any of the more complex GSAP items and can now scrub them out to optimize. Originally, we just imported the whole GSAP library via NPM like so: import 'gsap'; Per the GSAP npm docs (https://www.npmjs.com/package/gsap)... Now, I'd like to trim the fat off our import, and switched to: import { TimelineLite } from 'gsap'; However, this is compiling correctly but throwing the following client-side error: Uncaught TypeError: _gsap.TimelineLite is not a constructor Does anyone know why this is? Our weight savings from importing `TimelineLite` alone aren't huge, but they are worth doing. Do I need to import other parts of the GSAP libraries specifically? ---------- NOTES: I have also tried this with no luck. import { TweenLite, TimelineLite } from 'gsap'; Strangely, this does not work either: import { TweenMax, TimelineLite } from 'gsap'; but this does (for obvious reasons): import { TweenMax } from 'gsap'; Here is the animation we are using, super basic: new TimelineLite() .to('#urlCopyMessage', 0, { visibility: 'visible', opacity: 1 }) .fromTo('#urlCopyMessage', 0.35, { opacity: 0, y: 20 }, { opacity: 1, y: -30 } ) .to('#urlCopyMessage', 0.35, { opacity: 0, delay: 0.25 } ) .to('#urlCopyMessage', 0, { visibility: 'hidden' });