Jump to content
GreenSock

ericnguyen23

Members
  • Posts

    35
  • Joined

  • Last visited

Everything posted by ericnguyen23

  1. I removed Bootstrap's "bg-light" class and now animating background color works. That class seemed to override any background-color values.
  2. Hi animators! I'm attempting to animate Bootstraps navbar in my create-react-app. I'm able to animate border, however cannot animate background color. I have 2 questions: Most pressing: How to I animate .navbar background-color? How do I animate border-bottom so that it appears from left to right instead of just fading in? Thanks!
  3. Once again, thanks @ZachSaucier !! Is the array issue only with React? Because I noticed Stagger documentation uses jQuery which simply selected all .btn classes.
  4. How do I get stagger animations working? My CodePen will work if I change staggerFrom to from (will animate the last card), but can't seem to get any staggering animation.
  5. @ZachSaucier Many thanks for fromTo method and TweenMax's repeat and repeatDelay properties!! A side question: what do you recommend for making this animation more believable/organic? ie bumps on the road.
  6. I'm attempting to animate something traveling across the left side of screen to right side and repeating infinitely. The only issue is, I'm setting the same animation speed but one animation is rendering faster than the other. Two questions: With the way I've set it up, how can I ensure consistent speed? Is there a better way of setting up this animation? I feel it's a bit strange to split up the animations like I've done, but couldn't figure out a cleaner way. thanks, I'm using React btw. Extracting the GSAP stuff for those who want a quick look: constructor(props) { super(props); this.tl = new TimelineLite({ onComplete: function() { this.restart(); }, }); this.moped = null; } componentDidMount() { this.tl .from(this.moped, 2, { delay: 2, }) .from(this.moped, 2, { x: '-400', ease: 'Linear.easeNone', }) .to(this.moped, 2, { x: deviceWidth, ease: 'Linear.easeNone', }); }
  7. No worries, good to know. I'll look into implementing gsap using https://greensock.com/react documentation; I'd rather have the support at this time since I'm a gsap noob.
  8. Thanks - although when added to the pen https://codepen.io/ericnguyen23/pen/vwORxr it's still not working. If you remove the wrapping <Tween> tags, the svg will appear; that's how I'm troubleshooting it.
  9. Does anyone know how to link/reference react-gsap in codepen? Doesn't look like a CDN exists for that library.
×