Fading in/out slides one-by-one and simultaneously using TimelineLite

[jch]

Hi all, I just got set up with this project and I am not familiar with GSAP at all. So far I can get all of my elements to fade in properly from the left, but I can't get them to fade out to the right. I've tried alternating "Froms" and "Tos" (second block of code below) and it does not seem to work as I would intuit. Also, can anyone tell me how I can get two elements on this timeline to slide in at the same time? It's a tight deadline, so any advice would help. I tried looking around all day but I just am so unfamiliar with this script. Also: I can't use jQuery.

 

Current code:

 

var slide3 = document.getElementsByClassName("slide3");
var slide4 = document.getElementsByClassName("slide4");
var slide5a = document.getElementsByClassName("slide5a");
var slide5b = document.getElementsByClassName("slide5b");
var tl = new TimelineLite();

tl.from(slide3, 5, {x: '+=40', autoAlpha: 0, ease:Power4.easeIn})
  .from(slide4, 5, {x: '+=40', autoAlpha: 0, ease:Power4.easeIn})
  .from(slide5a, 5, {x: '+=40', autoAlpha: 0, ease:Power4.easeIn})
  .from(slide5b, 5, {x: '+=40', autoAlpha: 0, ease:Power4.easeIn})

Code I tried earlier:

 

tl.from(slide3, 5, {x: '+=40', autoAlpha: 0, ease:Power4.easeIn})
  .to(slide3, 5, {x: '-=40', autoAlpha: 0, ease:Power4.easeOut})
  .from(slide4, 5, {x: '+=40', autoAlpha: 0, ease:Power4.easeIn})
  .to(slide4, 5, {x: '-=40', autoAlpha: 0, ease:Power4.easeOut})
  .from(slide5a, 5, {x: '+=40', autoAlpha: 0, ease:Power4.easeIn})
  .from(slide5b, 5, {x: '+=40', autoAlpha: 0, ease:Power4.easeIn});
  .to(slide5a, 5, {x: '-=40', autoAlpha: 0, ease:Power4.easeOut})
  .to(slide5b, 5, {x: '-=40', autoAlpha: 0, ease:Power4.easeOut});

Thanks for any assistance.

 

[Shaun Gorneau]

If you could put this in a codepen, it would help tremendously. But, from what I can gather, maybe this will help you

 

See the Pen KzXdyj by sgorneau (@sgorneau) on CodePen

[jch]

Hi, i added a codepen here: 

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

 

You can see what I am trying to do in my comments. I am getting close, but any help would be appreciated.

 

I want the green and yellow blocks to leave at the same time, and later on in the script I will want two blocks to enter at the same time.

[Shaun Gorneau]

You'll want to look at position parameters and labels ... here is a codepen demonstrating how that can work

 

See the Pen reGxem?editors=0100 by sgorneau (@sgorneau) on CodePen

 

Here is a more in depth look at position parameters and labels

 

http://greensock.com/position-parameter

 

Also ... I set a timescale value on the timeline just to get through it quicker to see what is happening.