Jump to content

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

OSUblake last won the day on June 23

OSUblake had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. I know the feeling, and we're working on stuff to help making animating with React easier. The next release of gsap might have a little utility to help with situations like that. See the gsap.utils.selector in this demo. You really only need to make a ref for the root element of a component. https://codepen.io/osublake/pen/d86f6dea741f0fe2139afce2c546fc43 I don't know about using Redux. That might add a lot of complexity. The context API is probably a little easier to use.
  2. Thanks for sharing, @Ali Manuel That looks great!
  3. Again for people coming to this thread looking for Vue advice, I'm not recommending what I just said.
  4. Hi JayLow! I just answered a similar question like 5 minutes ago about React. The concepts are still the same for Vue. And if you can share some code on codesandbox, that would be great. I might be offer up some pointers. And maybe another demo showing that split text issue. I definitely want to see what's going on there. There are several reason why a ref might be undefined. It's hard to say without seeing the problem, but it's usually because something hasn't been evaluated yet, like with v-if/else. So sometimes you might need use $nextTick to
  5. Hi Steve! It's very hard to give best practices advice for animations because every situation is different. What might work well in one situation could cause problems in another situation. Sometimes it's just a little bit of trial and error figuring out the best strategy. If you need everything to be controlled by a single timeline, then passing up refs or an animation to a parent is fine. The end result will be the same either way. Definitely not crazy! Timelines are designed to handle situations just like that. I can definitely say that this wou
  6. Hi mauro! Do you have a link to the site? It sounds like Elementor might be using their own scroll container, so you might have to specify that for the scroller property.
  7. ScrollTrigger does refresh on resize. To grab your updated values, you need to use a function. y: () => -height / 2.5 Also, 100vh might not be what you want on mobile. https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
  8. Hi selvinkuik! There is no need for those .fromTo()'s in there. You might want to check out about immediateRender. So just use .to(). For an infinite animation, use -1 for repeat, and gsap has a random utility. https://codepen.io/osublake/pen/e733f57f81e1be2bcca96e166c81021d
  9. For anyone else coming across this problem, the solution is to use useLayoutEffect as shown in this post.
  10. For anyone else coming across this problem, the solution is to use useLayoutEffect as shown in this post.
  11. For anyone else coming across this problem, the solution is to use useLayoutEffect as shown in this post.
  12. Hi @Tonycre8 GSAP needs to do some cleanup before the component gets removed from the DOM, so you should create your scroll triggers inside useLayoutEffect like this. There should be no need to add an extra div using this method. useLayoutEffect(() => { let st = ScrollTrigger.create({ pin: true, ... }); return () => { st.kill(); }; }, []);
  13. Even animating scaleX to -1 has the same problem. https://codepen.io/osublake/pen/d2f5f31c2993c1faeb910fbab706765b Definitely a Firefox rendering issue.
  14. I see it on Windows, but I don't know if it's something gsap can fix. Animating it without gsap still shows the problem. https://codepen.io/osublake/pen/4e8101757bcf27ea36bca073daa74c67 You should probably file a bug with Firefox so they can look at it.
  15. Just use the same technique, use opacity as 0 in your CSS, and animate to an opacity of 1. If an image isn't hasn't loaded when it should be visible, maybe use a blurry svg or base64 image as a placeholder.
  16. Hi @MikeG95 Can you make a demo on stackblitz showing the problem? https://stackblitz.com/
  17. Are you images part of the animation? I would just say don't listen for the load event.
  18. Hi, you can use keyframes like this. Just use the duration for what the percentage should be. const obj = { value: 0 }; const interp = gsap.to(obj, { paused: true, ease: "none", keyframes: [ { value: 50, duration: 0.3 }, { value: 100, duration: 0.7 } ] }); interp.progress(0.3); console.log(obj.value); // 50
  19. I'm having a hard time getting that to even load, but I think part of the problem is that you are using TypeScript syntax in JavaScript files. Try changing the files to TypeScript extensions, or get rid of the TypeScript syntax, like the ? marks. // TypeScript revealsRef?.current.map // JavaScript revealsRef.current.map
  20. What didn't work? There should be no difference between React and NextJS. Do you have codesandbox showing the issue?
  21. It worked for me. I think CodePen was just having problems loading stuff. Maybe try again. If you remove all your gsap code, it should show the first clip path, so it's really not a gsap issue. https://codepen.io/osublake/pen/4b5ac66717b87e9fcc9fc6c444b99e5b
  22. There should never be a need to use setTimeout in Nuxt, but it's really hard advice without seeing a working demo of the problem.
  23. For anyone else coming across this, here's a post that shows how to fetch data and then create your animations.
  24. If you want to customize how it behaves, you should use a function.
  25. Hi, can you make a demo so we can see what you've tried? I would say that you probably need to have different scroll triggers and animations for when something comes into view. Have you tried look at the ScrollTriggrs, perhaps there is something on there that does what you are looking for?