Jump to content
Search Community
TradingBo 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 !

 

Finished our first GSAP Animation recently (massive thanks to @OSUBlake and @Carl) and just revisiting to tweak a few things.

 

Having trouble with controlling sub timelines contained within functions, via a master timeline.

 

Could anyone possibly let me know what I'm missing here?

 

I suspect it's something to do with returning functions to the master timeline and not the timelines contained within them,

therefore they can't be controlled at the top level.

 

Have tried applying support given here and here  but for the life of me can't get it to work as expected..

 

I'm trying to remove the Flutter() function at mobile breakpoint, restart the master timeline with just Sphere() then add flutter() again and restart when sized back up past 420px.

 

Thanks! 

 

See the Pen dgpzRY by EasterIslandMedia (@EasterIslandMedia) on CodePen

 

 

See the Pen dgpzRY by EasterIslandMedia (@EasterIslandMedia) on CodePen

Link to comment
Share on other sites

Hi @TradingBo

 

You don't have a master timeline, at least not in the sense that you think you do. Your functions are only returning the very last timeline created in a loop. You would need to add every timeline created in a loop to an array, and return that array.

 

But don't be like this dude when it comes to master timelines. I see far too many people waste far too much time building master timelines that serve no actual purpose.

 

b8MR57Q.jpg

 

 

See if this helps out.

 

See the Pen XxjZgd by osublake (@osublake) on CodePen

 

 

 

  • Like 3
  • Haha 2
Link to comment
Share on other sites

Thanks again OSU. That's amazing, appreciate the master TL wisdom.

 

I wasn't entirely set on where the animation might go from here ( adding, reverse, timeScale and Pause/Play functions etc ).  From what I've read creating a master timeline and manipulating sub TLs at the top level was advised to be the best way of keeping code modular and making life easier down the road.

 

I've still a hell of a lot to learn, duly noted that it's only worth it in some cases!

 

Also see where I was going wrong not returning the sub TL's as an array thanks for the heads up.

 

P.s Any idea where I might find more info on MediaQueryWatchers ? Can't find anything about them on W3 , Is that current best practice

Link to comment
Share on other sites

16 hours ago, TradingBo said:

I wasn't entirely set on where the animation might go from here ( adding, reverse, timeScale and Pause/Play functions etc ).  From what I've read creating a master timeline and manipulating sub TLs at the top level was advised to be the best way of keeping code modular and making life easier down the road.

 

It depends on what you're doing. Animations that repeat can be difficult to manipulate from a master timeline, like here.

 

If you need play/pause, you can do this.

 

function pause() {
        
  for (var i = 0; i < myAnimations.length; i++) {
    myAnimations[i].pause();
  }
}
  
function play() {
        
  for (var i = 0; i < myAnimations.length; i++) {
    myAnimations[i].play();
  }
}

 

 

16 hours ago, TradingBo said:

I've still a hell of a lot to learn

 

Check out this article. Lot's of good stuff in there, like tweening a tween (#1) and exportRoot (#6).

https://medium.com/net-magazine/7-hidden-gems-of-the-greensock-animation-platform-4fb71389f6ca

https://greensock.com/learning-gems

 

 

 

16 hours ago, TradingBo said:

P.s Any idea where I might find more info on MediaQueryWatchers ? Can't find anything about them on W3 , Is that current best practice

 

MDN is kind of like the official documentation for web related stuff. I'm sure there are more in-depth tutorials out there, but this is a good start.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries

https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList

https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryListEvent

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

 

  • Like 6
Link to comment
Share on other sites

Thanks @OSUblake!

 

I realise this is more of a general JS thread than specifically GSAP at this point so I appreciate you going above and beyond.

 

Have to say the levels of support on this forum and on GreenSock in general are simply phenomenal. As a beginner it's incredibly encouraging to see you guys care about users (of all levels) and is making getting to grips with GSAP completely awesome/rewarding :) 

 

Will do the reading and post final animation when it's wrapped up. Thanks again!

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