Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by Just_Jack

  1. Hi folks, I’ve been trying to use GSAP’s ease in transition to create an effect similar to this: https://codepen.io/just_ja/pen/yLbRRjN My goal is to make something that starts slow, but then speeds up. Does anyone have any advice on how I can do that?
  2. Hello! Is there an easy way to make the width of a span expand to like 500px and then collapse to 0, within a few seconds? Here is what I have so far: gsap.to('.block', {duration: 1, width: 500}, 0.2); I know when using keyframes it would be something like this: @-webkit-keyframes block { 0% { width: 0px } 100% { width: 500px } } Thank you!
  3. Hello! I would love to recreate this animation effect using GSAP, https://codepen.io/jkolze/pen/zYBwVoV This is what I have so far, https://codepen.io/jkolze/pen/RwRQoVZ Does anyone have any words of wisdom as to what I can add to better recreate that effect? Thank you!
  4. I would like to ask for your help on how to make a stroke width go from big too small. I’ve tried using drawSVG and defining the strokeWidth. I also tried something like this: gsap.fromTo("#svg", {duration: 1, scale: 2.0, strokeWidth:10}); gsap.to("#svg", {duration: 1, scale: 1.4, strokeWidth:4}); But, it didn’t work.
  5. So I got this to work in codepen, but when I look locally, I get the error, "GSAP target #pulse2 not found. https://greensock.com". Why is that?
  6. What properties could I use to make a pulse effect like this? I tried using yoyo and scale to recreate the effect but neither of these worked. tl.to(pulse,yoyoEase:Power2.easeOut, repeat:10}) tl.to(pulse,{transformOrigin:"center center", autoAlpha:1, duration:1, scale: 1})