Jump to content
GreenSock

Carl last won the day on December 31 2022

Carl had the most liked content!

Carl

Moderators
  • Posts

    9,710
  • Joined

  • Last visited

  • Days Won

    541

Everything posted by Carl

  1. Thanks for the clean demo. Very helpful! Great job converting the label to a scroll position too! Since you already did the hard work I was able to tap into the ScrollTo Plugin using a set() to automatically jump to the position gsap.set(window, {scrollTo:position}) https://codepen.io/snorkltv/pen/PoEPxwM?editors=1011 It's important to note that in order for this to work well I had to change your scrub value from 1.2 to true. When scrub was set to 1.2 it means the scroll position would need to "catch up" to where it was set, thus resulting in a little animation. Change it around to see what I mean. Also I loaded ScrollTo and the other plugins using the JS settings tab (click the gear across from the JS tab) You might appreciate the Free lesson I just released on using ScrollTo with ScrollTrigger. It seems you know quite a bit but it may show you another cool trick using the start and end values of a ScrollTrigger https://www.creativecodingclub.com/pages/free-lesson-scrollto-scrolltrigger
  2. Hey @mikel Great animation! Love the schnoz droop. You do an AMAZING job helping tons of folks around here!
  3. Hi and thanks for providing the demo! There's probably a few ways to achieve this but what I did: modified the logo css to reflect where I want the animation to end: small, centered, with position fixed added an animation to the ScrollTrigger that animates from the big and centered values set the scrub value to true and removed the toggleActions. https://codepen.io/snorkltv/pen/gOoaoYL Hopefully this gets you in the right direction! If you want loads of ScrollTrigger tips and tricks, here's a shameless plug for my course ScrollTrigger Express
  4. Welcome to the forums! I'd suggest making your timeline outside the function and then toggle it's reversed() state on open and close. This Quick Tip which shows how to toggle the paused() state can be altered to use reversed() WIth your setup you are making a new timeline each time and the BIG problem is this from tween media_tl.from(overlay, {duration: 0.5, y: 30, autoAlpha: 0}); If you already closed the animation and the autoAlpha gets set to 0 the next time you animate FROM autoAlpha:0 nothing will happen as it is already 0. In other words, animating something from 0 to 0 won't allow for any change in value. But as @mvaneijgen suggested, a minimal demo would make it much easier for us to provide a clear solution.
  5. thanks for the updates @FlashV8 and @lwmirkk it's interesting to hear that AS3 still has some life in it. It's been sooo long since I've touched it. I certainly miss the convenience of swf files that could be played virtually anywhere.
  6. nice work @mvaneijgen The reason the rotation would continue is because the timelines that were playing when you clicked the buttons again were still playing. In other words there were multiple concurrent timelines affecting the same boxes. I went ahead and created global references to the timelines when they are created child1, child2 and then I kill() them before assigning the new animations to them https://codepen.io/snorkltv/pen/ZEvEQjB?editors=0010 Thanks so much for helping out around here! @gloria-dee this seems to work, but frankly I would do my best to avoid situations like this. I would reserve master timelines with nested timelines solely for situations where you have a long linear navigation where you desire global play, pause, reverse, or scrub controls. Once you start needing independent control of child timelines or tweens it can get pretty messy as you are basically expecting timelines to do things that kind of break the logic of what they were intended to do. Child timelines render based on where they are relative to the parent timeline's playhead position. As the parent's playhead advances the child timeline's playhead stays locked in place with the parent's so that everything renders as it should at the right time. Imagine a timeline has a child tween that starts at a time of 1 and is 2 seconds long, making it end at timeline.time(3) [--parent timeline --] ----- 1 ----- 2 ----- 3 ----- <child tween > Both timeline and child tween end at time(3) When the parent timeline is at a time(3) it knows the child tween should render at its end time(2) If you monkey with the child tween and try to restart() it you set its playhead back to a time(0) which is at the parent's time(1)... but the parent's playhead hasn't moved. The parent can only render child animations based on where it's own playhead is. Once you start trying to control child timelines and tweens independently you get into a situation where you need to understand smoothChildTiming which keeps the playheads all aligned by moving the child aniamation's startTime(). It is admittedly quite a bit to wrap one's head around. Don't feel bad if you don't understand it. My explanation above could probably use some work.
  7. I think this is confusing us as blake's demo shows it's kind of weird to have text going down when you are expecting things to scroll up. maybe you meant something like this? https://codepen.io/snorkltv/pen/mdqNoqX?editors=1010 feel free to elaborate if you need something else
  8. Just jumping in to acknowledge I saw the note. Don't have anything to add as I think the explanations are great (and I don't think I really follow everything that's going on) It's a tricky subject and I don't have any lessons that I think can help add to what's been said other than some of the basic of "call a function to return a timeline stuff" like tl.add(animateSomething()) this topic seems more related to order of execution and what happens when functions are executed: someFunction() vs referenced: someFunction I'll make a note and see if I can find an easy / practical way to break it down.
  9. hey @OSUblake thanks for the detailed response. helpful as always.
  10. Hi @bryanbuchs Just want to say that it's GREAT to see someone using registerEffect(). I'm surprised I don't see more of it as it is so helpful and powerful. Great demo you have there. For more on distribute you can check out my video here's a companion pen that should make sense after watching the video https://codepen.io/snorkltv/pen/eYmKVBP?editors=0010 ************************ Hey @OSUblake That's a very clever solution and I think I would have struggled to find a clean implementation like you did. Very cool to just pass a stagger object into distribute() like that. I was a bit confused how yours worked as I didn't understand how the "each" value was being applied. It looks like it's being used as a multiplier on whatever index is being passed in. had I thought of using distribute I probably would have done something like this timeline.slideAway("ul>li", { stagger: { base:0, amount:0.2, from: "center" } }); Did you just know that each was a valid property because staggers use it internally? I'm wondering if that's worth documenting or maybe it just has a very limited use. Feel free to drop my video and demo in the docs if you like.
  11. If your end goal is just brightness / exposure effects you can do that just with css filters and gsap as @OSUblake suggested. Here is a demo and video from one of my courses https://codepen.io/snorkltv/pen/mdOBLoR?editors=0010 Full Lesson Video If you want to check out my courses you can access my complete GSAP 3 beginner's course for free (link below). I'd be happy to extend a 15% discount if you want to purchase Lifetime access to my full course bundle (over 140 lessons and growing weekly). Just use coupon code: gsforums at checkout within the next 10 days. Learn GreenSock at creativeCodingClub.com If you're serious about getting back into GSAP I'm confident this training will save you loads of time. Unless you have good working knowledge of working with the HTML <canvas> element AND the EaselJs library I don't think it's a good place to start with GSAP. You will do MUCH better working with HTML, CSS and basic SVG elements.
  12. Hello @Dizablah The Lamot sorry for the delay, i had a small vacation. I don't do much with GSAP and Animate these days but I don't think much has changed since this article was published I would do all of my GSAP scripting in Animate inside frame actions as shown in that video. That article also provides source files for you to explore. In the External js file that gets exported you will find a section with the comment //stage content and in there you will see the GSAP code that you write in animate. // stage content: (lib.GSAPAnimateCC2017Basic = function(mode,startPosition,loop) { this.initialize(mode,startPosition,loop,{}); // timeline functions: this.frame_0 = function() { var tl = new TimelineMax({repeat:3, repeatDelay:0.5}) tl.from(this.logo_mc, 1, {y:300, rotation:360, scaleX:0, scaleY:0, ease:Back.easeOut}) .from(this.GreenSock_mc, 0.5, {x:200, skewX:45, alpha:0}, "+=0.5"); } Technically speaking you could come up with a workflow where you edit that code in that file yourself and bypass the animate publishing process. I never did anything beyond simple timeline banners or small generative art things in Animate with GSAP so working in the Animate IDE was plenty adequate. The main reason I stopped using Animate for HTML5 export was that the open-source library CreateJS which is the underlying engine has been largely abandoned by the developers and Adobe so there is very little chance of any improvements. Adobe has pretty much backed away from any sort of commitment to the platform so it makes it very difficult to justify investing any of my own time into it. It's a shame as there is tons of potential there, especially for artists who can benefit from Animate's excellent art-creation and drawing tools.
  13. Carl

    Code Review Pls

    thanks, @OSUblake it was a momentary lapse of ignorance for me 😁 I'm just starting to recognize where keyframes may work better. @rimedtades the example I gave you is probably not the easiest for a beginner to grasp or to intuitively reach for. I was just going to the most concise version possible. A more practical progression for you would probably be 1: 2 timelines that use complex selectors (to animate multiple targets per tween) https://codepen.io/snorkltv/pen/LYOOwxy?editors=0010 2: build a loop that alternates between those 2 timelines for odd and even circles https://codepen.io/snorkltv/pen/ExbbqXg?editors=0010 3: do something like Blake suggested for lots of flexibility 👍 4: do something like my suggestions above for code brevity As you can see there are loads of options. Experiment and use what you are comfortable with. Blake and I have been doing this stuff for many, many years and still find different ways to do things.
  14. Carl

    Code Review Pls

    this was an interesting challenge. typically I would use a loop and just create a different animation for odd and even circles. I could probably throw that together later if you need. however, this can also be done using keyframes and some gsap.utils.wrap() special powers https://codepen.io/snorkltv/pen/PoOOrRK?editors=0010 check out and Offical Docs for wrap() https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap()
  15. Hi @marko krstic here I looped through all the circles and assigned them an animation along a path. the animations have random delays which means they won't start in order 1 - 9. see if this works for you https://codepen.io/snorkltv/pen/OJOOZXo?editors=0010 *edit: I changed the delay so that the first circle starts immediately at time:0 and the rest have a random delay using delay: index == 0 ? 0 : "random(0.1,5)",
  16. Hi @FDCH Thanks for the demo. This is an interesting challenge. Just to get it out of the way, i wouldn't recommend having 2 tweens animate the same value at the same time. I suspect that was just part of some experimenting. The core issue here is that Math.round() is going to force val 0 to round to 1 once it reaches 0.5 so the number 0 will only display from 0 > 0.49999 but 1 will display from 0.5 > 1.499999 See the discrepancy? With a linear ease with 1 second to display each number, 0 only has half a second to display while 1 (and all the other numbers) have a full second to display. If you use Math.floor() you can see a val of 0 between 0 > 0.999999 and then 1 will display from 1 > 1.99999 Then you will have your even distribution, however keep in mind that the very instant you reach you end value of 5, then the tween will instantly repeat, so you may want a repeatDelay too like: https://codepen.io/snorkltv/pen/RwjLEmO
  17. that's looking really good. nice job using the mix-blend-mode. Unfortunately the example you linked to is using canvas where I suspect there's better support for actual masking. I think svg would be a great way to go as @OSUblake suggested.
  18. consider that you have 4 panels moving horizontally. your tween is configured to translate along the x axis to reveal 3 new panels. The distance to move is the width of 1 panel * 3. there are 3 snap points being generated in precise 1/3 intervals (33.33%). the tween must move with no easing so that every time you scroll to advance 33.33% of the tween you line up perfectly at a snap point where a panel is fully visible. if an ease is applied, moving the tween 33.33% will not move the container 33.33% of the total distance. consider an ease with a strong ease in. advancing the progress by 33% will show very little visual change as the rate of change at the beginning of an ease in is very minimal. I understand this can be a bit much to wrap your head around if you are somewhat new to this. hopefully this helps.
  19. ah, my bad. I assumed the call to action was interactive. without interactivity I'm not sure where the trouble is. I'm not following what you need as you have full control over the duration and number of repeats regardless of the ease. you can also shift the timeScale() if you need to conform to some other timing / duration constraints. perhaps if you can provide a minimal demo that shows the ease you are using and little more info on where you are having trouble myself or someone else can help get you the info you need.
  20. Actually, unless you need a very specific timing with your easing, I think just having a tween with a repeat value should suffice. For a repeating pulse I think this is probably the most beginner-friendly approach https://codepen.io/snorkltv/pen/NWwvZqz?editors=0010 If you want to scale up, down, up, down, set the repeat value to 3. I used 8 so you have more time to experiment with the effect. If you or your co-workers need help with GSAP basics, please check out my free GreenSock beginner's course.
  21. In addition, and similar too @OSUblake's advice here are 2 variations on "custom end screens" from my courses. Note both animations loop with a simple fade out but end with the call to action flashing in green. I keep the design simple so that the code is easier to decipher. Use a callback to check how many times animation has played and call a function that plays a separate animation (not in the timeline) https://codepen.io/snorkltv/pen/poeEmWP Create full animation iteration in one timeline. Use tweenTo() and tweenFromTo() in a master timeline to scrub through the original timeline any number of times. After the iterations are all done play an additional end animation in the master timeline https://codepen.io/snorkltv/pen/XWMpNBz?editors=0010
  22. I just released a little lesson about this plugin. Here's a demo that anyone is free to use which should help illustrate what the plugin can do. Thanks again for whipping this together! https://codepen.io/snorkltv/pen/QWOEjBZ?editors=0010
  23. OOh this will be me all morning The returned object with the width and height will be very easy to work with. Thanks a million!
  24. Thanks @GreenSock that's really great. To keep up with the forum trend of "just one more question"... At first I wasn't sure if the getBGSize() helper function would still have value, but alas I find I could still use it. I wonder if it would be worthwhile to combine the two so that BackgroundSize Plugin has a getBGSize() method? I know this may be pushing the bounds of what should be expected of an un-official plugin so I don't have high expectations and it's not the end of the world to include them both separately.
×