Jump to content

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

Rodrigo last won the day on April 27 2020

Rodrigo had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Rodrigo last won the day on April 27 2020

Rodrigo had the most liked content!

Community Reputation

3,541 Superhero


About Rodrigo

  • Rank
    Advanced Member

Profile Information

  • Gender
  • Location
    Santiago - Chile

Recent Profile Visitors

27,165 profile views
  1. Hi, You can create a React app sample with GSAP using Codesandbox, give it a try to create a reduced sample that illustrates the issue you're having. You can even create sandboxes from Git branches if you prefer that approach. Happy Tweening!!!
  2. Hi and welcome to the GreenSock forums. One problem I can spot is that your useEffect() hook is missing the array of dependencies, so that is basically being executed everytime the component re-renders. Finally, do your best to create a live reduced sample using Codesandbox in order to have something live and editable that illustrates the issue. Makes debugging super easy and fast. Happy Tweenng!!!
  3. Hi, There are a few things you need to consider. Will the state and/or props of each SingleDot component change at any point during it's lifecycle? If the state changes, then yeah, store all initial data using useRef and create the callback using useCallback. If the state doesn't change just use the React.memo() in order to prevent unnecessary re-renders. Also, do you really need to make every dot a component? Give that a good thought and use the magic word a guy I worked with some time ago asked all the time: Why? Every architectural decision in your app should be followed by aski
  4. Hi, You can create a live editable sample of an app bundled with Parcel in codesandbox. Just create a VanillaJS sandbox, I believe that by default those projects actually use Parcel to bundle the app. All you have to do then is just install all the dependencies you need. https://codesandbox.io/ Happy Tweening!!!
  5. Hi, I don't have time to create a sample right now but this is a fun idea, good job!!! One approach I'd use would be to make every dot a single component and store it's initial position using useRef(), since that hook stores data in the current property that doesn't change during re-renders. The second approach is to animate X and Y, as Zach already suggested, and you don't need to reverse the animation, simply create an onComplete callback and animate both values to zero. This seems to do what you're after: const tlMouseEnter = (t) => { gsap.to(ele
  6. Rodrigo

    Flip with React

    Hey, I created a simple example based on this CodePen from the GreenSock collection (I assume that this is what you're after). Now for some reason in Codesandbox this didn't worked so I had to create a repo and publish the sample in the corresponding GitHub page. This is the repo url: https://github.com/rhernandog/gsap-flip-react Here is the meat of the code: https://github.com/rhernandog/gsap-flip-react/blob/master/src/App.js Here is the live sample: https://rhernandog.github.io/gsap-flip-react/ Based on your initial post in the thread
  7. Hi and welcome to the GreenSock forums. Keep in mind that the setup method in the composition API runs before the component instance is created and it's purpose is to store the component's reactive data. In your particular case title is just a reference to a reactive data, nothing more. Is not a DOM node that GSAP can actually tween in the App. What you could do is create a reference that later in the component's lifecycle, can hold a GSAP instance, but it seems overkill IMHO. The recommendation for using GSAP with Vue is to attach a GSAP instance to the component's ins
  8. Hi, As Zach mentions, this is related to the way Styled Components work, but lucky for us, they have made some strides in order to facilitate the access to the actual DOM nodes. Basically you have to pass a ref to the styled component you want to target in your GSAP instances, store that using the useRef hook and then just use ref.current in order to access the DOM node. This is a super simple example that takes the code from your file, without any errors: https://codesandbox.io/s/gsap-scrolltrigger-styled-components-pzqy2 Hopefully this helps yo
  9. Yeah, that is completely expected. Keep in mind that the element passed to the ref callback is a React component not a DOM element, so while GSAP is not going to complain about it (you're passing an object), it won't work. Don't use a ref callback, use a regular function passed to the component's ref: const images = useRef([]); // sometimes img can be null, so you'll get an error const createGalleryRef = (img) => { if (img) { images.current.push(img.imageRef.current); } }; return ( <Img fluid={image.childImageSharp.fluid} ref={createGalleryRef} /> );
  10. Hi, Gatsby image actually does gives you access to the <img /> in the DOM: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/src/index.js#L271-L327 https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/src/index.js#L364 All you have to do is pass a function to the ref={} prop in the Img component. That function gets called with an object (React instance) as the first parameter. Then as you can see in the codebase you can access the image reference as imageRef.current (reference created with React.createRef()). In
  11. Hi, Jack is right, you should use the useEffect hook with an empty dependencies array, in order to create your gsap instance after the component is mounted: import React, { useEffect, useRef } from "react"; function App() { const box = useRef(); useEffect(() => { GSAP.from(box.current, {width: "400px", duration: 1}); }, []); return ( <> <div className="app" id="app"> <TaskBar></TaskBar> <div className="box" id="box" ref={ box } style={{ margin: "0", padding: "0", width: "2
  12. I'm super late to the party!!! Sorry but I've been extremely busy the past days. @DMIND as you mentioned, yeah the rendering starts from the last branch in the tree and goes up, so in that case you can either use forwardRef in order to pass a child ref to it's parent, in order to create and control the ScrollTrigger instance in the parent element. Another option, if you need to pass more than one ref from child to parent, is to send a method as a prop to the child element in order to send all the refs you need to pass to the parent component. Yet another option could b
  13. Hi and welcome to the GreenSock forums. It seems that Highway doesn't work with React or Vue, as mentioned in this issues: https://github.com/Dogstudio/highway/issues/50 https://github.com/Dogstudio/highway/issues/64 For route transitions in React I'd recommend using React Transition Group, which basically delays the mount/unmount process of the components allowing you to add animations to such events. Happy Tweening!!!
  14. Hi, In the same useEffect() hook that you're using to create the new animations, before doing that, kill all the animations that will be created again. For this I would recommend a factory function that will kill and then re-create all the animations that will be affected by the resize event. With that in mind is always a good idea to store your animations in a ref using the useRef() hook in order to make it simple to access to them and create them again. This also ensures that the animations are not affected by re-renders that are caused by other reasons. S
  15. Hi, Indeed Zach is right. Here is the official React documentation regarding accessing the refs: https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs Happy Tweening!!!