Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation since 02/29/2024 in all areas

  1. I've just build something similar, check it out! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/WNWxPGV?editors=0010
    4 points
  2. You don't need GSAP to add a class to an element, just use .classList.add(yourClass); The problem with that is that it either has the class or it does not, there is no in-between state, so nothing will animate, see below. You're on the GSAP forum, so I think you look to animate things, then just create an animation for each property you want to change, much more fun and easier to control! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/dyLzJxg?editors=0011
    3 points
  3. GSAP is smart and on page load calculates everything it needs to do the animation, so that when it is time it to animate it doesn't need to do calculations anymore. In your case you have two ScrollTrigger animating the same element, so both of them see the initial state of your gradient and record that and when it is time they animate from that initial state to their new state. You want the second ScrollTrigger to wait until the first one has finished. You could do this multiple ways, but the easiest is to give the second tween immediateRender: false, so that it waits until it needs to do the animation. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/RwOgqJj?editors=0010
    3 points
  4. That's because the browser's getComputedStyle() doesn't return the calc() data properly. So when GSAP gets the starting (from) value, the browser gives it a value with no calc(), and then the end string has calc() in it with multiple numbers. It's the same issue with your other demos (mis-matched data/quantities). There are two solutions: 1) Use CSS variables: https://codepen.io/GreenSock/pen/RwOgRJQ 2) Use a normal .fromTo() tween so that GSAP understands what you're trying to do and can use the raw starting value instead of a computed one from the browser: https://codepen.io/GreenSock/pen/wvZeWXQ?editors=0110
    3 points
  5. Alright, I couldn't help myself - I just had to find an algorithm to try to smooth out the movement when the path goes backwards. After about 10 hours, I think I've figured it out, and also demonstrated how you can make the bee kinda twist itself to remain oriented in the direction it's moving using scaleX and scaleY: https://codepen.io/GreenSock/pen/mdgmawg?editors=0010 Notice that pathEase() helper function has been updated and you can pass in a config object with smooth: true. I hope that helps!
    3 points
  6. transform is a lot of properties in one, so in your example what happens when you also want to animate scale? or translateX? You would have to merge them all in to one string and animating strings is not always the best idea. GSAP has exposed all the transforms and GSAP also does a lot of optimisations under the hood, so it is best to use the exposed properties for each transforms check the list here https://gsap.com/docs/v3/GSAP/CorePlugins/CSS?_highlight=transform#transforms Hope it helps and happy tweening!
    3 points
  7. That's typically beyond the scope of help we can provide here, but as a courtesy I tweaked the helper function to accommodate new enterAnimation and leaveAnimation functions that you can use to return an animation which gets plugged into the timeline: https://codepen.io/GreenSock/pen/qBwmOex?editors=0010 Does that help?
    3 points
  8. here is a quick one you can add any effect you want or play with the other options, just 5-10 min to take a look at the seamlessloop documentation and you're ready https://codepen.io/ahmed-attia/pen/RwOpyVX?editors=0011 you can check Carl's courses here and GSAP3 Express is free by the way https://www.creativecodingclub.com/bundles/creative-coding-club https://www.creativecodingclub.com/courses/FreeGSAP3Express
    3 points
  9. We don't typically provide custom solutions like this in these free forums, but I was curious about this and decided to clean up your demo for you: https://codepen.io/GreenSock/pen/GRLWvGp?editors=0010 I assume that was what you're looking for, right? You just had various logic issues and overcomplicated things a bit in my opinion. 🙂 I hope that helps!
    3 points
  10. And here's another way to do it - a custom plugin: gsap.registerPlugin({ name: "autoWillChange", init(target, vars, tween) { this.target = target; this.active = false; this.tween = tween; return !!vars; }, render(ratio, data) { let progress = data.tween.progress(), active = (progress > 0 && progress < 1); if (active !== data.active) { data.active = active; data.target.style.willChange = active ? "transform" : "auto"; } } }); Usage: gsap.to(".container", { x: 100, duration: 2, autoWillChange: true, // <-- magic! onComplete() { console.log("complete"); } }); 🥳
    3 points
  11. One of the reasons gsap.quickTo() is so fast is because it skips a bunch of conveniences like unit conversions, special features like "_short", relative values, etc. - it's purely for funneling a raw number directly into an existing tween. So I would probably do it like this: https://codepen.io/GreenSock/pen/MWRJJay?editors=0010 One simple tween that gets killed/replaced on each move.
    3 points
  12. Lol I was just typing this out: You can snap to different progress values. Check out snap in the do https://gsap.com/docs/v3/Plugins/ScrollTrigger/ as mentioned it snaps to progress values, eg 0 is the start of your ScrollTrigger and 1 is the end. Your total scroll distance is 6000px, so let's say you have 6 images and you want to snap to each one of them 1 / 6 = 0,1666, you you want to snap to increments of 0.1666 Hope it helps and happy tweening!
    3 points
  13. https://gsap.com/docs/v3/Plugins/ScrollTrigger/ It's because one of those is a tween on a ScrollTrigger with scrub: 1 - so it will take 1 second to catch up to the scroll position - and the other one is natively scrolling. So there will always be a discrepancy between the two - which will only become more apparent the faster you scroll. If you want both to behave the 'exact same', set scrub: true instead of scrub: 1 to your airpods ScrollTrigger. You'll lose the smoothness of the scrub then, of course. Or instead tween the 'over-scrolling' of the video via a ScrollTrigger that also has a numeric scrub of 1 set. But then, one way or another, you'll get a discrepancy again between that video container and the subsequent containers which would scroll natively. At this point you might end up in a 'tween everything' approach like Mitchel (@mvaneijgen) suggested in his earlier answer with the thread he linked to. An alternative to that approach could be to use overall smooth-scrolling instead, e.g. via ScrollSmoother alongside scrub: true on the airpods ScrollTrigger. Technically it's also a 'tween everything' approach - just on another level. And you'll lose some native browser features like e.g. jump-to search via F3. Is it worth the extra mile? Depends on how much you're a sucker for detail and how much the - most of the time visually small - asynchrony bothers you. Is any one better than the other? Depends on you again. Each of them has its downsides, if you ask me. Personally I'd go with the overall smooth-srolling - but that is merely a suggestion, not a recommendation by any means. It will definitely add another level of complexity with some regards. The latter - here it was just to keep track of what marker is related to which ScrollTrigger. But it can also be a helpful tool if at any point in time you might need to target any specific ScrollTrigger on your page for whatever reason logic-releated.
    3 points
  14. Then logically you'll need to make sure that your video is appearing on the page further up than it is now. You could e.g. calculate the distance it takes to scroll from when the 4s start fading out in your one ScrollTriggger until the point where your video enters the viewport now and then you'd know by how much you'd have to offset your video to the top for it to enter the viewport when the 4s start fading out. And this you'd have to of course do before you set up your ScrollTriggers for the video. Or - since your airpods Scrolltrigger is dependent on the window height anyway - just set a vh value that fits for you via CSS, e.g. via a negative margin-top on your video container. That is what I did in the codepen below. A bit of a warning though; keep in mind that since you have a numerical scrub on your airpods scrollTrigger, the scroll of the video and the fading out of the 4s will never be truly 'synced' - which will become more apparent when you scroll fast. You are adding the tweens for the fading of the video to your first timeline - which has a scrub set. I'm not sure if that is what you want to begin with, since you added the tweens at the very bottom of your JS after you created all the ScrollTriggers. And if you add it to the pinning Scrolltrigger like you do, of course it will only start fading in the opacity once the video has reached the top, and then the 'over-scrolling' you were trying to achieve wouldn't make any sense at all anymore. So you'll probably want to add the tweens to that other, non-pinning, ScrollTrigger instead and also set it to scrub. That out of the way, here's something from the article on the most common ScrollTrigger mistakes: https://gsap.com/resources/st-mistakes/#how-to-make-scrub-animations-take-longer ------ BTW - @GreenSock @Rodrigo @Cassie - there's a wrong link in that blue information box in that section of the article. It is an old URL which previously pointed to this content: https://gsap.com/docs/v3/Plugins/ScrollTrigger/#how-does-duration-work-with-scrub-true But although the general concept of how durations work with scrubbed: true is explained there, there isn't any mention of empty tweens as suggested in that blue information box - sort of confusing altogether. Edit: I also found a typo in the docs for the position parameter with regard to percentages, that I'm mentioning further down the post. Reporting it here, where it might be better to catch. ----- That second link explains how durations work with scrub: true, @newguy123 - you should have a thorough read on it to understand the concept. I added some comments in the codepen below that might help better understand it in combination with what the docs say. In that codepen I also make use of the aforementioned empty tween to create a 'gap' where nothing happens between the fading in and fading out. So I also got rid of your approach with the position parameter - of course you can do it with the position parameter, too, but you'd have to use the proper value - and for understanding how durations work with scrub: true to begin with it might be easier to work with empty tweens at first. Also, I'm pretty sure the value you use for the position parameter (i.e. "99%") again is invalid. Here's what the docs say with regard to percentage values in the position parameter. You see, a percentage value without any prefix is not listed in there. In your example you could in fact change it to "0%" and it would still behave exactly the same as it does now. https://gsap.com/resources/position-parameter/ That all said, here's the codepen. https://codepen.io/akapowl/pen/ExJNxJO
    3 points
  15. There's acctually a couple of things problematic with your example. You've got transforms apllied to the video element (which you use as the trigger and want to pin) and also to its parent element; they are likely going to mess with ScrollTrigger in some way - so unless you know exactly what you're doing I'd first go without them. Your video and its parent have a lower z-index set than the subsequent containers. So even if things would work right for you with regard to ScrollTrigger, the video would still sit on top of the subsequent containers which thus you would not get to see then until the video got unpinned. You are using an invalid value for your end. With ScrollTrigger a window's height is represented in % and not in vh. vh units are not valid with ScrollTrigger if I'm not totally mistaken. your start: "top bottom"doesn't make much sense for a pinning ScrollTrigger. If pinning something when its top hits the bottom of the viewport you will never see it getting pinned, as it is not in viewport that whole time then. If you want to trigger the video to start playing earlier, while pinning it at some different point, you'll probably have to use two different ScrollTriggers. As video elements can be a bit tricky to handle to some degree, I would suggest not pinning the video element itself but its wrapping container instead. Just set pinSpacing to false and you'll get the same effect you're after. All those things changed, you should already see something working a lot better. https://codepen.io/akapowl/pen/QWPKoPM
    3 points
  16. That is because you have a huge margin-left set on the .pinWrap via CSS which is not included in any way within the values you are currently using and you never add it to your calculations in any form. If you'd do so, it'd work just fine. I multiplied it by 2 here so basically it will end up with the same spacing on the right now when the tween is finished. https://codepen.io/akapowl/pen/zYXKbyJ
    3 points
  17. We usually don't code a custom solution for you in these forums, but I knew how to do this and figured it'd be fun challenge, so here you go: https://codepen.io/GreenSock/pen/PogzKNO?editors=0010 Is that what you're looking for?
    3 points
  18. Just as a general note, as soon as you think you're going to need more then one ScrollTrigger, there will be probably an easier way to do it with one. Timelines are the most powerful part of GSAP and is my opinion the best start point for any animation. So also in your case, you have two things you want to perfectly line up. If you put them on a timeline and use some clever position parameter they will be perfectly in sync. Then one ScrollTrigger that controls that timeline and your animation is hooked to the scroll bar of the visitor! I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/abxdWRP?editors=0010
    3 points
  19. Hi @zidzad1 and welcome to the GSAP Forums! The issue here is merely a mathematical one, nothing messed up here. First, snap works based on percentage values between 0 and 1. So when you pass a value of 0.333 (1/3) to the snap value ScrollTrigger will snap it's progress to 0, 1 and every value that is a multiple of 0.333 in between, so it goes like this: 0 - 0.333 - 0.667 - 1, so that snaps to every slide without any issues. Your tween is 1 second so the left side of the first slide will be at the left of the screen at 0 seconds. The left side of the second slide will be at the left side of the screen at 0.333 seconds and so forth. Now when you add a delay the left side of the first slide will be at the left of the screen at 0.25 seconds, so there are 0.25 seconds where the first slide doesn't move. Then the slides start to move. The left side of the second slide will be at the left of the screen at around 0.583 seconds, the left side of the third slide will be at the left side of the screen at around 0.917 seconds 🤯. Finally the left side of the fourth slide will be at the left side of the screen at 1.25 seconds, so you have to feed the snap config an array with the percentages of each slide which are very different than 0.333 for each slide, see the problem? Here is a fork of your demo with a dynamic approach to this: https://codepen.io/GreenSock/pen/xxeZONE Hopefully this helps. Happy Tweening!
    3 points
  20. The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. Below your pen with ScrollTrigger removed and GSDevTools installed, so you can really focus on the animation an make sure it is doing what you want it to do I've just written a guide how to create any cards stacking effect with GSAP (and ScrollTrigger), the most important point is start with all your elements in a known position and start animating from there. In your demo on line 40 you tell it to animate '-=0.3' seconds before the start of the timeline, that seems weird to me. The start is zero, but you tell it the start is -0.3. The property autoAlpha sets the visibility, so no need to also set it in your tween. To make it simple on your self I would create just one timeline and add all the tweens to there, when you think everything is working you can always optimise it later and split it out to separate timelines. https://codepen.io/mvaneijgen/pen/WNWQEWx?editors=0010 The pen below might really help you in your setup, from my post above. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/MWxgQbV
    3 points
  21. The best approach is always one timeline with one ScrollTrigger and in this case the Flip plugin would be a great fit, check out this demo below. Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/JjVPyxd
    3 points
  22. Just add an extra div to the sidebar, and set that as the pinned element. Hope it helps and happy tweening! https://stackblitz.com/edit/vitejs-vite-znkfam?file=src%2FApp.jsx
    3 points
  23. Hi @davidsantas I've seen this demo before, but I don't know where it is from or why it was made. I would personally animate this with a css clip-path, much more performant than updating the height of an element. Below an example coming from my post how to make any card stacking effect which walks you through the process of how to create such effects and what is the logic behind it. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/GReQYBr
    3 points
  24. I built a helper function specifically for this: https://codepen.io/GreenSock/pen/vYMJdjB?editors=0010 Related forums post: I hope that helps!
    2 points
  25. Hi, Sorry about the difficulties but without a minimal demo there is not much we can do to help. On top of that we don't have the time resources to provide free general consulting or create something from scratch for our users. What you're trying to achieve is not the simplest thing to do, here are a few demos: https://codepen.io/osublake/pen/LYYJNmQ https://codepen.io/GreenSock/pen/MWPOQmo https://codepen.io/GreenSock/pen/MWqWvom Hopefully this helps. Happy Tweening!
    2 points
  26. Thx for the answer. Setting ScrollTrigger.normalizeScroll(true)Solved the problem.
    2 points
  27. Hi @edwardsjethro welcome to the forum! Yes! No it does not. Below from the price page https://gsap.com/pricing/ No you are not, if you want to still sell your theme you'll need to have a business licence. If you stop selling it your current clients will still be able to use the theme they've bought with all the features of the tools. More info over at https://gsap.com/licensing/ Hope it helps and happy tweening!
    2 points
  28. Your pen doesn't load GSAP nor ScrollTrigger, would be great if you could at least provide a pen that is working at that level. For the centring of things, just remove ScrollTrigger and GSAP and focus on your CSS, lay everything out as you want it. Only after that is done add GSAP back in. for you pin question, pin: true pins everything located inside your trigger element. Your trigger element doesn't contain your circle, so it doesn't get pinned. Instead of using your trigger element as the pin you could also change the pin: true to an element eg pin: ".wrap-all" which would pin everything because this does contain your circle. Hope it helps and happy tweening!
    2 points
  29. Thanks so much Cassie! I made a small change to the script so that it can intercept the data-attribute and an array to insert multiple words at once. https://codepen.io/qurtopianodesign/pen/VwNpNyN?editors=0011
    2 points
  30. Hi, You might want to have a look at this thread, especially the posts by @mvaneijgen and @PointC: Happy Tweening!
    2 points
  31. Great catch, @Cuberto! Sorry about any confusion there. This would only happen if the very first ScrollTrigger (in terms of refreshPriority/order) has once: true. It should be resolved in the next release which you can preview at: https://assets.codepen.io/16327/ScrollTrigger.min.js (you may need to clear your cache) Better?
    2 points
  32. @mvaneijgen Thanks for the idea, I tried your approach for the animation and seems like it worked :) https://codepen.io/iamruletik/pen/oNOYMoa
    2 points
  33. You'd stated you've fixed it? I still wanted to share some insight on how I would set this up. I've two pens for you, one with some comments in your JS of things that aren't quite right: https://codepen.io/mvaneijgen/pen/BaEQrBe?editors=0010 And one with a timeline and two tweens. I've modified your SVG, because there were some transforms on shapes. When animating SVG I always like to flatten all transforms (this should be an option in your design program). Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/LYvbzae?editors=0010
    2 points
  34. @akapowl Thank you so much for this. I've been wracking my brains for the last couple of days trying to figure out why my scrolling animation was jumping at the end in WordPress Elementor however, I didn't realize the issue was a transition CSS effect being applied to the container by Elementor itself. I added selector { transition: none; } directly to the container with the GSAP ScrollTrigger animation and it resolved my issue. No more jumping!!
    2 points
  35. Hi @nate.ben welcome to the forum! React was fighting me, so I moved to Codepen. The simplest solution is to have ScrollTrigger control a timeline and in the timeline have the in and out animations directly. https://codepen.io/mvaneijgen/pen/RwORdVw?editors=0010 The scrub property makes it so you give control of the animation to the scrollbar of the user. If you in this case want nothing you happen on scroll up (see issue in below pen). You probably need to roll your own scrub logic, which you can do in the onUpdate for and then check which way it is scrolling and then update the progress of an external animation. This seems simple, but if you start building it you'll probably see you need more an more logic to make it work. I would go the first route, definitely when you're just starting out using the tools. What you can do is change the durations of the two tweens and make the duration of the first tween twice (or even three times) longer than the second tween. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/OJGXqzR?editors=0010
    2 points
  36. Love the plumber analogy @akapowl, your post earned a Gif!
    2 points
  37. You are loading tailwind.css via the settings in the HTML section. Without tailwind, the !important statements don't matter at all, it seems. So it looks to me like it is actually more of a tailwind question; and you'll have to find out what tailwind does to your button. To be honest, asking a plumber why the lamp in your living room is flickering, might not be the best approach for seeking help. If you can not find the issue yourself, I'd suggest asking in one of tailwind's support channels, e.g. their discussion forum on GitHub. https://v1.tailwindcss.com/community https://github.com/tailwindlabs/tailwindcss/discussions
    2 points
  38. No I didn’t because it didn’t work 🙂 But of course I get your point and making it a private repo and a private package is fine which would also solve the problem so thank you.
    2 points
  39. You can just use a variable to track the open/closed state: https://codepen.io/GreenSock/pen/bGJpzGP?editors=0010 Spam-click as much as you want! 🙂
    2 points
  40. If you make your clickable elements elements that are recognized as clickable elements (eg button, which is also better of accessibility) you can set dragClickables: false, and everything works as expected You can also create your own clickableTest This is all from the docs, so be sure to read through it once, just to get familiar with everything that is possible out of the box. Hope it helps and happy tweening! https://gsap.com/docs/v3/Plugins/Draggable/ https://codepen.io/mvaneijgen/pen/mdgVoEr
    2 points
  41. Seems correct to me. We've Stackblitz starter templates for all the major frameworks. See here the once for Vue and Nuxt.
    2 points
  42. Nope, this is left open intentionally. This way you can have a path that is off screen and is not visible at all, also multiple elements could have the same path, but be aligned to their own parents. Personally I've always used a path that that is also used as the alignment, but that is the beauty of GSAP, you can build what ever you like and because some smart people have thought of all possible solutions you ever want, you are never locked in to how the tool wants you to work. Hope it helps and happy tweening!
    2 points
  43. Hi, The article Mitchel points to has all the information on the particular subject: https://gsap.com/resources/React Also @Cassie created this video explaining all the ins and outs of the hook, you should really see it: Finally here are a couple of demos that use ScrollTrigger in React apps: https://stackblitz.com/edit/react-cxv92j https://stackblitz.com/edit/vitejs-vite-d73sck Hopefully this helps. Happy Tweening!
    2 points
  44. Hi @Ken Flores. Seamless loops are actually a lot more tricky than you might expect logic-wise (unrelated to GSAP). That's why we made a helper function for that: https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop Here's what I think you were trying to do, but this is much more efficient: https://codepen.io/GreenSock/pen/XWQmoMp?editors=0010 Does that help? Thanks for being a Club GSAP member! 💚
    2 points
  45. The syntax of the media you're trying to match is the same as the CSS spec, so you need to make sure you write it like you would write it in CSS. The useGSAP() is a new plugin special made for use in React, so if you use React or its other frame works, check out our Stackblitz starter templates, React (please read this article!), Next. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/gOyaxQV?editors=0010
    2 points
  46. I've restructured your layout a bit, so that you don't have the fight the height of the elements. Everything is stacked on top of each other on page load and then with a .from() tween the elements get moved and animated in to place. https://codepen.io/mvaneijgen/pen/RwOPGZm?editors=0110 If you want the border back, you'll have to create an extra element that is not part of the pin and is the window height, which then gets scrolled away or maybe make it part of the animation and have it also move the same distance as the image. I've also set ease to "none" for all tweens, made them both the same duration, and set the scroll distance to the windowHeight. Be sure to read through the JS comments! https://codepen.io/mvaneijgen/pen/MWRwjPO?editors=0010
    2 points
  47. When sharing a Stackblitz link be sure to include the file we should be looking at. For your setup I would start with all the elements at a known position eg the center all stacked on top of each other. Then you can move them .from() some position and then .to() some other position. If you use staggers you can just write one tween for all elements and with some clever position parameter you can have another tween start animating when the first one is done. Also be sure to use xPercent and yPercent when wanting to tween percentage based values. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ I think this is going to be your next questions, so I'm going to put this here. If you want things to stagger seamlessly check out the awesome tutorial our own @Carl I couldn't work in your Stackblitz, because you had not setup GSAP in the proper way Check out our React guide https://gsap.com/react. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/yLrNeRz?editors=1111
    2 points
  48. So, I've solved the problem: the SSR was indeed the issue, so I created a service: platform.service to call it whenever I need it: constructor( @Inject(PLATFORM_ID) private platformId: Object ) { } isOnVue(): boolean { return isPlatformBrowser(this.platformId); } isOnServ(): boolean { return isPlatformServer(this.platformId); } And I simply put my GSAP inside an if (this.platform.isOnVue()) { // GSAP code here } Problem solved! 😄 Thank you very much!
    2 points
  49. Hi @alx23 and welcome to the GSAP Forums! As far as I can tell, no is not possible. The browser will simply take you to to the scroll position where that word/text is but it won't move the content horizontally to get there. This is neither a shortcoming of GSAP nor the browser, keep in mind that with GSAP we're creating horizontal movement through vertical scroll or other events so is not the native way browsers work so the native find/search will not account for that. Maybe this could be done but it would require a bit of custom logic and I'm not 100% sure that it can be done. Finally thanks for the kind words 💚 Happy Tweening!
    2 points
  50. Thank you so much for the examples. I think I need what you created in the second example where normal scroll is mixed with Observer plugin. There is a lot to unpack here for me. Your third example (with my use case) helped me understand how Observer by itself works. GSAP is a wonderful bag of tricks.
    2 points
×
×
  • Create New...