Jump to content


Opacity goes up to 100

Moderator Tag

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

I created simple tween:


my_timeline.from($("#obj"), 2, {opacity: 0 }, 0);


But opacity is going from 0 to 100, instead of from 0 to 1. How can I fix it?  

Link to comment
Share on other sites

Hello Oleg,


Yep I'm not seeing it too. Here is an example of a element animating opacity in and out.. I am also outputting the progress() using the special property onUpdate callback of the tween.


My example:

See the Pen kexst by jonathan (@jonathan) on CodePen


You can see how it is not using a whole number, but is a floating point number.  (i.e. .. 0.08798978). Also when i look in the browser DOM inspector I see that same floating point number animating on the elements style opacity value.

  • Do you have an example of the 0 to 100 you are seeing?

I am unable to reproduce it...


If possible can you create a codepen example so we can see what you are seeing to better help you?


Here is a nice video tut by GreenSock on How to create a codepen example demo.


Thanks :)

Link to comment
Share on other sites

I am sorry, I am an idiot, I applied opacity 100 to the object before adding animations

Link to comment
Share on other sites

I was about to ask about that. Glad you figured it out :)

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.