jch
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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.
Fading in/out slides one-by-one and simultaneously using TimelineLite
in GSAP
Posted
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.