Jump to content
Search Community

fade images out and then back in again

Guest kariannking
Moderator Tag

Go to solution Solved by Jonathan,

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

Guest kariannking

I use to use GSAP in Flash, but it's been awhile as I've transfered over to javascript and jquery. I'm having trouble with a set of three images where I want to fade them out and then back afterward.

var tl = new TimelineLite();
    tl.add( TweenLite.to(img01, .2, {opacity:0, ease:Linear.easeNone}), TweenLite.to(img02, .2, {opacity:0, ease:Linear.easeNone}), TweenLite.to(img03, .2, {opacity:0, ease:Linear.easeNone}) );
    tl.add( TweenLite.to(img01, .2, {opacity:1, ease:Linear.easeNone}), TweenLite.to(img02, .2, {opacity:1, ease:Linear.easeNone}), TweenLite.to(img03, .2, {opacity:1, ease:Linear.easeNone}) );
//  tl.add( TweenLite.to(img01, .2, {rotation:-10, right:30, ease:Linear.easeNone}) );
//  tl.add( TweenLite.to(img03, .2, {rotation:10, left:30, ease:Linear.easeNone}) );
    
window.onload = function(){
    tl.play();
}

It doesn't work. I can see some fading happening.. but it's as though the first and second .add are happening at the same time. As I have it set up, shouldn't it first finish the first .add and then play the second .add?

 

unrelated: you use to be able to tween the color/tint of images in flash. Can you still do that in the JS version?

Link to comment
Share on other sites

Hi xvkarbear  :)

 

try something like this :

var tl = new TimelineLite()
//tl.add([tween1,tween2]);
// and your selector : by id "#ID" or by class ".className"
tl.add([TweenLite.to("#redBox", .2, {opacity:0, ease:Linear.easeNone}),TweenLite.to("#blueBox", .2, {opacity:0, ease:Linear.easeNone})]);
tl.add([TweenLite.to("#redBox", .2, {opacity:1, ease:Linear.easeNone}),TweenLite.to("#blueBox", .2, {opacity:1, ease:Linear.easeNone})]);
Link to comment
Share on other sites

  • Solution

Hello xvkarbear, and Welcome to the GreenSock Forum!

 

What you can do is store your tweens in a variable instance, and since you are adding more than one tween, dont forget to pass as an array with the square brakets [ ]

var tl = new TimelineLite(),
    tweenImg01 = TweenLite.to(img01, .2, {opacity:0, ease:Linear.easeNone}),
    tweenImg02 = TweenLite.to(img02, .2, {opacity:0, ease:Linear.easeNone},
    tweenImg03 = TweenLite.to(img03, .2, {opacity:0, ease:Linear.easeNone})
    tweenImg01b = TweenLite.to(img01, .2, {opacity:1, ease:Linear.easeNone}),
    tweenImg02b = TweenLite.to(img02, .2, {opacity:1, ease:Linear.easeNone}),
    tweenImg03b = TweenLite.to(img03, .2, {opacity:1, ease:Linear.easeNone});

tl.add( [tweenImg01, tweenImg02, tweenImg03] );
tl.add( [tweenImg01b, tweenImg02b, tweenImg03b] );

window.onload = function(){
    tl.play();
}

See if that works :)

 

First regarding this question:

 

unrelated: you use to be able to tween the color/tint of images in flash. Can you still do that in the JS version?

Have you looked at the ColorProps plugin?

 

Does that help? .. If that doesn't then here is a link to a nice video tut by GreenSock on how to create a codepen demo example.

 

This way we can help you better by code we can edit and test live. Thanks!

 

 

:)

  • Like 2
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...