Modified Text Swap - modification not working as expected...

[Tanuki]

HI - day 1 noob here. I modified the text swap demo to add a tween to animate text dropping in from off the page (y:-400):

 

I have an array of 4 text strings that I'm trying to animate (similar to the demo).

 

Issue

- without the code below, the timeline and all tweens work fine.

- with the code below, the first swapText call works as expected (text drops in from off the page), but the other swapText calls seem to start at a net position of -100 and don't (seem to) animate.

 

Relevant Code

 tl.from(targets, { y:-400, duration: 2, delay: 0, ease: "power4.out" }, "<"); 

 

What am I missing?

 

Sorry if my terminology is off - just started using GSAP this PM...

 

Thx!

See the Pen jOmZEpL?editors=0110 by imtanuki (@imtanuki) on CodePen

[GreenSock]

Welcome to GSAP, @IMTanuki! You're in for some fun.

 

You're jumping into the deep end, huh? gsap.registerEffect() is for creating a reusable effect and isn't exactly something I'd recommend beginners dive into, but go for it if you want to  I would generally recommend just getting your head around regular tweens (like gsap.to(), gsap.from(), gsap.fromTo()) and then progress to timelines so that you understand the basics.

 

Anyway, the main issue is that "from()" tweens render their starting values immediately by default because that's almost always what people want. You just need to remember that from() tweens use whatever the CURRENT value is as the END value. So let's say element.y is 0 and then you gsap.from(element, {y: -400}), it will record the current value (0) internally as the destination, and immediately force element.y to -400 and start animating back to 0. Makes sense, right? But...

 

You're creating a bunch of .from() animations on that SAME element (".subtext"). So as soon as you create that first .from() tween, element.y is going to be -400 and it hasn't animated anything yet (no time has elapsed). Therefore when that next .from() is created, it's like "okay, what's the CURRENT element.y? I'll record that as the destination." And at this point it's -400! So your second tween is going to animate element.y from -400 to -400 (no change). See the issue? 

 

The solution is to simply set immediateRender: false on the .from() tweens. See this page for a more thorough explanation: 

 

See the Pen gOWvqNX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I made you Array-based code a bit more flexible by using a .forEach() loop. 

 

I'd also recommend making your .registerEffect() animations more configurable - right now, you hard-coded specific delay and duration values in there but the beauty of .registerEffect() animations is you can make them configurable so that you could, for example, do timeline.swapText(".element", {text: "BLAH", duration: 3, delay: 1}) and have another one with a totally different duration/delay/text. 

 

I hope that clears things up. Hang in there through the learning curve - you'll be glad you did. We hear all the time from people who are blown away with what they can do with GSAP once they spent a little time learning the ropes. You might want to check out the getting started article. If you're into videos, @Carl has an outstanding course at https://www.creativecodingclub.com/bundles/creative-coding-club?ref=44f484 which will have you up and running in no time. 

 

Happy tweening!

 

[Tanuki]

@jack

 

First of all, thx for the super fast reply!

 

Re a good starting point, nothing can be more (needlessly) complex than trying to write nested async (fadein out) functions in JS. I wasted so much time trying to implement the equivalent of GSAP's timeline -  registerEffect is cakewalk compared to nested async functions...

 

Re my initial question - I kind of figured that's what was happening. TBH, I haven't looked at immediateRender vid yet, but I'll take your word for it that it fixes this issue.

 

Re hardcoded - yes, absolutely, parameterized generic functions are my day 2 goal..;>)

 

Re using a forEach loop - I wasn't even sure this was possible because I had so many problems using forEach in vanilla JS when there were multiple child functions (within forEach), each with setInterval callbacks.  Clearly, one of the things GSAP does really well is wrapping all the async logic in declarative statements...

 

So, you've answered a lot of questions that I was about to ask - many thx! 

[GreenSock]

20 minutes ago, IMTanuki said:

Re using a forEach loop - I wasn't even sure this was possible because I had so many problems using forEach in vanilla JS when there were multiple child functions (within forEach), each with setInterval callbacks.  Clearly, one of the things GSAP does really well is wrapping all the async logic in declarative statements...

Oh goodness, yes, if you got to that point where you were trying to use setInterval() callbacks and basically build something like a GSAP timeline in vanilla JS, you're gonna really appreciate how much simpler GSAP is going to make your life. We've already solved a ton of "gotcha" issues that people smash into when they try to build their own animation system. I could write 3 pages about this stuff (and bore everyone). 

 

Have fun!