Jump to content
Search Community

Daniel Hult

Members
  • Posts

    128
  • Joined

  • Last visited

Recent Profile Visitors

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

Daniel Hult's Achievements

  1. Yeah, I guess the issue is useEffect runs before the DOM is ready, whereas useLayoutEffect runs after. The reason useLayoutEffect works then is because I'm passing the timeline as a prop to the <Loader/> component, populating the timeline and having a duration before the useLayoutEffect runs. The reason I don't populate the timeline in the same component is because I want to have a master timeline in a parent component where I can use the timeline callbacks for other stuff that's supposed to happen (e.g hide a component, fetch new data etc...). I'm just trying to figure out the best way to work with gsap in React, as it's quite different from just a barebone frontend setup, and maybe someone can find some help from this post as well ?? I appreciate all your effort in these forums ??
  2. (also tried with the tl.kill() in the return function of the gsap context — no difference)
  3. Just coming back to this (again) with a question: The issue is the same if I use useEffect instead of useLayoutEffect. Is there a way to solve this using useEffect as well? With useEffect it's 50/50 chance it's working as expected. Using gsap version 3.12.2 and NextJS. Here is all the code essentially for the component. The issue is that the <Hero/> component renders straight away because the onComplete is fired — setting the state to true. const Home = () => { const [loaderFinished, setLoaderFinished] = useState(false); const [timeline, setTimeline] = useState(); useEffect(() => { const context = gsap.context(() => { const tl = gsap.timeline({ onComplete: () => setLoaderFinished(true), }); setTimeline(tl); }); return () => context.revert(); }, []); return ( <main>{loaderFinished ? <Hero /> : <Loader timeline={timeline} />}</main> ); };
  4. Yeah, I suspected something like that, but was unsure what the best approach would be. Your forked demo works as expected! Thank you for looking into it ? When can I expect that to be released? This whole thread has been a pleasant "you're not an idiot" for me ?
  5. I've tried a couple of things as well, but haven't found an elegant solution yet. It's very annoying to work around annoying React problems when you're just trying to do some cool animations ?
  6. Yes, the animation plays fine, but the onComplete callback runs on first render and then again once the child tweens are done unfortunately.
  7. Hey @Rodrigo I'm coming back to this thread because I keep encountering this issue with nested timelines. Just a simple question: How would you play the timeline after all the child instanses are created without the interaction like clicking the button?
  8. This was a silly mistake on my end ?‍♂️?‍♂️?‍♂️ I got the tweened element mixed up with the scrolltrigger's trigger and my brain is fried at the moment. Thank you for the help!
  9. Hey, I'm having an issue with pinning a progress bar for a section that uses ScrollSmoother effects. You can see the issue with uncommenting the pin line. What is happening here?
  10. Hi! I had a read through your post on advanced gsap + react animations and had a question about one of the examples on component communication. In one of your examples you're passing down timeline as a prop and then adding tweens to the timeline in the child component — which works fine! My question is how to properly use/access the callbacks like onComplete e.g in the parent component (or in the child)? For example this onComplete will run on first render (the child component's tweens won't run first): const Intro = () => { const [timeline, setTimeline] = useState(null); useEffect(() => { const gsapContext = gsap.context(() => { const tl = gsap.timeline({ delay: 2, defaults: { duration: 2, ease: 'power3.out' }, onComplete: () => console.log('I run immediately') }); setTimeline(tl); }); return () => gsapContext.revert(); }, []); //Later down I'm passing down the timeline to the child component and adding stuff to it <IntroText timeline={timeline}/> I couldn't find a good solution to this in the forum (at least where I've looked!). Do you have any recommendations for this?
  11. Ah, perfect! That solved my problem as well! Thank you ?
  12. Hi guys, Im trying to achieve the layered pin effect with scrolltrigger, similar to the demos here: https://codepen.io/GreenSock/pen/KKpLdWW Im just trying to add one section in between that is pinned WITH pinSpacing enabled. After the animation is done on that pinned section, I want the next section to overlap that section just like these demos. Does that make sense? In my codepen here, after the logo animation is finished, I want the section below to overlap the finished logo section, and then pin that section with pinspacing. So: 1. Animate logo/svg with normal pinSpacing 2. Once it is finished, the next section overlaps 3. When the overlapping section reaches the top of the viewport, it will be pinned with pinspacing Is that possible? ?
  13. Hi guys, I actually just figured out the solution after some hours trying to figure out what was causing the problem. Wanted to write a topic here in case anybody else has this issue, or if it's relevant to the Greensock team: When you run Laravel Mix (a webpack wrapper) in production mode it treeshakes (I think) plugins from gsap, even if you registered the plugin: import { gsap } from 'gsap'; import Scrolltrigger from 'gsap/ScrollTrigger'; gsap.registerPlugin(Scrolltrigger); //animation code It works fine in development mode. The solution is to add this setting in the "terserOptions" in the webpack.mix.js file: .options({ terser: { terserOptions: { keep_fnames: true, }, }, }) Hope this helps somebody some day ?
  14. Hey guys, This is a long shot - but I've found some threads in these forums that have helped me before, so Im trying again! Im trying to do a simple animation like the one in the video, but in an endless loop. The top element fades out, and a new one fades in at the bottom. I also need to place the top element last in the array of elements after it's faded out, so it will be an endless loop. Have you ever answered/seen something like this in the forum? Or if anybody would kindly guide me in the right direction, it would be highly appreciated. I can get it to kind of work, but I get a sudden jump when Im appending the element, so I've been stuck for a while trying to figure out the best solution. animation.mp4
  15. Ah, I see! Makes sense since the image is already inside the inner container. Thank you for the reply @tailbreezy ?
×
×
  • Create New...