Jump to content
Search Community

controlling timeline within function

dominium 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

Hello,

 

I should maybe do a codepen but I have a lot of code. I already tried all the exemple in the forum and none are working. Maybe missing something.

 

I know I can do this without the function method but the pros use this for some more reliability, I think!

 

I basically have 3 timeline that is returned within 3 different function. On on intro, one when intro is completetl and another should start when the user scroll down. I want to kill the introtl and pause the completetl on the starttl or kill introtl and the completetl. Doesn't matter the point is I can't figure how to be able to control the TL within the function.

 

ALready tried this one by creating a master timeline.

 

function pause(){
    var tl = new TimelineMax({paused: true})
        .add(introtl())
        .add(completetl());
};
var introcomplete = pause();

 

 

pause();

 

Should said that i am using scrollmagic to target the timeline.

 

Please all the help i can have on this simple task for a pro.

 

I'm still a one year old baby in the tween/html/css world.

 

Thanks so much

Link to comment
Share on other sites

Sorry, I read that question a few times and I'm confused about what you're asking. As you mentioned, you should probably create a CodePen demo. We don't need your entire project. Just something simple that demonstrates the question/problem would be best. We do keep the focus on GSAP so if this is a ScrollMagic question there are also other resources available for those problems/questions.  

 

Here's a basic example of creating timelines in functions and then adding them to a master timeline.

 

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

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

I tried looking through your pen, but you've got a lot going on in there and I'm still not sure what you're asking. I'll give you a few pieces of advice that I think should help though.

 

Building timelines in functions is usually the best choice if you're making a larger project and need to build it in sections for nesting in a master timeline. You can then move sections around the master quite easily. You can also tween between labels of that master for lots of control. 

 

It looks to me like you've only got a couple of timelines and they need to operate independently based on scroll position so I'd say building them in functions for this project is not necessary. In fact I think it's looking a bit over-complicated for what you want to happen. You also don't need to pause timelines when using ScrollMagic because it will trigger the timelines when you hit the triggerHooks. You can also reverse the timeline when scrolling back up if you like.

 

I'd recommend taking a look at the ScrollMagic documentation and examples.

 

http://scrollmagic.io/docs/index.html

http://scrollmagic.io/examples/

 

You can also post ScrollMagic related questions here:

 

https://github.com/janpaepke/ScrollMagic/issues

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

Yes thanks,

 

I already saw every example of scrollmagic. I will have more section on the site. this is only the intro.

 

It's already working Like I want without using the function. But using it seem to get the code more concise.

 

I still have a lot to learn. I just want to be able to use the property of gsap with a timeline within a function. But m just complicated things. I want this site to run smoothly because it will be overloaded with action!

 

love your api and it's gsap I need to learn not scrollmagic(Only for triggering)

 

This is the no smooth version of what I want to accomplish in a more pro ways using function.

http://ericamedium.com/old/index7.html

hope this is not considering like spam, will edit it after

 

Thanks so much and I will try to figure out all the gsap code example I gather from all over to manage to do a pure gsap website piece of art :)

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...