Search the Community
Showing results for tags 'reactjs'.
Found 82 results
-
Hi! I'm fairly new to React and firsttimer with Greensock aminations. I'm developing a timeline that is animated on the z-axis when the user scrolls through the page. However I have some issues with getting React Transition Group to play well with nested timelines, and animating out of the current progress in the timeline and then animate back on track. I have the following issues: How would I use React Transition Group in components to add/remove elements when scrolled by the element in the timeline. As you can see in Box1 I tried to wrap the component in the Transition component, but then I cannot add a nested timeline to the main timeline in index.js, that is displayed as box2 with animate on scroll. When clicking a box it opens with an animation. how would I make it animate back to small again, when clicking/scrolling. Right now it just jumps back to where it were on the timeline, before it was clicked (try to click box2). I made a simple project. The real project is much larger, and I'm therefore really concerned about optimizing performance and reuse components etc. https://stackblitz.com/edit/react-jap66w?embed=1&file=index.js For reference, this site is doing some of what I'm trying to achieve visually: https://2018.craftedbygc.com/ Thanks in advance -
Hello, I am doing some animation on my nextjs application, using jquery. You have the code in codepen. The problem is that app is SPA (Single Page Application), and every time a move to a new route, the menu in the left shows great, but the text takes time to render. The first time app loads, it loads just like in codepen. Then when navigate to other page, i need to wait 1 second for text start animate. Then move to another page and it takes 2 seconds to start animating and showing text. While the background from the menu is showing great. The problem i guess is with that staggerTo method, since that is the one that does that. -
Hi guys, I was trying to add an intro animation to a website project using GSAP, everything works fine in Chrome, Firefox and Safari. However, the animation is not firing in IE. All I see is the preloader background, nothing is firing. I've been trying to locate the source of the problem but had no luck. Here's the test link And here's my component setup import React, { Component } from 'react' import { TweenMax } from 'gsap' import Layout from '../components/layout' import MobileSlider from '../components/slider/slider' import ArtPanels from '../components/art-panels/art-panels' import Preloader from '../components/preloader/preloader' import './home.sass' const REGISTER = 'https://xxxx.xxxx' class IndexPage extends Component { componentDidMount() { TweenMax.to('#logo', 1, { opacity: 1, scale: 0.8, delay: 0.2 }) TweenMax.to('.preloader', 0.8, { yPercent: -100, delay: 1.6 }) } render() { return ( <Layout> <Preloader /> <MobileSlider /> <div className="grid-container"> <div className="tagline"> <h1 className="tagline-st">The Fine Art of Smart Living.</h1> <div className="register tagline-st"> <a className="register-btn" href={REGISTER}> register now </a> </div> </div> <div className="art-wall"> <ArtPanels /> </div> </div> </Layout> ) } } export default IndexPage And here is the preloader component and sass file import React from 'react' import './preloader.sass' import logo from '../../images/logo_white.png' const Preloader = () => { return ( <div className="preloader"> <div className="preloader-container"> <img src={logo} alt="logo" id="logo" /> </div> </div> ) } export default Preloader .preloader background: linear-gradient(to right, $brand-dark, $brand) position: absolute top: 0 left: 0 right: 0 bottom: 0 overflow: hidden z-index: 9999 .preloader:parent position: relative .preloader-container position: absolute top: 50% left: 50% transform: translate(-50%, -50%) #logo width: 200px opacity: 0
-
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.
-
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?
-
Is there a way to animate children #staggerFrom in a react component which has received children as props.children ?
-
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' });
