Jump to content

Make a Tween Accessible Outside of a Function

Recommended Posts


Is there any way to make a timeline that is inside a function accessible outside of it?  I have a short animation sequence used in different places on a site. I'd  like to wrap the timeline in a function, but the problem is I'm also using scroll Magic. Thus the setTween method of scrollMagic needs you to pass the name of the tween in as a parameter.  I tried using return with the timeline name (as return myAnimation) at the end of the function, but this didn't work.


I've set up a simplified example codepen (link given above and minus the scrollMagic)  to make it easier to illustrate any solution.

I'm thinking there must be a way to make a timeline accessible outside of a function?

Any help would be amazing.



See the Pen bRzjWX by emilychews (@emilychews) on CodePen

Share this post

Link to post
Share on other sites

Hi @emilychews :)


I think you should be able to return the timeline from the function and feed that to ScrollMagic. Here's a quick example:


See the Pen OgdYPj by PointC (@PointC) on CodePen

Hopefully that helps. Happy tweening.


  • Like 5

Share this post

Link to post
Share on other sites

Thanks Point C.  I was returning the timeline and placing this in the setTween method, as opposed to putting the function inside the setTween method.


  • Like 1

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.