GSAP broken timelines

Question

i do some basic mistake in my code, please look to my codepen. You will see in result title/subtitle than empty hole and at the end two closing links. But I wanted to have visible some form/marketing stuff which i call .js-main-boxies and hidden divs with classes .js-cta-form1 and .js-cta-form2. My timelines are paused by default, so question is why I see broken version and not correct one? pen is without CSS so problem can not be in that. When you remove timelines tlMeetingFormClose and tlOnlineFormClose it works, but of course closing functions not.

Interesting is that when you click on "form 1 close", than click on "click 1" you will see posibility of clicking to "form 1 close", but it is not working. Any help or advice appreciated thx

mycodepen problematic timelines

tlMeetingFormClose and tlOnlineFormClose

Answer 1

It was a small issue with your code. When you use fromTo in your timelines, the from values are giving to your elements. So when you say:

tlMeetingFormClose
        .fromTo(ctaForm1, 0.8, { autoAlpha: 1, xPercent: '0' }, { autoAlpha: 0, xPercent: '-50', display: 'none', ease: Power2.easeOut })
        .set(mainBoxies, {display: 'block'})
        .fromTo(mainBoxies, 0.8, { autoAlpha: 0, xPercent: '-50' }, { autoAlpha: 1, xPercent: '0', ease: Power2.easeOut });

    tlOnlineFormClose
        .fromTo(ctaForm2, 0.8, { autoAlpha: 1, xPercent: '0' }, { autoAlpha: 0, xPercent: '-50', display: 'none', ease: Power2.easeOut })
        .set(mainBoxies, {display: 'block'})
        .fromTo(mainBoxies, 0.8, { autoAlpha: 0, xPercent: '-50' }, { autoAlpha: 1, xPercent: '0', ease: Power2.easeOut });

then greensock applies autoAlpha 0 and xpercent -50 to mainBoxies. You only need to use To and then give the final position you want then to be in, because this timeline will run only when the mainBoxes are already closed.

When you write the following, everything will work just fine.

    tlMeetingFormClose
        .fromTo(ctaForm1, 0.8, { autoAlpha: 1, xPercent: '0' }, { autoAlpha: 0, xPercent: '-50', display: 'none', ease: Power2.easeOut })
        .set(mainBoxies, {display: 'block'})
        .to(mainBoxies, 0.8, { autoAlpha: 1, xPercent: '0', ease: Power2.easeOut });

    tlOnlineFormClose
        .fromTo(ctaForm2, 0.8, { autoAlpha: 1, xPercent: '0' }, { autoAlpha: 0, xPercent: '-50', display: 'none', ease: Power2.easeOut })
        .set(mainBoxies, {display: 'block'})
        .to(mainBoxies, 0.8, { autoAlpha: 1, xPercent: '0', ease: Power2.easeOut });

I hope the end result is what you expected. If not, then do let me know.