updating variable via loop

[ericshew]

Hi there,

 

I'm trying to create a timeline that switches out a headline through an animation. In the case of the codepens below, I just want it to run through hello, how are you, so long.

 

The problem is that I'm running into issues setting variables. 

 

Here is my first attempt to do this. It involved calling a function after the loop is completed.

 

 

 

See the Pen Jrjrgg by ericshew (@ericshew) on CodePen

 

 

Here is my second, which involves doing a series of actions within the loop itself.

 

See the Pen JrjOKo by ericshew (@ericshew) on CodePen

 

Would welcome any help on this one. Thank you in advance.

See the Pen Jrjrgg by ericshew (@ericshew) on CodePen

[Carl]

Thanks for the demos. The trouble with your approach is that the timeline is only created once and the value it gets for the text when it first executes is recorded and re-used each time it plays back. The timeline has no idea that you are changing the value of index and it isn't ever trying to re-evaluate what textArray[index] is. That expression only gets evaluated when the timeline is created. 

 

From what I understand of the end result you are going for I would suggest looping through the array and for each word in the array add a set() and to() tween to the timeline so that each word can have its own animations in the timeline. You'll have great advantages in that the animation can be paused, reversed, sped up or slowed down.

 

See if this works for you

var 
  text = jQuery("h1"),
  textArray = ['hello', 'how are you', 'so long']
  tl = new TimelineMax({repeat: -1});
  
textArray.forEach(function(element, index) {
  console.log(index, element)
   tl.set(text, {text:textArray[index]})
      .to(text, 1, {opacity:1, repeat:1, yoyo:true, repeatDelay:0.5}) 
});

 

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

 

[Mike1988]

Hi Oracles,

 

What I am trying to do is a translation effect, once you click on the botton the animation will reverse back and will come up again with the new text. But I have two problems, the variables are not being updated on both of them. 

 

Problem A;   width:textWidth is not getting updated

 

let introTl = gsap.timeline();

introTl.to('.box', {duration: 1, width: textWidth, delay: 0.5, ease: 'power4.inOut'})

.from('.hi', {duration: 1, y:'7vw', ease:'power3.out', onComplete: ()=>{masterTl.play(); cursor.play()}}).from('p', {opacity:0})

 

Problem B;   text: word is not getting updated

let masterTl = gsap.timeline({repeat:-1}).pause();

words.forEach(word => {

    let wordTl = gsap.timeline({yoyo:true, repeat:1, repeatDelay:1});

    wordTl.to('.text', {duration:1, text: word})

    masterTl.add(wordTl)

})

 

See the Pen poeNjva by mayconcabral (@mayconcabral) on CodePen

 

 

 

 

 

 

[Mike1988]

Hi Oracles,

 

The last post I said “update the variables”,  sorry for that, actually is not variables but properties! 


At the problem B

I tried to kill masterTl with the method .kill( ), then I made wordTl globally to be able to kill it as well. RESULT: I could update the values!!! But the old values still coming up, now every time when I click on those buttons it is coming with a new and old values, it is accumulating. 

 

At the problem A

Using the method .kill( ) it didn’t  work. I tried to apply the same tactical plan as I did with problem B. RESULT: Everything disappeared… 

 

Down below is the new code with .kill( ) method.

 

See the Pen wvJojYO by mayconcabral (@mayconcabral) on CodePen

 

The solution I am look for: When the button is clicked, the animation will reverse and it will come up again with the new text.

 

[OSUblake]

Hi @Mikemcfly

 

Can you create a new topic instead of replying to an old one? Thanks!

 

But I'll just quickly go over some of your issues.

 

11 hours ago, Mikemcfly said:

The last post I said “update the variables”,  sorry for that, actually is not variables but properties! 

 

Properties aren't dynamic like that. It's impossible for gsap to detect when you change the textWidth here.

introTl.to('.box', {duration: 1, width: textWidth, delay: 0.5, ease: 'power4.inOut'})

 

If the textWidth changes, you should recreate that animation. Using functions to create all your animations can greatly simplify this.

 

11 hours ago, Mikemcfly said:

I tried to kill masterTl with the method .kill( ), then I made wordTl globally to be able to kill it as well

 

Kill doesn't reset the timeline. It's usually best to do something like this if you want to revert everything.

tl.progress(0).kill();

tl = gsap.timeline();

// or clear if you want to reuse it
tl.progress(0).clear();
tl.to(...);

 

And you have some setTimeouts that could probably led to some problems. 

 

Here's how I would approach this. I would not have a some master timeline. I would create all related animations inside functions. That function returns a function to cleanup the current animation when it's time for a new one to play.

 

See the Pen 855770d485d460ec9280da133ec86d9a by osublake (@osublake) on CodePen

 

 

 

[mikel]

Hey,

 

Just another option

 

See the Pen gOmgpZO by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[Mike1988]

Amazing! Thank you @mikel and  @OSUblake ! You guys are the best!!!