TweenMax.to + Opacity 0?

[SoL2Squiz 3 Likes (Newbie)]

Hi guys,

 

This is my first attempt on animation using GSAC (basically, I just repeated what the video had)

 

I have a question about starting an element opacity from 0 visibility to 1 at the start of animation. I know I can do a "TweenMax.from"

but I wanted to use "TweenMax.to" instead.

 

 

 

 

Thanks

 

See the Pen jWeMjO by BUroKHUli (@BUroKHUli) on CodePen

[PointC 14,466 Likes (Superhero)]

Hi SoL2Squiz  ,

 

Looks like you're having fun getting started with GSAP. 

 

The easiest way to accomplish a starting opacity of 0 would be to set() your opacity and visibility with autoAlpha:0 and tween to an autoAlpha:1. Your pen could then be written like this:

TweenMax.set(".logo",{autoAlpha:0});
TweenMax.to(".logo", 3, {
  x: 500,
  scale: .8,
  ease: Elastic.easeOut,
  autoAlpha:1,
});

autoAlpha is a combination of visibility and opacity. I personally prefer autoAlpha over opacity because when autoAlpha is set to 0, the visibility is automatically set to hidden for you. That's quite nice as it prevents accidental clicking of elements that have an opacity of 0.

 

Here's some more reading about autoAlpha

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

The set() method is a way for you to set the properties of your target. It's a convenient way to get your elements to the desired starting state before you tween them.

 

More reading about set():

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

 

Hopefully that helps a bit.

 

Welcome aboard and happy tweening.

[ohem 334 Likes (Leader)]

Setting opacity:0 in the CSS works too.

[Acccent 364 Likes (Leader)]

Hey SoL2Squiz,

 

In addition to what @PointC descrbed, you can use .fromTo:

TweenMax.fromTo(".logo", 3, {autoAlpha:0}, {autoAlpha:1});

What it does is let you specify the starting values for an animation (in this example, autoAlpha:0) as well as the end result (autoAlpha:1 here).

[SoL2Squiz 3 Likes (Newbie)]

Thanks a lot!!!!!

[SoL2Squiz 3 Likes (Newbie)]

Hey SoL2Squiz,

 

In addition to what @PointC descrbed, you can use .fromTo:

TweenMax.fromTo(".logo", 3, {autoAlpha:0}, {autoAlpha:1});

What it does is let you specify the starting values for an animation (in this example, autoAlpha:0) as well as the end result (autoAlpha:1 here).

 

 

awesome!!!!

[SoL2Squiz 3 Likes (Newbie)]

Setting opacity:0 in the CSS works too.

 

thanks mate!!