Jump to content
GreenSock

jch

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

Moderator Tag

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

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.

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 4
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.
×