Jump to content
GreenSock

GSAP Helper

Administrators
  • Posts

    0
  • Joined

  • Last visited

Community Answers

  1. GSAP Helper's post in GSAP shape morph (bouncing square to triangle) was marked as the answer   
    We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  
     
    You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 
     
    Your animation may benefit from MorphSVGPlugin. It looks like it's largely about tweaking the timings and eases. 
     
    Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 
  2. GSAP Helper's post in Problem with Text disappearing (React, Tailwind, Gsap, ScrollTrigger) was marked as the answer   
    It's tough to say for sure without a minimal demo, but I bet the problem is that React 18 runs in "strict" mode locally by default which causes your useEffect() to get called TWICE! Very annoying. It has caused a lot of headaches for a lot of people outside the GSAP community too.
     
    .from() tweens use the CURRENT value as the destination and it renders immediately the value you set in the tween, so when it's called the first time it'd work great but if you call it twice, it ends up animating from the from value (no animation). It's not a GSAP bug - it's a logic thing.
     
    For example, let's say el.x is 0 and you do this: 
    useEffect(() => { // what happens if this gets called twice?   gsap.from(el, {x: 100}) }, []);  
    The first time makes el.x jump immediately to 100 and start animating backwards toward the current value which is 0 (so 100 --> 0). But the second time, it would jump to 100 (same) and animate back to the current value which is now 100 (100 --> 100)!  See the issue?
     
    So you can either turn off strict mode in React or you can add some conditional logic to your useEffect() call so that it only runs ONCE. Sorta like:
    const didAnimate = useRef(false); useEffect(() => { // if we already ran this once, skip! if (didAnimate.current) { return; } // otherwise, record that we're running it now and continue... didAnimate.current = true;   gsap.from(el, {x: 100}); }, []);  
    Or you could just use .fromTo() tweens so that you define both the start and end values.
     
    One of the React team members chimed in here if you'd like more background.
  3. GSAP Helper's post in How to append child using FLIP & ScrollTrigger? was marked as the answer   
    It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 
     
    Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.
     
    Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 
    See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen
     
    If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 
     
    Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 
     
    By the way, this definitely looks wrong: 
    onScrubComplete: flipAppend() // <- Executes IMMEDIATELY! I assume you meant to do this: 
    onScrubComplete: flipAppend I also wonder if you're using refs in React but treating those as DOM elements, trying to append() them or something. Again, super difficult to troubleshoot by looking at a few excerpts of the code. That minimal demo will be essential for getting you a good answer.
  4. GSAP Helper's post in How to animate a position fixed element through all the page. was marked as the answer   
    It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 
     
    Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.
     
    Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 
    See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen
     
    If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 
     
    Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 
×