Jump to content

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

Rodrigo last won the day on November 10

Rodrigo had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Rodrigo last won the day on November 10

Rodrigo had the most liked content!

Community Reputation

2,800 Superhero

About Rodrigo

Contact Methods

  • Skype

Profile Information

  • Gender
  • Location
    Santiago - Chile

Recent Profile Visitors

23,021 profile views
  1. Rodrigo


    Hi, what are we supposed be looking at? Nothing is moving in the sample you provide and nothing can be dragged as well. Please create a reduced sample that points out just the issue you're having in codepen so we can take a better look: Happy Tweening!!!
  2. Not to be stubborn about this, but the sequence of using a from() instance with clearProps in it is somehow close to this: clearProps will remove all inline styles from the DOM element, then GSAP records the initial position of the element, sets a new position to the one pass in the config object and finally tweens the properties to the initially recorded values, so using a set call at the start of the timeline is not very different from that. Just my two cents on the subject. Happy Tweening!!!
  3. Hi, I remember running into a similar issue in a project working with React Transition Group (keep in mind that RTG and Vue transition work in a very similar fashion as both are heavily inspired by earlier versions of angular's ng-animate). The issue is the initial position of the elements when the animation starts, that's why you add clearProps: "all" in your tweens. A good solution is to remove clearProps from the config and add a couple of .set() instances at the start of the timeline in order to give the initial state to the elements being animated, a bit like this: return gsap.timeline({ onComplete: done }) .set(this.$refs.container, { xPercent: 100 }) .set(this.$refs.overlay, { opacity: 0 }) .to(this.$refs.container, { duration: this.enterDuration, xPercent: 0, ease: 'power3', }, 0) .to(this.$refs.overlay, { duration: this.enterDuration, opacity: 0.65, }, 0); The overhead of using this approach should be virtually none, so you shouldn't have any performance issues. I don't have time to create a full working Vue demo, so I made a simple codepen demo instead: https://codepen.io/rhernando/pen/JjjeNQN?editors=0010 Consider the first click of the show sidebar as the moment when the element is mounted, for the purposes of this situation just imagine that the sidebar and overlay are not visible when the code runs for the first time. Happy Tweening!!!
  4. Hi and welcome to the GreenSock forums. First thanks for being a Club member and support the development of GSAP!!! Basically the issue is that a timeline instance is created going forward, so after is created reversed() returns false, so your timeline then goes in reverse. After that reversed() is true so it will go forward, that is why it works on the second click. In this cases I normally add a reverse() call at the end of the timeline: tl.to("#bar1", 1, {morphSVG: "#cross1"}, "menu") .to("#bar2", .05, {opacity: 0}, "menu") .to("#bar3", 1, {morphSVG: "#cross2"}, "menu") .reverse(); menu .to("#menu", 1, {left: 0}) .reverse(); Like that the timelines are reversed so the code will work as expected. Finally another trick is to toggle the reversed() state of the GSAP instance, like this: play.onclick = function() { tl.reversed(!tl.reversed()); menu.reversed(!menu.reversed()); } Happy Tweening!!!
  5. To be completely honest I've never worked a lot with forwardRef and specially in such a case. Javascript-wise the solution in the SO post is quite correct and elegant. Keep in mind that you're just passing a reference (hence the name) to a specific object (DOM node). If that ref resides inside another object or an array, or a factory function or whatever you want, is just what JS allows you to do. If that approach works in your case then go ahead and use it. If you want you could ask around in Reactiflux discord channel. There are quite a few very talented React guys there, including people that contribute to major React projects like React Transition Group, Styled Components, React Router, etc., so you can be sure that you'll find a very accurate and correct answer there. Just click the Join Reactiflux button. Happy Tweening!!!
  6. Forward Ref can be a little confusing if you're relatively new to React, but is quite simple actually. In the same way that in my sample I send the close method from the parent to the modal component, the modal component creates a ref of the content <ModalContent ref={e => (modalContent = e)} />, the thing is that the value of modalContent is going to be a react object and not a DOM element. Basically forwardRef is a higher order function that takes a functional component and takes the ref passed as a prop in ModalContent and looks where exactly in the JSX code of that component you're using that reference and returns the DOM node to the parent, just like the close method works in this: <Modal visible={isModalVisible} close={closeModal} />, the only difference is that in the case of forwardRef that is executed when the component is mounted and not on a specific event handler, like a button. This is just the way I see and understand how this works, perhaps the official explanation could be different. Just personal preference, the code is easier to read for me like that Happy Tweening!!!
  7. Hi, I was actually working on a sample, it took longer than expected due to some work stuff and the fact that I'm getting up-to-speed in the API of V3 (all my current projects are still on 2.x. I believe that the best approach is to use forwardRef (https://reactjs.org/docs/forwarding-refs.html) in order to pass a reference of the modal content to it's parent element and include all in that particular timeline. Here is a live sample: https://codesandbox.io/s/gsap-react-modal-timeline-783bk Happy Tweening!!!
  8. I agree with Zach in this, I think you're over-complicating things a bit (something we all have done to be honest ). You can easily create an empty timeline using useState() and later in the initial render you can add child instances, labels, callbacks, etc. to it, in order to avoid errors: const [tl] = useState(gsap.timeline({paused: true)); useEffect(()=>{ // here add instances to the timeline }, []); You're right about adding paused timelines to a parent one. Normally in that scenario I create the child timelines paused and when I add them to the parent I un-pause them: const masterTl = gsap.timeline({ paused: true }); const childTl = gsap.timeline({ paused: true }); // add child instance masterTl.add(childTl.paused(false)); // later on your code you only control the parent Timeline Finally, avoid adding instances to a timeline because of a state update using useEffect, this will keep adding instances and callbacks to your timeline on every state update and at the end you could end up with a lot of unwanted callbacks and instances inside your timeline. As suggested create the timeline at runtime and then, if possible, add all the instances to the timeline on the initial render. Then control the timeline using useEffect. Here is a simple example of creating and controlling a timeline using Hooks: https://stackblitz.com/edit/gsap-react-hooks-timeline-instance-toggle Happy Tweening!!!
  9. This seems to be doing what you want, if I understood correctly: https://codesandbox.io/s/gsap-react-number-animation-hooks-xpyq4 The main idea is to use a proxy object so GSAP has something to update the value and not make it depend on some state property. Since you're most likely using some bundling tool this will be inside a closure so that particular object will remain inside that particular scope. Then in the onUpdate callback you can update the state of the component showing the number so it works independently of the component that actually creates the number. Hopefully this helps. Happy Tweening!!!
  10. Hi, you mean the sample by @chrisgannon? Chris is just adding the card's content (image actually) and the cards container through JS code, but that could be a regular DOM element with an ID, actually all could be DOM elements. Then all you have to do is point to the specific element: TweenMax.to("#cardContainer", 2, { rotationY: "+=180" });It shouldn't be more complicated than that. Happy Tweening!!!
  11. Hi Andrew, Just to clarify, you just need an object to update one or more values in it, and that is not related to the component's state? I'm a little lost in what exactly you want to achieve here. Keep in mind that using a functional component and the Hooks API you're kind of forced to use the useState() hook as well in order to update the number in the DOM view. Also keep in mind that React has become more and more efficient in terms of what is actually updated and re-rendered with time. While manipulating the DOM in the useEffect hook certainly works is not the react-way of doing things (actually Dan Abramov could suffer a stroke if He sees that part of your code ). If I was you I'd stick with using useState and useEffect to update the value and perhaps create a specific component just for showing the value so the only element that is actually re-rendered is the one being affected by that value, but again I'm not entirely clear of what you're doing. Happy Tweening!!!
  12. Hey Venn, As far as I know there is no official plan from GreenSock to create something like that. Consider the fact that because of React's nature this wouldn't actually be a GSAP Plugin that takes a React element and tweens one or more specific properties of that object (the main way GSAP actually works), but a React component that uses GSAP to create an GSAP instance using the reference to the children passed to it as the target. This is most definitely a React tool and not a typical GSAP Plugin/Tool. It seems that the project Blake posted is getting things done. The trick is returning a <Fragment></Fragment> wrapping the children pass to the wrapper and then clone them in order to obtain the refs in order to pass the DOM nodes to GSAP: https://github.com/bitworking/react-gsap/blob/master/src/Tween.js#L151-L176 https://github.com/bitworking/react-gsap/blob/master/src/helper.js#L141-L152 The rest of the code is basically a way to control the GSAP instance that is being created by detecting updates in the props passed to it. It even seems to work with styled components. Honestly I have never used it because I consider it an extra layer that, I haven't considered necessary in any project I've worked on. As much as I can advocate towards the declarative nature of the package, under the hood is doing pretty much what every GSAP+React sample does. Gets a ref and passes it to a GSAP instance. If I was you I would ask the engineers over there to create a fork of that project and whip your own solution that adjusts to your needs. You should also point the fact that version 3 of GSAP is coming soon so perhaps they might want to study migrating to that API instead of the 2.x API. Happy Tweening!!!
  13. Hey Venn, you mean something declarative like React Transition Group but with GSAP? Like this: <GSAP /* Tween Config Here */> <MyComponent /> </GSAP> The main challenge I see in this is what happens when someone wants to integrate this with a re-usable component or another stuff like styled components where you don't have direct access to the DOM node. Keep in mind that GSAP requires the DOM node to work it's magic. Another option could be create a proxy object and pass rendering props to components in order to update the styles, but doing so through React's render() method could slow things quite noticeable in complex scenarios. I agree with Zach in terms of perhaps you have some ideas or particular issues that apply to your day-to-day work. If that is the case and we're talking about situations related to Altassian's specific components or apps structures, perhaps the best course should be for you guys to whip your own particular solution. It would be great to know what you guys are dealing with and what have in mind would be useful to solve it. Happy Tweening!!!
  14. Hi, You should try using the Transition wrapper from React Transition Group to unmount the elements after the animation is complete. This was discussed in this thread, where @OSUblake shares His approach to this as well: You could definitely use the intersection observer API, to set the in property in the <Transition> element to remove the elements if you want to animate them out. If the element is not going to be visible anymore (because of the scroll position) then you could use the intersection observer and simply use state or props to conditionally (not)render the element. Finally as an advice you're running a ternary operator several times in the useEffect hook based on the hoveredvalue. Since you're in a function just create an if statement, an object and add the properties as keys and the values depending on the value of hovered. In terms of performance it shouldn't really matter (unless you run a few hundreds in a short span of time), but your code will be easier to read and maintian, just my two cents on the subject. Happy Tweening!!!