Just_Jack

How would I create a number flip animation like the example that goes from 1-4?

Hey! Is there a way I can make autoAlpha go from 0-1 and then to .7 and back to 1 within the same duration?

Hey folks! Does anyone have an example of a left to right image reveal effect using GSAP?

I'm trying to animate in a few circles and have them fade in from left to right one at a time. So far I've written the following: gsap.to(".circle1", { duration: 2, autoAlpha:1 }); gsap.to(".circle2", { duration: 2, autoAlpha:1 }); gsap.to(".circle3", { duration: 2, autoAlpha:1 }); gsap.to(".circle4", { duration: 2, autoAlpha:1 }); gsap.to(".circle5", { duration: 2, autoAlpha:1 }); gsap.to(".circle6", { duration: 2, autoAlpha:1 }); gsap.to(".circle7", { duration: 2, autoAlpha: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?

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!

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!

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.

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?

Thank you @ZachSaucier

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})