Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

6 Newbie

About mb2233

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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!
  2. 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!
  3. 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
  4. 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!
  5. 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!
  6. 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 f
  7. mb2233

    Animate out - React

    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.
  8. mb2233

    Animate out - React

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

    Animate out - React

    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 b
  10. 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.loadO
  11. Thank you so much Rodrigo! It works perfectly!
  12. 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