Jump to content
Search Community

Lloydie

Members

  • Posts

    2

  • Joined

  • Last visited

 Content Type 

Posts posted by Lloydie

    cannot animate Opacity/autoAlpha

    in GSAP

    Posted

    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;
     
    go_animate();
    }
     
    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?
×
×
  • Create New...