Jump to content
Search Community

Control a timeline that is inside a function

ApriSix test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

We have a "product tour" that allows visitors to step through an Admin panel. Right now we have each animation in a function that gets called when the user visits that panel and starts playing that tour. There are a total of 3 tours on the page that are in tabs/panel. We can get them to play when the user click the tab by calling the animation function tour1TLm, and then pause on the first step using addPause() in the tl but can not get them to resume with a click of a button or hotspot. You can see me code pen of a simple example of what we want to do. 

See the Pen VwQmdyW by dtlevin (@dtlevin) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @ApriSix

 

Welcome to the forum. :)

 

You're not actually playing that timeline with the play button. You're just calling the function that returns the timeline which is not in a paused state so it immediately plays. I'd recommend assigning that returned timeline to a variable and then you can control it with all the available methods.

 

Something like this:

See the Pen 9a55e829614b45f31e20adf3e04957bd by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening and welcome aboard.

:)

  • Like 2
Link to comment
Share on other sites

that is exactly what I was looking for. Thank you! I just moved all the TL out of function and that also worked but I might still use this. Is there any reason keeping them in functions is better? Thank you again 

Link to comment
Share on other sites

Creating timelines in functions has advantages. If you're creating multiple similar timelines, you can feed some arguments into the function and it'll kick back all the timelines you want. Another scenario is a large timeline that you want to keep modular. Creating each section in a function and returning that child timeline to a parent makes updates super easy.

 

So, in your case, if the three product tour timelines are similar, you can use a single function to create all of them. If they're all unique, then I'd say just create them like a normal timeline outside of a function. Here's a wonderful article explaining things in more depth.

https://css-tricks.com/tips-for-writing-animation-code-efficiently/

 

Hopefully that makes sense. Happy tweening.

:)

  • Like 2
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...