Jump to content
Search Community

updating variable via timeline loop

ericshew test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

 

Thanks for the demos. The trouble with those approaches is that the value of textArray[index] is only evaluated once when the timeline is first created. When the timeline repeats it does not try to get a new value. It has no idea you changed the value of index. It just uses the value you gave it when the timeline was created.

 

The way I understand it, your best solution is to just loop through the array and add a set() and to() tween for each word to the timeline. The set() will change the text and the to() will fade it in and out. With all the animation code for each word in the timeline you will be able to play(), pause(), reverse() the timeline any time you want.

 

 

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

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...