Alpha value of timelines

[Jonny]

Good day,

 

i'm sorry, codepen doesn't seem to be working for me for some reason, i think i explain clearly enough though.

 

 

I have a timeline consisting of text that i would to appear, then disappear, followed by more text doing the same thing (see example below):

 

var txtTimeline = new TimelineMax();

 

txtTimeline.to(header1, 1, {alpha:1. delay:1});

txtTimeline.to(header1, 1, {alpha:0, delay:1.5});

txtTimeline.to(header2, 1, {alpha:1., delay:1});

txtTimeline.to(header2, 1, {alpha:0, delay:1.5});

 

In my code, this is accompanied by a video, when i hover on the video, i have an event listener that changes the alpha of the video to 0;

I want to change the alpha of anything in the timeline to 0 as well.

 

Question: Is there a way to change alpha values of a timeline, without having to change each element within the timeline individually?

 

I hope this makes sense, let me know if there is anything else i can assist with.

 

thanks in advance, 

 

J  

 

[Diaco]

Hi Jonny 

 

pls try

 

autoAlpha: 0 // = visibility:hidden; opacity: 0;

 

or

 

opacity: 0 // =  opacity: 0;

[Jonathan]

Hello Jonny, Welcome to the GreenSock Forum!

 

To add to Diaco.AW's advice..

 

Since you are using Timelinemax / TimelineLite.. You can move all your delay values to the position parameter.

:

.to( target, duration, vars, position )

:

The following video tuts by GreenSocks's Mighty Carl can help explain the position parameter and sequencing your tweens.

 

Understanding the Position Parameter

How to sequence your tweens.

 

Also if you are still having issues.. here is a nice video tut by GreenSock on How to create a codepen demo example.

 

This way we can help you better by seeing your code live and in context.

 

I hope this helps!

[Jonny]

Oh hi guys, thanks for the speedy answers.

 

I don't think they match exactly what i want, i have managed to make a codepen - i tihnk i was inputting wrong library before, anyway....

 

for clarity, i'm saying here is my timeline, and at a certain point/event, i want everything in that timeline to become invisible, so i try tweening the timeline to an alpha of 0.

 

This doesn't work, I could try tweening the alphas of all elements in the timline to 0, but these seems inefficient,

 

If you see my codepen below, it should clear things up, thanks again for your help, much appreciated....

 

 

See the Pen qEyzWv by anon (@anon) on CodePen

[Diaco]

pls check this out :

 

See the Pen QwBXpO by MAW (@MAW) on CodePen

 

[Carl]

A TimelineLite is a JavaScript object. It is not something that is visible that has display properties like alpha or opacity. 

 

The easiest way to do what you want is probably just to hide the #container that contains all those elements (or wrap all the elements in another div if you want container to still be visible).

This way, when you resume() the timeline you do not have to worry about making each individual visible. You just tween the "#container" back to opacity:1

 

http://codepen.io/GreenSock/pen/MYBMpB

[Jonny]

Diaco,

Thanks for your efforts in creating that function.

At my ability and knowledge of Javascript, that's a little too advanced for me, and more convoluted than what I need.

 

Carl,

 

I had thought of this, but just wanted to know if i could control the alpha of a timeline etc, - i just wanted to minimize the amount of additional divs, containers etc that i would need to include in my code.

Having my answer, I shall indeed now just wrap the text in a holding container, as this is the most straightforward way I believe.

 

Thanks to all for the help, your time, and sharing of knowledge.

 

J