Jump to content


cannot animate Opacity/autoAlpha

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 cannot manage to animate the opacity of 2 dynamically loaded images: The console log in the last line is showing correctly, and Tweenlite.js has been called in the <head>


var _img1 = document.getElementById('the_image');
var _img2 = document.getElementById('the_sash');
<!-- load 2 images -->
if (document.images) {
var newImg1 = new Image();
var newImg2 = new Image();
newImg1.src = flight_image;
newImg2.src = flight_sash;
<!-- assign to DIV -->
_img1.appendChild(newImg1); // main image
_img2.appendChild(newImg2); // sash
_img1.style.opacity = 0;
_img2.style.opacity = 0;
function go_animate(){
<!-- animate elements -->
TweenLite.to(_img1, 1, {autoAlpha:1, display:"block"}); //main image IN
TweenLite.to(_img2, 0.5, {autoAlpha:1, display:"block", delay:1}); //sash IN
TweenLite.to(_img1, 0.5, {autoAlpha:0, display:"none", delay:8}); //main image OUT
TweenLite.to(_img2, 0.25, {autoAlpha:0, display:"none", delay:3}); //sash OUT
console.log("gets here 5");
can anyone see what I've done wrong?
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


I can only guess that perhaps you are not loading the CSSPlugin which handles the actual getting and setting of the css properties that are being animated.


Please ensure that BOTH TweenLite and TweenMax are being loaded:


More info on why the CSSPlugin is important can be found in out Getting Started Guide.
Often mere snippets of JavaScript do not tell the whole story of what is going on which is why we recommend that you create a simple CodePen demo that clearly replicates the issue.
You can learn more about why and how to do that here: http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/
If my suggestion doesn't work, please create a very basic CodePen demo, and I'm sure we will be able to help you out.
  • Like 1
Link to comment
Share on other sites

CSSPlugin - that was it. 


Thank you.

Link to comment
Share on other sites

No problem. Happy Tweening!

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.