Making autoAlpha go from 0-1 and then to .7

[Just_Jack]

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?

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

[alig01]

Hey,

 

it's a little hard to understand the question with so little context. But my guess is that you're probably trying to animate something in a sequence. For this, I would recommend using a timeline.

 

Just paste the following into your codepen (I used autoAlpha: 0.5 to see the transparency better, since 0.7 is just not enough for text for my taste)

let tl = gsap.timeline();
tl.to("h1", { autoAlpha: 1, duration: 2 })
  .to("h1", { autoAlpha: 0.5, duration: 2 })
  .to("h1", { autoAlpha: 1, duration: 2 });

and this styling to your css

h1 {
  visibility: hidden;
}

 

I hope I have understood the question correctly and could be helpful.

[Carl]

Yes, building a sequence as @alig01 suggested is what I would also recommend to anyone starting out.

 

As you get more comfortable with GSAP you may want to look into CustomEase

 

See the Pen QWzyZXp by snorkltv (@snorkltv) on CodePen

 

I added scale as a property too as the change to opacity:0.7 is fairly subtle

 

Click here to see the ease graph

 

 

 

Also if you want a single-tween solution you could explore CSS Keyframes in GSAP