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.
