Jump to content
GreenSock

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

Leaderboard

Popular Content

Showing content with the highest reputation since 01/14/2022 in all areas

  1. Hi @buster808 Thanks for reading Motion Tricks. Glad to see you're having some fun with meters. In this case I think measuring the length of the path and tweening to an absolute length would be the easiest approach. I've forked your pen with a couple small changes. If we get the desired percentage by dividing your target count (600) by the hard coded max of 1140 and then multiply that by the max rotation of 180 you get the needle rotation. Multiplying that same percentage times the length of path we're drawing and you'll get the target length. Use those values in the tween and you'll get this. https://codepen.io/PointC/pen/b19e05f7c111c7d3a6ecef9762fc5c61 I'd also recommend using a function to create everything since the dials are the same. Then just feed in the desired count and you'll be good to go. Hopefully this all makes sense. Happy tweening.
    6 points
  2. I think your best bet for this would be to use a forEach loop for each dial, then and set your values/math to figure out rotation etc using data-attributes or similar. For the mask-ring drawSVG, you'll probably want to use a .fromTo(maskRing, { drawSVG: 0 }, { drawSVG: `${(600 / 1140) * 100}%` }) and rotation: (600 / 1140) * 180 or something similar.
    5 points
  3. Welcome to the forums @Alessandro Serra A concept like this could work: First wrap the section in a div and pin the section itself with one ScrollTrigger. Then for as many toggles as you need, create ScrollTriggers using the wrapper as the trigger with the start dependent on its top and the amount of window-heights scrolled. Like in this example everything is dependent on the number of colors in that array. I'm not sure what exactly it is you are going for, but you can give it a shot and fiddle around a bit with that example. https://codepen.io/akapowl/pen/VwMqXZX
    4 points
  4. Yes, resizing the screen causes a ScrollTrigger.refresh(), so basically you're doing the same thing when you add each.
    3 points
  5. Hey there, you'll want to use functional values alongside the invalidateOnRefresh to make sure ST does get the new value for the window's width on refresh. // change this x: -$( window ).innerWidth() // to this x: () => -$( window ).innerWidth() https://codepen.io/akapowl/pen/oNGRrYj
    3 points
  6. I don't think you should be just pasting over the code from the example I mentioned over to your scenario. If smooth-scrollbar itself worked for you before (alongside ScrollTrigger), keep using it like you had in your scenario but change the variable that your smooth-scrollbar instance is stored to ( scrollbarin your case) when you add the eventListener for the markers. scrollbar.addListener(({ offset }) => { gsap.set(markers, { marginTop: -offset.y }) }); Other than that, I don't think I can help much more from just looking at screenshots. If you could create a minimal demo of your scenario, I'd be glad to take a look at it.
    3 points
  7. Nah, not a "stupid" question at all. It wouldn't work because MotionPathHelper is supposed to let you add points, make them curvy, pull control points, etc. (total flexibility) which would all be impossible with a <polygon>. It's super easy to solve, though - just use MotionPathPlugin.convertToPath()! https://codepen.io/GreenSock/pen/RwLOOoe?editors=1010 Does that clear things up?
    3 points
  8. Yep, that's because once: true will kill it as soon as you reach the end scroll position, and you've got a delayed scrub value which means the animation is likely in the process of being scrubbed at that point and is killed. I've added code to the next release to allow the scrub to finish in that case - you can see that in this fork: https://codepen.io/GreenSock/pen/GRMLYzW?editors=0010 But in the meantime, you can simply remove the once: true and do this instead: onLeave: self => self.getTween().eventCallback("onComplete", () => self.kill(false)), Better?
    3 points
  9. Please check Documantation page of ScrollTrigger There is no property ping on ScrollTrigger, it must be pin: true
    3 points
  10. Sorry about that, @elegantseagulls - that ease thing looks like a typo in that helper function. It's fixed now. It was calling .getRatio() on the ease but there's no such thing (that's from the old GSAP2 days). As for the "each", that's behaving as expected. Remember, it's distributing the delays based on the proximity to the edges, thus if you've got 62 elements, each: 0.2 would result in an overall time of 12.4 seconds that must get distributed across them all BASED ON PROXIMITY (not a simple "each" stagger). Many of them are almost the same distance from the center, thus they'd fire almost simultaneously, and then there'd be a longer delay before the next inner-ring starts firing, etc. https://codepen.io/GreenSock/pen/eYGomVG?editors=0010 If you're trying to make each circle start animating 0.2 seconds apart, starting from the outer circle and going around and then stepping to the inner ring(s), here's a CodePen with some math applied to a custom solution: https://codepen.io/GreenSock/pen/XWeQbJP?editors=0010 Here's a slightly different .sort() that makes them all come in by angle instead of outer-to-inner ring. Kinda fun. https://codepen.io/GreenSock/pen/QWqPbNq?editors=0010 Does that clear things up?
    3 points
  11. @Jloafs I stumbled across this thread as I was having a similar issue. So what solved the issue for me was having an init() function run on both page load and the after hook. In this init function give each scrollTrigger an id relative to the section or functionality store those ids in an array then using the before hook loop through each id using `ScrollTrigger.getById(id)` and then run the kill() function Not tested the below code but should help understand what fixed my issue gsap.registerPlugin(ScrollTrigger); const prefix = 'className'; let triggerIDs; init(); function init() { const sections = document.querySelectorAll('sections'); triggerIDs = []; sections.forEach(function(element, index) { const ID = prefix + '__' + index; const tl = gsap.timeline({ scrollTrigger: { id: ID, markers: true, trigger: element, }, }) triggerIDs.push(ID) }); } barba.hooks.beforeLeave((data) => { triggerIDs.forEach(function(id) { ScrollTrigger.getById(id).kill(); }); }); barba.hooks.after((data) => { init(); });
    3 points
  12. Thank you for all your help on this and for posting these answers. I did solve the issue by using jQuery to calculate the progression of the count. Next week I'll figure out the new animation unique to the mobile - horizontal v. vertical. https://codepen.io/drs-nyc/pen/dyVajVm I'll come back to your updates. But, of course, the resizing issue with the sample posted with the two changes would have saved days of trying to figure out how to do it. Oh well, lessons learned. I agree that this library and the samples you have are terrific. I'm going to spend the hours on becoming proficient with this tool. I'm very impressed with what it can do. Unfortunately, I was not planning to hit so many snags, first realizing that scrolling sections would need a completely new approach and that resizing would break using published samples. This is a fantastic resource, and I'll soon get up over that learning curve. But, right now, I know too little to offer practical ideas. Again thank you for the prompt responses. Just knowing I wasn't doing it right was enough to power through to a new approach that did work.
    3 points
  13. Hi @camiloignaval Welcome to the forum. Looks to me like you'll need to set the overwrite property to true in those tweens. (It's false by default) You could also create a timeline for each element and play/reverse it on enter/leave. Hopefully that helps. Happy tweening and welcome aboard.
    3 points
  14. Your motion tricks tutorials "are the reason" I'm finally going to pull the trigger on pro. Although I've been using codePen for years, I never thought about it, but I've been dabbling with GSAP this past year and your viewBox tutorial was the one that inspired me to start collecting my work. Thank you for those BTW. They're great!
    3 points
  15. Hello @addam You sure can do something like that with the help of GSAP and its tools. In fact I think on that website they are using GSAP for it. Take a look at this post here... ...in combination with the example in the thread linked within. That could give you a good starting point. Besides the general setup for something like that, the most important thing you want to be taking a look at is ScrollTrigger Happy tweening!
    3 points
  16. Welcome to the forums, @anaig! Without seeing the problem, my best guess is that your script.js is executing code immediately, BEFORE the <body> is even parsed by the browser, so you're trying to animate things that don't even exist yet. Solution: either put your script just before the closing </body> tag or simply wrap your code in a "load" event listener so that things actually exist when you try animating them Good luck!
    3 points
  17. Path data looks fine and it clearly works correctly as seen in this demo. https://codepen.io/PointC/pen/920f23b493b302b6a111a733ce12e559 Definitely look at joining Club GreenSock so you can use MorphSVG in the wild. Happy tweening.
    3 points
  18. Definitely worth it. Private pens are a must. You get a quite a bit of asset storage. Debug is super helpful. I use the custom embed themes for my motiontricks.com tutorials. Plus, as Jack mentioned, it's good to support useful products and services like CodePen. My two cents. YMMV.
    3 points
  19. That's actually a very tricky scenario because you've got multiple ScrollTrigger-based animations that are affecting the same property of the same element. ScrollTrigger must refresh things from top to bottom, thus in your scenario you've got a scrubbed, pinned timeline that has a STARTING opacity of 1 on that element thus when it refreshes and you haven't scrolled past its start, it will render that timeline at its starting value (opacity: 1). See the issue? It's not a bug or anything in ScrollTrigger - it's just the nature of the logic and the way you've set things up. It's exceedingly rare, though - this is the first time I've seen this come up in fact. You can work around it by running some code in an onRefresh() of that 2nd ScrollTrigger to force the opacity to the value you want it to be (but you'd only want that to happen if the user hasn't scrolled into the one before it which is ALSO controlling its opacity). Is this what you're looking for? https://codepen.io/GreenSock/pen/dyVwjKQ?editors=0010
    3 points
  20. Hello there @Steve Eldridge - welcome to the forums. Yeah, I noticed a couple of things with that demo - I created it from the fork of a pen of one of the peopl who asked back in this thread. One of the main problems I see, is that while the smooth-scrollbar is being inititated on the body, the scrollerProxy() is set to the scroller (don't know why I did that tbh) - same goes for the scrollers on the ScrollTriggers - that makes it really wonky on resizes. So here is a revision of that example, where that is changed. I also changed the .to-tweens to .fromTo-tweens there and changed the order of creation of the scrollTriggers here. The pinning one now is created first and the tweening ScrollTriggers in the forEach-loops use a 'trigger-wrap' wrapping the black section as the trigger element now. This should definitely be working better now. I will try and make a cleaner demo when I find the time. https://codepen.io/akapowl/pen/wvrRyMj If you haven't yet; For handling different ScrollTriggers for different screen-widths you'll want to take a look at ScrollTrigger's .matchMedia() - that will be immensely helpful with that and takes quite a lot from off of your head. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia() If you need some more assistance, post a minimal demo of what you have tried so far, and we'll see how we can help you from there.
    3 points
  21. Yep, there's nothing wrong with creating additional timelines with the same trigger. 😉
    2 points
  22. Hey, Based on these articles: https://dev.to/anxiny/page-transition-effect-in-nextjs-9ch https://ellismin.com/2020/05/next-page-transition/ I came up with this: https://github.com/rhernandog/next-gsap-transitions Live sample (nothing fancy, just a proof of concept): https://cranky-heyrovsky-83f0a9.netlify.app/ The only drawback in this approach is that you can't use the module approach for styling each page: https://dev.to/koraysels/comment/1f341 Also @John Polacek has this package, but I don't know if it is production-ready, John should be the one to tell us: https://github.com/johnpolacek/TweenPages Hopefully these help you get started. Finally if I was you I would invest time in using Nuxt since they have Vue's native animation solution implemented without any of this hassles. I recently did a little consulting for this site created with Nuxt and GSAP and works great: https://fcwisi1.ch/ Happy Tweening!!!!
    2 points
  23. Welcome to the GSAP forums @mccjo806 That issue seems to resolve, when you call your changeFlexGrow() in a function on the callbacks // this onEnter: changeFlexGrow(0, child.getElementsByClassName('scrubScroll__dark')) // vs. this onEnter: function() { changeFlexGrow(0, child.getElementsByClassName('scrubScroll__dark')) } https://codepen.io/akapowl/pen/xxXNNZz Also, since (as far as I know) flex-grow is animatable as long as its value is a number (and you already do so by using CSS transitions), you could also just tween it via GSAP. I'm not exactly sure what it is you're after, but as you mentioned scrubbing in the title, here is an example with a scrubbing tween instead. I hope this will help a bit. https://codepen.io/akapowl/pen/qBPGGqQ
    2 points
  24. I'm not sure why this is, but changing scrub to true instead of 0.2 seems to fix the issue. Is this expected behavior @GreenSock (cc: @OSUblake @Cassie)?
    2 points
  25. You could set once: true on your ScrollTriggers to get it working like that. https://codepen.io/akapowl/pen/LYzoEQr But given the fact that you are using timelines there, I assume you might have tweens associated with that, which you still want to be playing as usual. In that case I think it might be better to just add some simple conditional logic for adding the class onEnter 'manually'. https://codepen.io/akapowl/pen/PoJvwBM
    2 points
  26. Sure, you can rewrite it with gsap 3, check migration guide The similar examples you can find by chosing filter by Technologies on awwwards site, chose Barba.js, GSAP Animation, Highway.js... filters
    2 points
  27. Hi Simone, Creating your ScrollTriggers out of order is a common mistake. See this article.
    2 points
  28. There's a chrome extension that show's what version of GSAP that's being used. For this site it's v2.1.2: https://chrome.google.com/webstore/detail/official-gsap-sniffer/dbcjaehchnikgdjjcehagpcikmlpjefh It doesn't show specific GSAP plugins—like split-text, etc—that are being used. I'm not entirely sure what you are asking in your original question though: What part of the site are you wondering about specifically? I'm not seeing any real usage of GSAP-specific "plugins".
    2 points
  29. I have the same situation in my project then I do a little more google about this and find similar posts related to this. No doubt THREE.JS is a good idea but I don't believe in copy-pasting this YouTube solution. It takes time to learn something new. Hi @mikeage You can find the solution form here. I hope it helps. -
    2 points
  30. You would have to adjust the logic a bit - and I think it should be enough to change the logic of the handleDirection() function. I changed ... // ...this... function handleDirection() { listening = false; if (direction === "down") { next = current + 1; if (next >= sections.length) next = 0; slideIn(); } if (direction === "up") { next = current - 1; if (next < 0) next = sections.length - 1; slideOut(); } } // ...to this... function handleDirection() { listening = false; if (direction === "down") { if( current !== sections.length - 1) { next = current + 1; slideIn(); } else { listening = true; } } if (direction === "up") { if( current !== 0) { next = current - 1; slideOut(); } else { listening = true; } } } ...and it appears to be working quite alright. I only tested with mouse-wheel though, so you might want to check for touch-devices yourself (and might have to incorporate some logic along those lines if it doesn't work well). Hope it helps a bit though. https://codepen.io/akapowl/pen/MWExqWb
    2 points
  31. You might want to check out the helper function from the docs: https://greensock.com/docs/v3/HelperFunctions#progressiveBuild https://codepen.io/GreenSock/pen/vYePKKd?editors=0010 Is that what you're looking for? As you seem to understand, Flip animations aren't ideal for building out long timelines because they're very much dependent on whatever the current state is when they start (which can be quite dynamic). So pre-baking them isn't really possible. The user might resize the screen or click on things that change state or whatever...AFTER you created the timeline. Typically Flip animations are best treated as one-off kind of things where you call a function and it handles it. But if you're trying to sequence things (like multiple Flip steps), then that helper function is a great way to do it.
    2 points
  32. I hear the frustration in your posts, @Steve Eldridge. So sorry! I'd hate feeling like I just wasted a week of work! I try very hard to build the tools to "just work" and solve all kinds of browser bugs, logic issues, etc. automatically behind the scenes so you don't have to worry about them. Some things, however (especially when it comes to scroll effects) are inherently thorny and basically impossible to solve without major negative tradeoffs. For example, by default any tween with a ScrollTrigger will immediately render (basically record the start/end values) so that when you get to that scroll position it can instantly jump into action instead of parsing/reading values which takes a little extra time (that's why the first render is the most expensive). It's a performance optimization because scrolling can be one of the most expensive operations for the browser. HOWEVER, in that 2nd demo (scrolling list of items), you're animating the same property of the same element with multiple tweens and you set it up in a way that'd allow them to overlap. I they each record the starting value immediately, they'll all start at 0 of course but you're using relative values like "-=40vh", so you're trying to make them build on top of each other. That'd be totally fine if they were all in a timeline so that as the playhead advances things are locked into place accordingly and build on one another, but you've got independent tweens that don't know about each other. So from an engineering standpoint, the ONLY solution inside GSAP would be to force ALL tweens to look through ALL other tweens and try to piece together scenarios, like "does that other animation handle the same property? Does it have a ScrollTrigger that's further down on the page? If so, force that one to render first at startup, then record the starting values, then rewind that other tween", etc. It gets VERY expensive performance-wise (and kb-wise) so that tradeoff definitely doesn't seem worth it. That'd force every GSAP user to pay that performance penalty to run through all that logic just to try to solve this one edge case instead of simply explaining how things work and letting people structure their code appropriately to avoid rare edge cases like that. I place a big priority in performance because animation is so sensitive to that. If you've got better ideas, please let me know - I really hate hearing about anyone being frustrated with the tools. Normally we hear exactly the opposite - that GSAP solves all kinds of problems that other tools don't, and that it "just works". Let's revising that "scrolling list" example - you can set immediateRender: false and preventOverlaps: true so that the independent tweens don't step on each other's toes if the user scrolls quickly. Does this work better? https://codepen.io/GreenSock/pen/JjrxBXN?editors=1010 As for your original question, here's a simplified approach: https://codepen.io/GreenSock/pen/eYGxjQW?editors=0010 And here's the way I'd do it with a single timeline and I also adjusted the timing of when the active class gets added because I personally think it's more intuitive: https://codepen.io/GreenSock/pen/oNGmMQM?editors=0010 Side notes: A ScrollTrigger can have either toggleActions or scrub - logically, it can't be both. So if you set a scrub value, it'll simply ignore the toggleActions. If you only have one tween in your timeline, there's no reason to even create a timeline. You can simply do an independent tween (and add the ScrollTrigger to that tween). It's fine if you want to wrap it in a timeline - I'm just saying it's unnecessary to create that extra object. Ideally, you should always create your ScrollTriggers in they order they appear on the page (well, in the order they'd trigger) so that things refresh properly. You were creating your overall ScrollTrigger that pins the section AFTER you created all the ScrollTrigger animations for inside that section. If you can't do it in order, then you need to set refreshPriority on them accordingly so that ScrollTrigger sorts them. There's no need to set invalidateOnRefresh: true on a ScrollTrigger that doesn't have any animation associated with it (like the one you're using to just pin the section). invalidating is for the animations to force them to re-record their starting/ending values. Same for scrub and toggleActions. Does that help clarify things? Again, I think you'll find that if you roll your own solution, there are all kinds of edge cases you'll need to accommodate and building something like ScrollTrigger is inherently tricky. If you've got ideas for improvement in terms of ScrollTrigger, I'm all ears.
    2 points
  33. So like this? A Pen by GreenSock (codepen.io)
    2 points
  34. Hi @Vedadovsky. It's super difficult to troubleshoot blind - got a minimal demo we could look at, like in CodePen? My guess is that you never actually loaded MorphSVGPlugin or you didn't register it. I noticed you're not a Club GreenSock member, so you don't have access to MorphSVGPlugin and shouldn't be using it unless you're using a trial version on CodePen/CodeSandbox. Once we see a minimal demo, I'm sure we'll be able to offer better advice.
    2 points
  35. Totally worth it in my opinion. CodePen is such an amazing tool. I like funding things that are so useful even if the features it unlocks by going "pro" aren't absolutely essential. I definitely like being able to have "private" pens, and the collab mode can be super cool. Oh, and debug mode...yes, that's essential for testing, especially on mobile devices. Plus I know many of the people who work there and they're some of the best in the business.
    2 points
  36. Hi Hugo, There's over 800 lines of code in that demo. If you can reduce that down to a minimal demo that reproduces the issue, we'd be more than happy to take a look. Thanks!
    1 point
  37. Good catch. I never really anticipated that someone would compound scrubbing like that where you've got a scrub on the containerAnimation AND on top of that another scrub on the ScrollTrigger that's watching that containerAnimation. Seems odd, but I guess it could make sense in some situations. It should be resolved in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js But for now, I'd recommend scrubbing one or the other, not both
    1 point
  38. Thanks for the demo! The window load event only covers stuff that is in the DOM, so a Lottie file wouldn't be part of that as it is initiated separately. I just added an onLoad callback to LottieScrollTrigger helper. Is that better? Preloader demo (codepen.io)
    1 point
  39. How to use touch and wheel events is a bit beyond the scope of this forum as that just normal JavaScript and there plenty of resources on the subject, but the basic idea is to use changes from the even to control the play head of an animation. Really simple example using wheel events. mouse wheel animation (codepen.io) Touch is much more complicated, but the concept is still the same. Detect if the user is swiping up or down, and then animate the progress of your animation based on the information. This demo doesn't animate the progress, but it does show wheel and touch event listeners being used. https://codepen.io/BrianCross/pen/PoWapLP
    1 point
  40. @OSUblake Thanks for the response! Totally a stupid mistake on my end (I also didn't check to see if moveUp was active as well, woops). Working great now, thanks again!
    1 point
  41. Great, that you got it working! Be careful with the media-queries though; as it stands now, when the viewport width is exactly 1024px you will technically be creating both of those. Better make sure, the sizes don't overlap at some point, like maybe ... "(min-width: 1024px)": function(){ ... }, "(max-width: 1023px)": function(){ ... } ...
    1 point
  42. Welcome to the forums @Wilson Kamau One option might be to use .addPause() to wait for the Flip animation to finish. I added a tiny delay to the second add pause here so it doesn't fire at the exact same time as the first one. GSAP Starter Template (codepen.io)
    1 point
  43. This is EXACTLY what I was looking for. Thank you for the very quick, very thorough reply. It also really helped me understand how everything works much better.
    1 point
  44. You could potentially initialise all the event listeners as the carousel enters and then remove them when the animation's complete. (small note - It sounds like pretty bad UX practise though, I'd be a little frustrated if a website removed my ability to scroll normally midway through a page) Why don't you pop together a demo and if you get stuck we can give you some pointers!
    1 point
  45. Sorry about that, @ncla! I see exactly what you mean and it should be fixed in the next release which you can preview (compressed) at https://assets.codepen.io/16327/gsap-latest-beta.min.js It was related to the "lazy" functionality that defers and groups rendering of .from() values to maximize performance. You can fix it in the current version by simply setting lazy: false on your .from() tween(s). Thanks for reporting this!
    1 point
  46. @Puneet Sharma Can you run the following steps and let us know if you're still facing issues: $ npm config set registry https://npm.greensock.com $ npm config set @gsap:registry https://npm.greensock.com $ npm config set //npm.greensock.com/:_authToken <your-token-here> $ yarn add @gsap/shockingly
    1 point
  47. I'm glad I found this conversation. I was having the same problem when I was transferring an app from VS 2019 community to codepen.io. It worked fine with React and node.js and using MS Edge. But, on codepen.io, I was getting an error in the Chrome console, Type Error: Cannot create property '_gsTweenID' on string '#el' followed by an infinite loop error Uncaught Type Error: Cannot read property 'length' of undefined. After reading this conversation, I solved my issued by creating a jQuery-like function (sorry, I'm still new to coding and haven't delved into jQuery yet): function $(x) { return document.getElementById(x); }; and then changed all of my tween targets from : .to('#el',SPD,{animation:object}) to: .to($('el'),SPD,{animation:object}) The app works like it should now. Thanks again everyone!
    1 point
  48. I don't think I will be able to program this to your exact specifications, but one approach is to create a function that randomly scales each word. When that animation is done, it uses an onComplete callback to call that function again and create a new random animation:
    1 point
  49. Whoa! That's going back! I'm not sure `appendMultiple` and `allTo` are supported any longer. I think you'd want to look at add() instead. (I could be wrong though)
    1 point
×