Jump to content
Search Community

TweenMax.to + Opacity 0?

SoL2Squiz test
Moderator Tag

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

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.
×
×
  • Create New...