Jump to content

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

Carl last won the day on January 3

Carl had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Carl

  1. 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.
  2. 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
  3. 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
  4. 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
  5. 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.
  6. 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
  7. I think this should do what you want https://codepen.io/snorkltv/pen/ExZqKGr
  8. 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
  9. yes, new lessons go out every Wednesday and enrolled students get an email notification. be sure to check your spam folder
  10. 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.
  11. 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
  12. lol. this is awesome. you were exposed to many horrors around here
  13. 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
  14. 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.
  15. 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
  16. 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
  17. 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
  18. Hi @limbo After pondering this thread I figured it was worthwhile to explain why 2 timelines doesn't work so well and also show a "single timeline" solution. I made a video that premieres pretty much now... Here are some demos Simple https://codepen.io/snorkltv/pen/MWJVWwy More Complex https://codepen.io/snorkltv/pen/12598b629fa6d41468fdc8e60ee896ba Multiple https://codepen.io/snorkltv/pen/MWJVYeQ?editors=0010 Enjoy!
  19. nice job, @mikel it's cool how different animations trigger from different directions.
  20. in the past I've done things where on mouseleave I check the progress() of the mouseenter animation. If it isn't complete (progress() <1) i just reverse() the enter animation. then you get into the situation where you have to decide what do you do if the mouseleave animation is playing and they quickly do a mouseenter? More conditional logic? (see mega mess below) for me, I've found its often much more trouble than it's worth to get 2 distinct, pre-created, over/out animations to play nice. another approach is that you create animations on demand; each time you ent
  21. thanks for the clear demo. firing different animations on mouseenter / mouseleave can cause some interesting logic issues and un-desirable results if not planned properly. things get can "jumpy" if you enter and leave quickly making the leave animation fire before the enter animation is finished. in this simplistic animation its not much of an issue as the animations are pretty quick. in your demo the solution is just to use restart() instead of play() on each event. When an animation's playhead gets to the end of the animation calling play() again does not pl