jch

Hi, i added a codepen here: http://codepen.io/anon/pen/wGrMaV 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.

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.