Jump to content

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

Rodrigo last won the day on May 2

Rodrigo had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Rodrigo last won the day on May 2

Rodrigo had the most liked content!

Community Reputation

3,906 Superhero


About Rodrigo

  • Rank
    Advanced Member

Profile Information

  • Gender
  • Location
    Santiago - Chile

Recent Profile Visitors

28,017 profile views
  1. Hi, On top of Blake's great advice, perhaps the solution in this thread could help you get started: Happy Tweening!!!
  2. Definitely!!!! Also I strongly recommend to never update a component's state on every event handler call such as window resize, mouse move or a GSAP update, unless you have no other choice. That will trigger a re-render on every state update (in the case of GSAP that could happen up to 60 times per second), and also re-render all the children in that component's tree. If possible use a breakpoint like in the article, but run your code only if the breakpoint is passed, like that you will avoid a bunch on unnecessary calls. Something like this: const breakPoint = useRef(768); const [width, s
  3. I can see the use of this in React mostly when dealing with a lot of refs. In Vue it would also be useful but only to reduce template boilerplate, that is defining the ref name in the template tag. Vue is smart enough to handle all refs inside an object, which makes it super easy to access, also if you use a ref in a v-for loop, each DOM node will reside in an array with the name of such ref. So Vue kind of makes things easy for developers that way, but that approach is not very well known. In React you have to define the ref in the code and then add it in the JSX which leads to a
  4. Hi, This should be the easiest/simplest setup for the codepen @Cassie linked in a React app: https://codesandbox.io/s/lively-sunset-9ifwq?file=/src/App.js Happy Tweening!!!
  5. As Jack mentions the culprit here is layout shifting, something I really don't enjoy as a user, so the trick of setting heights to your elements is a good way to avoid that. Another alternative could be to use the useLayoutEffect hook and see of that helps: https://reactjs.org/docs/hooks-reference.html#uselayouteffect Happy Tweening!!!
  6. Hi, Delay shouldn't be a string, it should be a number. Also the reason why the position parameter is not working is kind of a mystery, based on this it should work: https://github.com/pankod/canvas2video/blob/master/src/renderer.ts#L42 That is a timeline instance, perhaps something in that package is not working properly. I'd recommend you to try the delay with a number and create an issue in order to get the position parameter to work in the canvas2video repo. Happy Tweening!!!
  7. Hi, In terms of performance, both are equal. None of the options is going to put a lot of stress in either the CPU or the GPU. In terms of cleanliness, I'd prefer the first one, because if your GSAP instance is not going to change at any point in time, there is no need to create it over and over again, probably generating some overwrite and initial position problems. I always prefer to store my GSAP instance and use them as needed and only rely on creating GSAP instance on every event handler call when I have no other choice. Happy Tweening!!!
  8. Not really, while you ca create some defaults those actually doesn't work in the way you intend. What you can do is create a factory function that creates and returns a GSAP instance: const createTween = (target) => { return gsap.timeline({...}) .to(target, {...}); }; Happy Tweening!!!
  9. Hi, It seems that this could be doing what you're trying to do: https://codepen.io/rhernando/pen/WNpevbv Just take advantage of the new syntax, also no need to use a callback to automatically reverse the timeline, just use repeat: 1, yoyo and repeat delay in order to create that effect. Finally if you want to pass the element to the specific callback by using the params property that each callback has: // I recomend that for a specific element use an ID attribute instead of a class selector const btn = document.getElementById("btn"); const myCallback = (e
  10. As Blake points, you can. Vue is smart enough, so when you create a reference in the vue instance you can reach it anywhere in your code using the this keyword. For example you can create a method and call that method anywhere in your code using this.myMethod(), but myMethod is not in the data object. Same thing with the mounted method, any property you attach to this will be reachable anywhere where this points to the Vue instance. Agree, please give it a try
  11. In your Start.vue file: data() { return { menuItems: [...], menuTween: null, // this is replaced by the GSAP instance }; }, After this, everytime you do either of these: this.menuTween = gsap.to(); vm.menuTween = gsap.to(); The reactive property is updated and triggers an unnecessary render of the component, because nothing in the component actually depends on that particular property being updated. Happy Tweening!!!
  12. Hi, What I meant is that is not entirely recommended adding a GSAP instance to the object returned by the data method. Mostly because GSAP shouldn't have any effects on the component's reactivity. Is better to simply attach it to the Vue instance using either this.menuTween or vm.menuTween. You can still access the property using the this keyword anywhere in your app. Basically your data method should look like this (based on the codesandbox sample): data() { return { menuItems: [ /* Array Elements */ ], }; }, But, as I mentioned above, you can still attach
  13. Hi, Well your setup is quite unusual I must say, but the main issue lies in this lines: resetNav(next) { this.menuTween.kill(); gsap.killTweensOf(this.menuTween); // PROBLEM HERE gsap.set(this.menuTween, { clearProps: "all" }); // PROBLEM HERE next(); }, beforeRouteEnter(to, from, next) { next((vm) => { // Assign to var in order to be able to kill it later vm.menuTween = gsap.to( menuItems, {/**/}, 0.65 // PROBLEM HERE ); }); }, In the resetNav method, you're use killTweensOf and then you're trying to clear the applied styles u
  14. Hi, You mean a different start and end points depending on the scroll direction? If that's what you're looking for, I don't know if that's possible with the current API. It seems that the config() method is intended for other purposes, as start and end values are read only. The only thing I can think of is to re-create the ScrollTrigger instance with the new values using the onLeave and onLeaveBack callbacks. Perhaps @GreenSock or @OSUblake could shed some light on that subject. Happy Tweening!!!