mb2233

Thanks guys. The error was due to a wrong handling of data, the strings did appear but they didn't have their class attribute attached to them, so that caused the error of not tweening. Appreciate your answers!

Hi guys. I'm having some issues with running GSAP on mobile. I'm creating a portfolio site for someone, where I'm using GSAP for the animations. Everything is running smooth on desktop, but as soon as I test on mobile, none of the animations work, only if I refresh like 10 times, then they appear, and then not for the next 10 times. Is there a known performance issue of GSAP animations on mobile or am I doing something wrong? Or is it only in BrowserSync where this doesn't work? Thanks!

Can't believe I didn't see that one myself. But thanks! Regarding the actions, I don't have THAT much experience with Redux. I just know what it does overall, but I'm using a Boilerplate, so that's why all the Redux stuff is there. What do I put in the actions folder considering the Page transition code you posted above? Also, I'm getting the following errors after I added the code: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `Route`. in Route (created by App) in div (created by App) in App in Router (created by BrowserRouter) in BrowserRouter Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `Route`. Why is that? Again, thank you for taking your time with this! It's really helpful. I'll give you some coding credit once my Portfolio is done and dusted.

Hi Rodrigo. Thank you so much for taking your time to share that! Although I'm having a few issues: I'm getting a: Module build failed: SyntaxError: Unexpected token, expected , On the <button onClick={this.buttonClickHandler.bind(null, '/'}>Home</button> Second: What do you mean with this: // depending on your actions path What needs to be in my actions file? Thanks! Really appreciate it!

Hi. Thanks for getting back to me Yes, that's exactly what I was hoping someone could help me with, if it's possible. Either replace the CSSTransition stuff or merge the GSAP code into it, to make smooth page transitions I just don't know how to do it, or if it's even possible during routes. But thanks!

Hi guys. Just wondering if it would be possible to use GSAP for animating simple page transitions in React? I have my index.js file rendering my app: // React Common Modules import React from 'react'; import ReactDOM from 'react-dom'; import { TransitionGroup, CSSTransition } from 'react-transition-group' import { BrowserRouter, Switch, Route, Link, withRouter } from 'react-router-dom' import thunkMiddleware from 'redux-thunk'; import createLogger from 'redux-logger'; import { createStore, applyMiddleware } from 'redux'; import { Provider } from 'react-redux'; import Reducer from './Reducers/Reducer'; const loggerMiddleware = createLogger(); const createStoreWithMiddleware = applyMiddleware( thunkMiddleware, // Middleware for dispatch() loggerMiddleware // Middleware for loging )(createStore); let store = createStoreWithMiddleware(Reducer); // Main SCSS import './index.scss'; // Root React Component import App from './App'; ReactDOM.render( <BrowserRouter> <App/> </BrowserRouter>, document.getElementById('root') ); Then I have my app.js // React Common Modules import React, { Component } from "react"; // React Router import { BrowserRouter, Switch, Route, Link, withRouter } from 'react-router-dom' import { TransitionGroup, CSSTransition } from 'react-transition-group' import 'gsap/TweenLite' import 'gsap/CSSPlugin' import 'gsap/EasePack' import 'gsap/TimelineLite' // Own Modules import { DefaultPage } from "./Pages/"; import { AboutPage } from "./Pages/"; class App extends Component { constructor(props) { super(props); } render() { return ( <TransitionGroup> <CSSTransition key={location.key} classNames='fade' timeout={1000}> <Switch location={this.props.location}> <Route exact path='/' component={DefaultPage} /> <Route exact path='/about' component={AboutPage} /> </Switch> </CSSTransition> </TransitionGroup> ); } } export default App; And then I have a SideMenu component with all my <Link> 's. Everything is working fine, I just can't get it to create a transition in between the routes, which is where I'd like to use GSAP. The timeout simply doesn't work. Here's the scenario I'm trying to accomplish: User is on the Landing Page Clicks /about link Color slides in from the left and covers the entire screen (using GSAP) while the landing page is still there beneath the color. The landing page leaves behind the color. The color slides out. About page is revealed. Does anyone know how to do this? Thanks!

Hi again Rodrigo, I gave your code a shot, but I'm getting an error message saying "this.paintOutTimer is not a function". Why is that? Appreciate the help.

Thank you again Rodrigo! I’m going to give that a shot, as it was what I wanted, to have it animate out after some time. Thanks!

Hi Rodrigo, Okay, first of all, I work as a digital designer, so my coding skills are limited - but I've given myself the challenge of redesigning my portfolio and developing it myself - in React. What I'm trying to pull off is actually really simple. What you helped me with the other day is done and dusted, that works great. What I'm trying to do now, is to have a div starting at width: 0px- animate to a full width of 110% starting from the left, then go back to width: 0px; but this time translating to the right. Like a paint stroke or a wipe. It's suppose to reveal some text beneath it. Everything around it is setup and I've got it to "paint in" I just need it to "paint out" again. I hope that makes sense. Like the white block that "paints" the image here: https://dribbble.com/shots/3907074-Nespresso-Animated Anyhow, the Code Pen you sent actually solves my side menu issue too, so thank you for that ??

Hi guys, I'm new to React and using GSAP with it. I'm trying to do something really simple. I'm calling an animation on componentDidMount() and now I would like for this animation to leave as well. Now, I though I could do it using componentDidUnmount(), but that is not working. Can anyone help animating something out? Code: componentDidMount(){ this.loadOverlay = TweenLite.to(this.loaderOverlay, 1, { width: "110%", zIndex: "900", ease: Expo.easeInOut, delay: 2.1 }); } componentWillUnmount(){ this.loadOverlay = TweenLite.to(this.loaderOverlay, 1, { width: "0", right: "0", left: "initial", ease: Expo.easeInOut, delay: 4 }); } Thanks!

Thank you so much Rodrigo! It works perfectly!

Hi GSAP community, Let me start out by saying that I'm very new to React, but I'm looking to do a smooth animation on page load using GSAP. I've done several animations before using GSAP, but when it comes to React, animation just seem really complex. Right now, all I'm looking to do, is having my loading screen, slide of to the right using Expo.easeInOut after a couple of seconds, revealing the page beneath it. But all documentation about animating in React seems extremely complex, compared to what usually takes 2-3 lines of code to do. Can anyone of you help? Thanks!