Jump to content

Mr. Creative

  • Posts

  • Joined

  • Last visited

Mr. Creative's Achievements


Newbie (1/14)



  1. That didn't do anything. I am actually loading gsap locally for this project so this was not the issue but I did update it on the codepen.
  2. I cannot seem to figure this one out. I can only seem to explain this by walking through the user steps of how the functionality works. Step1 - User clicks on "alert" button and an overlay on another button gets set to display block. Step2 - User thinks they are clicking on the button for "alert" and "perimeter" button that activates the animation, however they are actually clicking on the overlay. Step3 - Animation is triggered - the alert svg animates in via opacity and scale and then is set to repeat -1 and yoyo true Step4 - User then clicks on the opposite button, "Perimeter" in this case, and the animation stops and disappears. Step5 - Same as step2 Step6 - Same as step3 This is where it breaks and the yoyo and repeat ease gets super out of whack. It keeps on getting more crazy as you continuously repeat steps 4, 5 and 6. How do I reset my animation after the .addPause() and .add("exit") so that it actually does reset and wait until the animation is triggered again? I have tried KillTweensOf, .reversed(true).progress(0), and a few others but can't seem to make this happen. Thanks for the help! I abbreviated my code for ease of understanding FYI - The svg is displaying weird in Firefox but looks fine in chrome. Not sure the issue.
  3. @Carl - thanks for the clarification! Everything is working now. As far as weight savings, I agree - and we're shipping to production with TweenMax.min currently. No reason to do anything else, until you get to the final stages of optimizing. Those little savings all add up PS - Thanks for the autoAlpha tip - I had forgotten that it existed!
  4. I am refactoring and running cleanup on a production app, and optimizing dependencies. We have a React component that uses GSAP for some transition-related stuff, but only the TimelineLite library. It's all simple stuff, without any eases or anything, so we have no need for any of the more complex GSAP items and can now scrub them out to optimize. Originally, we just imported the whole GSAP library via NPM like so: import 'gsap'; Per the GSAP npm docs (https://www.npmjs.com/package/gsap)... Now, I'd like to trim the fat off our import, and switched to: import { TimelineLite } from 'gsap'; However, this is compiling correctly but throwing the following client-side error: Uncaught TypeError: _gsap.TimelineLite is not a constructor Does anyone know why this is? Our weight savings from importing `TimelineLite` alone aren't huge, but they are worth doing. Do I need to import other parts of the GSAP libraries specifically? ---------- NOTES: I have also tried this with no luck. import { TweenLite, TimelineLite } from 'gsap'; Strangely, this does not work either: import { TweenMax, TimelineLite } from 'gsap'; but this does (for obvious reasons): import { TweenMax } from 'gsap'; Here is the animation we are using, super basic: new TimelineLite() .to('#urlCopyMessage', 0, { visibility: 'visible', opacity: 1 }) .fromTo('#urlCopyMessage', 0.35, { opacity: 0, y: 20 }, { opacity: 1, y: -30 } ) .to('#urlCopyMessage', 0.35, { opacity: 0, delay: 0.25 } ) .to('#urlCopyMessage', 0, { visibility: 'hidden' });