y or x values not animating

[harp]

Hello,

I'm trying to get each string character to come up and fade-in. The fade-in is working fine but the coming up doesn't work, here is my full code:

 

import $ from 'jquery';
import gsap from 'greensock';

/*
*
*   OBJECTIVE: Turn string into separate chars.
*              After doing so animate each char in one by one.
*
*              Tasks: generateChars
*              1. turn given string into separate chars, loop through array: place each char into its own span,
*                 give it a class of 'char-1 char-2 and etc, and then place into #company-name
*
*              Tasks: animateChars
*              1. used returned value - chars from generateChars(), create tl object, set up chars - y: -10%,
*                 opacity: 0, autoAlpha: 0
*              2. animate each char with staggerTo method, bring the each char up(y:0) and fade-in by .5s and .2s apart
*
*
* */

class LetterAnimations{
    constructor(string){

        this.animateChars('battle of the suits');

    }
    generateChars(string){

        let convertedToChars = string.split(''),
            companyName      = document.querySelector('#company-name'),
            char,
            chars            = [];

            for(let i = 0; i < convertedToChars.length; i++){
                char = document.createElement('span');
                char.innerText = convertedToChars[i];
                char.classList.add('char-heading-primary');
                chars.push(char);
                companyName.append(char);
            }

            return chars;


    }
    animateChars(string){

        let chars = this.generateChars(string),
            tl    = new TimelineLite();

            tl.set(chars, {opacity: 0, autoAlpha: 0, y: -100});

        tl.staggerTo(chars, 2, {opacity: 1, autoAlpha: 1, y: 0, ease: Power4.easeInOut}, '.1')

    }
};

// export default LetterAnimations;

new LetterAnimations('battle of the suits');

opacity 0 and autoAlpha do their job but y: -100 doesn't move a muscle..
Does the parent need to be position relative and the char(childern) need to be position absolute for this to work?

Thank you.

[GreenSock]

Some browsers won't honor transforms on <span> elements (well, anything with display:inline I believe). That's why SplitText uses <divs> by default You might want to check out https://greensock.com/splittext/ (though it may be overkill for what you're doing, and it is only for Club GreenSock members).  

 

So again, the issue is applying transforms to inline elements (spans). Once you fix that, it should work great. 

[harp]

okay okay thanks! Spans are usually inline but I changed it to inline-block and it worked fine. Thank you. I can also use divs but even then have to switch to inline-block if I want side by side or.. display flex with flex-direction row.. that will work too.

Thank you!

Hope you are having a great day!