zimbeta

Hi team. I am really hoping this is possible because I've got a fairly complex animation going and I am trying to re-factor it with React. In order to target the individual letters in my SplitText word after my component mounts, can I create Refs in a similar way that a character class is assigned below once the word is split into letter divs? Thanks so much! var tl = new TimelineMax({ }); var splitTitle = new SplitText( title, { type: 'words,chars', position: 'absolute', charsClass: 'letter title-++' }), chars = splitTitle.chars;

Many thanks Jack! I had some leftovers from a previous animation attempt and it was interfering. Now that's I've removed them it seems to work properly.

Hi Greensock gurus. Been struggling with timing this animation properly. It's business data interactive and I'd like the HTML to be updated from a content object but only at certain intervals. Please see my pen. Press button "Step 2" or "Step 3." I want the content of the HTML to update to step 2 description but not until the timeline animation has finished. Why is this onComplete function callback not waiting until the element has stopped moving to change? The idea is the animation will move off the screen or text fade out, then update, then I bring it back in. Any help or just a general idea? Thanks so much Pete

Nevermind I think I've solved it by changing my approach and not splitting my animation into two functions.

Hi, pretty green Greensock user here. This is just a question of function scope inside timeline. I'm hoping to calculate the exact position of a single letter in my SplitText timeline so I can animate it into another phrase. Depending on size of browser window, it needs to be exact. Should the function within my timeline here return "moveLetter" value? When I console log in on the next line it's undefined. Do I need to pass value into my staggerFrom? I know I am missing something basic. Thanks for any help! function title() { var tl = new TimelineMax(); var mySplitText = new SplitText("#title", {type:"words,chars", position: "relative", charsClass:"title-++"}), chars = mySplitText.chars; //an array of all the divs that wrap each character tl.call( function(){ var l8 = $('.title-8') var coords8 = l8[0].getBoundingClientRect(); var left8 = coords8.left; var moveLetter = leftUX - left8; return moveLetter; }) .call( function(){ console.log(moveLetter) }) .staggerFrom(chars, 1, {delay: 0, x: moveLetter, opacity: 0, ease:SteppedEase.easeOut}, 0.06, 0); return tl; }