Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Carl last won the day on May 28

Carl had the most liked content!

Carl

Moderators
  • Content Count

    9,409
  • Joined

  • Last visited

  • Days Won

    534

Everything posted by Carl

  1. This is great. What a fantastic design to bring to life! There are some nice subtleties that work very well. I don't think there's a better way to learn than to be tinkering on something like this. It makes me VERY happy to see that a student of mine can do this stuff in such little time! Great job! - but also KEEP going!
  2. What do you mean the stagger is slow? It's up to you to adjust the timing. https://codepen.io/snorkltv/pen/JjWYjxa?editors=1010 Also, for something like this there is no need to have a stagger and a separate callback you can do everything in a timeline https://codepen.io/snorkltv/pen/GRWpRLR?editors=1010
  3. noticed an issue with my demo after posting. should work fine now. sorry for any confusion.
  4. Hi @uarreghini, if you want to use stagers with callbacks in GSAP 3 you should use the stagger object as shown below https://codepen.io/snorkltv/pen/BaWNbwa?editors=1111 Here's a video from GSAP 3 Beyond the Basics showing how it can be configured for repeats. Using the stagger object for callbacks for each target is similar as shown in my demo above. If you need more help understanding callbacks and scope in GSAP 3 this video should also help If you need more help please provide a minimal demo.
  5. Super-duper, @akapowl what a great explanation and demo!
  6. No worries, glad you got it working. I'm well aware of the "fun" of client requests, rushing to change everything, and learning at the same time. I'm sure it will all click once you've had time to clear your head and perhaps have a little more breathing room on the next project.
  7. Glad to hear you are a Coding Club member and are enjoying the courses! Not sure how far you got but in GSAP 3 Beyond the Basics but I teach how to build this "fairly advanced" banner using functions that return timelines from the ground up https://codepen.io/snorkltv/pen/BaoZKJN However, you're right I should have a lesson on the whole "repeat x amount of times with custom ending". FWIW I've been thinking of a course just on banners too. thx for the suggestion! -- Great to see you are trying, but I'm firm in my belief that the issue
  8. oh and add(fadeOut()) // adds the the timeline that fadeOut creates and returns to the main timeline add(fadeOut) // calls the function fadeOut() creating a timeline that does not get added to the main timeline
  9. you'll really have to create a minimal demo so that I can see what is going on. you have the ability to see ALL your code AND it running in a browser. All we can do is guess at code snippets and what you might be doing wrong as you experiment. a minimal demo does not have to be anything fancy. just a few elements and animations. Feel free to edit this demo that shows how something like this should work. you'll note the animation plays through once, fades out and then stops the second time before fading out https://codepen.io/snorkltv/pen/qBrBWpK
  10. glad to see @akapowl's excellent advice helped. the core of this issue is most likely related to the immediateRender property on from() and fromTo() tweens (as addressed in the common mistakes article) the video in this article below goes into more detail on why immediateRender is true by default and sometimes problematic. Although it uses the older GSAP syntax the same concept applies to what you are doing with GSAP 3 and nested timelines. There is a new immediateRender video on the way soon.
  11. keep your fade out code separate from Tail so that you can optionally play that part. create a variable to keep track of how many times the timeline plays, call a function BEFORE the fade that will check if you have played enough times. something like: const maxCount = 3 const count = 0 main_timeline.add(Head) .add(Body) .add(Tail) .call(checkPlayCount) .add(Fade) function checkPlayCount() { count++ if (count == maxCount) { main_timeline.pause() } } if count is less than maxCount then the tail section will play straight through the fade. it's mu
  12. I think this should do what you want https://codepen.io/snorkltv/pen/ExZqKGr
  13. background() is a function that creates and returns a new timeline each time it is called when you build your timeline you are calling background() FOUR times with this code master .add(background().tweenTo(background().duration())) .addPause(); menuOpened = master.duration(); master .add(background().tweenFromTo(background().duration(), 0)); please add console.log("create a new timeline") to your background() function as a test. You'll see it fires 4 times. I would not recommend mixing these two-method (functions that retu
  14. yes, new lessons go out every Wednesday and enrolled students get an email notification. be sure to check your spam folder
  15. Hi @zzkevinlim I admire your ingenuity and since you are a Club GreenSock member already I'm happy to extend a little offer to you. You can grab a Single User Lifetime membership for only $89 (only 20 bucks more than 1 year) Just choose the "lifetime + friend" plan and use code shiny at checkout to take $30 off the $119 price. When I see that code used I'll know not to issue a free friend coupon. This coupon will only remain active through Wednesday of this week for you or anyone who happens to stumble through these parts.
  16. Carl

    GSDevTools chapters

    I would probably just place the addPause() at labels and then work with the .labels object rough demo https://codepen.io/snorkltv/pen/GRrPZJG?editors=0010
  17. lol. this is awesome. you were exposed to many horrors around here
  18. please see line 105 I changed it from .add(background) to .add(background.tweenTo(background.duration())) https://codepen.io/snorkltv/pen/KKaGBYG?editors=0010 I'm pretty sure when you replay the timeline it didn't know that you had messed with the playhead of background with that tweenFromTo() at the end. Short story: if you are going to use tweenTo() and tweenFromTo() don't also add the timeline as a child. *edit: be sure to pause the background timeline also
  19. if you provide a minimal demo clearly showing the animation breaking I will take a look. Please be sure to fork your previous demos so I know I'm looking at the most recent code. thanks.
  20. regarding the condition you are using I'm not sure when !menuAnimation.progress() is true or what you are using it for. perhaps isActive() will help. a timeline can only be added to another timeline once. A solution to this is you can use tweenTo() to have multiple animations that scrub through the timeline as shown in this video
  21. that opens the door to a whole bunch of logic issues such as what do you do if some tries to close the panels while they are still opening? In last week's video in B-sides, Bonuses, and Oddities I go over the perils of using 2 timelines for distinct enter and leave animations. See below although this lesson focuses on a simple "rollover" effect the same concepts can be applied to your click-driven animation. other approaches involve creating animations on demand (by calling functions which create those animations) but there are some pros and cons that I
  22. Hi Stefano, Glad you are enjoying the courses. Thanks for providing such a clear and reduced demo. There are a few ways to do this but I will start with a fairly basic approach to see if that works for you. To chain these 2 timelines together you can add them both to another timeline, often called a master or parent. GSAP 3 Beyond the Basics has some lessons on this. https://codepen.io/snorkltv/pen/abpaPEJ?editors=1010 notice your child timelines are no longer paused and they are added to master. your button now controls m
×