Jump to content
GreenSock

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

TweenMax.to + Opacity 0?

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.

:)

  • Like 3
Link to comment
Share on other sites

Setting opacity:0 in the CSS works too.

  • Like 1
Link to comment
Share on other sites

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). :)

  • Like 3
Link to comment
Share on other sites

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!!!!

Link to comment
Share on other sites

Setting opacity:0 in the CSS works too.

 

thanks mate!!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×