Jump to content

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


Popular Content

Showing content with the highest reputation on 06/25/2019 in all areas

  1. What is happening is that on the resize event you are telling the element to scale .from() a particular amount. But, because you already set that scale on load, there's no visible animation. You should be using .fromTo() instead of .from(). Quick show: //default scale: 1 // onLoad trigger scale: from(1.25) > to(1) // note that the current scale of the element is now 1.25 // resize event scale: from(1.25) > to(1.25) // no visible change when scrolling
    4 points
  2. Hi @knalle, I am not aware of any new MorphSVG setting. Your code is very complex. And I can not find the error. Another idea for toggling an animation could be like this ... https://codepen.io/mikeK/pen/EBvNMm Happy tweening ... Mikel
    3 points
  3. @Jonathan has written about this quite a bit. Here's one of his many posts about loading assets before the timeline starts. You can use a brightness filter instead of opacity. Here's a basic starter example from a different thread. https://codepen.io/PointC/pen/MQvooQ There are also loads of filters available to you. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter <feComponentTransfer> looks like it could be a lot of fun in your project. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComponentTransfer Happy tweening.
    2 points
  4. I'm not seeing any problem with morphSVG. The problem seems to be coming from your progress(1) jump in the setup function. I assume you did that to hide the <li> elements? You can use immediateRender:false to take care of that. I forked your demo and used an addPause() and labels to make things a bit easier to follow. All seems to be working correctly and I don't see anything unusual with the morph plugin. https://codepen.io/PointC/pen/EBvWBx Hopefully that helps a bit. Happy tweening.
    2 points
  5. @elegantseagulls Ahh.... great idea! Nice thank you I am going to try this first thing in the morning. It makes sense... I hope it works. I'll report back.
    2 points
  6. That's @Dipscom. Superhero for hire — always saving the day.
    1 point
  7. PS There were some changes in the default immediateRender behavior in version 2.1.2. https://github.com/greensock/GreenSock-JS/releases/tag/2.1.2 Happy tweening
    1 point
  8. @danboyle8637, Glad that worked! Yes, it's definitely a good idea to kill animations (and scrollMagic scenes) on componentWillUnmount, otherwise you can get some bad bloat and/or unexpected results.
    1 point
  9. @elegantseagulls Nice. Cleaning up the animations worked. Is it a good idea to always kill and/or destroy animations when unmounting a component? I'm guessing yes. Thank you for the help!
    1 point
  10. Hey MstudioIL, It looks like the stretching and positioning issues are related to your Three.js scene and not related to GSAP. As such it may be better to get help on StackOverflow because this forum is dedicated to GSAP-related issues and questions, so you may not get an answer from people here.
    1 point
  11. The ratio is from the SVG viewBox — 1600 x 1200. I'm checking to see if the window is wider than it is tall or taller than wide so we can figure which part to clip. (top/bottom or left/right) I'm not setting the width and height twice. The first part sets the w/h attributes, but the second part sets the x/y position of the SVG so it stays centered on screen. In this case your light fixture is not centered in the image so you may need to make some adjustments to the math for the best results. Happy tweening.
    1 point
  12. Hi, I wonder if anyone can help with this. I would like the reclangle to shake with rotation: 20, to rotation:-20, decreasing til it stops at its original rotation...which is 0. TweenLite.fromTo("#rect", 2, { rotation: 20}, { rotation: -20, ease: RoughEase.ease.config({ strength: 5, points: 20, taper:"out", randomize: false}), clearProps: "rotation"}); }; The problem is that because the "To" bit of the tween is a rotation value, so the rectangle shakes back and forth fine, but gradually going to the rotation: -20 (which i dont want). Any ideas please?
    1 point