Jump to content
Search Community

Leaderboard

Popular Content

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

  1. Hi @Mumm-Ra. Thanks for the suggestion - are you basically asking us to make GSDevTools "frame-based" instead of "time-based"? The problem with that is GSAP is inherently resolution-independent in terms of timing, and that's a GOOD thing. In the old days, a lot of systems were frame-based, so for example you might make an animation that linearly travels 600px between frame 10 and frame 70, so 10px per frame. Seems fine initially, but what if you run that animation at a timeScale of 0.25 (quarter-speed)? Since that animation was frame-based, it's resolution-dependent, meaning it only has 60 frames worth of motion and if we now slow the playback speed, it looks a lot more jerky. GSAP, on the other hand, is resolution-independent in terms of time, so if you timeScale(0.25), it'll adjust perfectly and the motion will be totally smooth. It's not locked to moving 10px per frame like in the frames-based animation. And remember that even if requestAnimationFrame() is supposed to run 60 times per second, sometimes it doesn't. The system could be temporarily bogged down. In a frames-based system, that would mean the entire animation would take longer to finish. For example, if the system was working really hard and the frame rate dropped to 30fps, that 60-frame animation would take 2 full seconds to complete! But with GSAP, it'd still honor the 1-second duration; it'd just move a longer distance on each frame. All that to say that I do not believe it would be a good idea to make GSDevTools frame-based. It may give the false impression that GSAP works that way. A developer might intricately build out an animation such that a particular element starts moving in exactly frame 62...but then in the real-world browser on a system that's much less powerful, it may actually end up firing on tick 41 instead because the frame rate dropped. Why do you need things to be frame-based? What is difficult for you about using time (seconds)?
    5 points
  2. Hi @Yuvraj Bokhre welcome to the forum! That demo looks cool, nice job @Cassie! This demo uses the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ which kinda 'eats' your scroll (because of preventDefault: true, on line 111. So you have to find a way to break out (and in) to this effect at the moment you want! Below a demo that does this, this is not really simple logic, but if you're up for a challenge it is certainly possible. I would advice first making some demo's, Codepen is a great place for that, so you don't have to worry about your real project or your framework trowing errors. Also I would check out this awesome getting started guide https://gsap.com/resources/get-started/ just to get a feel for the basics, you have to learn to walk before you can run, right? If you still need help be sure to fork one of the demos and show us what you already have tried, that way we can see your thought process and thus better help you understand the tools! Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/oNQPLqJ?editors=0010
    4 points
  3. hi @lizettevanboom I moved the styling for the div-2 inside the CSS to collect it all in one place also i used 1 scrolltrigger to pin div-1 with pinSpacing false and another trigger for the div-2 to animate it , ofc @mvaneijgen solution is more professional and organized 🫡 but I wanted to give another quick lazy solution https://codepen.io/ahmed-attia/pen/oNVOrxN?editors=0110
    4 points
  4. Hi @lizettevanboom That is where timelines come in! Personally I find 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. So here is your demo with ScrollTrigger disabled for now, so that we can just focus on the animation. I like to add empty tweens to a timeline when working with ScrollTrigger that just do nothing for x amount of seconds. Here it does nothing for 1 second and your animation tween also has a duration of 1 second. Normally in GSAP things work with durations, but when working with ScrollTriggers with a scrub value these durations get converted to distance. It might be hard to wrap your head around, but maybe this example helps. Let's say we have four tweens that all take 1 second to animate and the total ScrollTrigger distance is 400px each tween will then take up 100px. If we remove one tween and make the last tween take 2 seconds the first two tweens will take still 100px, but the last tween will get stretched over the remaining 200px. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Als je nog vragen hebt horen wij het graag en hoop dat het help! Happy tweening! https://codepen.io/mvaneijgen/pen/XWGQLrx?editors=0011
    4 points
  5. Heya, Yep, if you've followed the youtube video you'll have seen how to do it. You can't change the order of table rows with a class, but you can physically manipulate the DOM. 1) Grab the state 2) Update the DOM with JS 3) Animate! Here you go - https://codepen.io/GreenSock/pen/poYYmzR
    4 points
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. Is this the one you meant?
    3 points
  18. @gaggo I believe this problem is caused by the pnpm not handling package name aliases properly. Unfortunately this problem is a bug in pnpm at the moment. I'll try to find a workaround, will comment here if successful.
    3 points
  19. I've loaded your path in this SVG tool to see what is going on https://yqnn.github.io/svg-path-editor/#P=M_0_0_L_1708_0_L_1708_1330_Q_830_633_0_1330_Z And when manipulating the path and comparing to the other path it was easy to see what values where changing. I don't know how the path is build, that is really important when working with MophSVG so I couldn't tell you what is going wrong. I've used the attr object and target the d attribute directly. When working with SVG masks via clip-path (maybe also other methods) the SVG is as big as it is and it can not conform to the element you're loading it on. I've written a guide which walks you to several solutions and workflows. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/rNbBmwO?editors=0010
    3 points
  20. Hi, Just a matter of making the right calculations. Keep in mind that when dragging to the left the numbers are negative, so the max number in terms of the bounds is zero. For the minimum number is the natura width of the element minus the scroll width: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth Here is a fork of your demo (thanks for creating such a simple demo, we love those around here 🥳) https://codepen.io/GreenSock/pen/VwNZaxQ Hopefully this helps. Happy Tweening!
    3 points
  21. Update: The job has been closed and I want to thank @Sahil for a really professional job and a quick turnaround. If you're looking to hire GSAP professional I would happily recommend Sahil. 👍😀
    3 points
  22. Heya, As Jack mentioned, there are no 'frames' in GSAP animations. So it would be pretty confusing to have a GUI that works that way. Maybe a stepped ease is what you're after? https://gsap.com/docs/v3/Eases/SteppedEase/ You can step through the progress of a timeline too, if you're using a stepped ease you could step though that number of times? https://codepen.io/GreenSock/pen/NWJQvdy?editors=1011 Good luck with your learning.
    3 points
  23. Bedankt @mvaneijgen and thanks @Toso! It works, nice to see two different approaches. Good lesson for me that you can first set up an animation with a timeline and then convert it to distance.
    3 points
  24. Online editors like Stackblitz, CodeSandbox, etc. don't seem to unify the packages, so if the @gsap/react has a dependency on "gsap" it loads that separately and then the normal "gsap" package you're using in the project is treated as a separate thing (so 2 distinct GSAP objects). Therefore, the context that gets created inside your useGSAP() is from the gsap that's loaded with useGSAP which is DIFFERENT than the one that's creating your actual animations. This is why it's best to register the useGSAP hook as a plugin: gsap.registerPlugin(useGSAP, ScrollTrigger); (do that BEFORE you use the useGSAP() hook of course). Does that resolve things for you? Yeah, that's because if you do it inside the useGSAP and you haven't registered useGSAP already, the "gsap" that creates the context is not the same one as the gsap that's creating your tweens/ScrollTriggers, as explained above. And again, this is almost never required in a "real" project because those should unify the packages during the build process. But it's still totally fine to register the useGSAP hook in any case. In summary: Is suspect it'll solve everything for you if you just gsap.registerPlugin(useGSAP, ScrollTrigger).
    3 points
  25. +1 except I now have to say Illustrator instead of AI otherwise everyone gets confused. 😜
    3 points
  26. something like? i created a setInterval and it fires every 2s you can play with the duration and ease to get the effect you want https://codepen.io/ahmed-attia/pen/KKELGWz?editors=0010
    3 points
  27. Great to hear you've solved your issue. Give it time, this was me 10 years ago. Wouldn't have it any other way now, combining the design with the development skills is amazing, you'll find that one day you can build what ever you design! Good luck with the project and happy tweening!
    3 points
  28. I think the problem happens because you are not listening for the scrolling event I created a quick demo where you listen to leave and enter events on the section and also the scrolling https://codepen.io/ahmed-attia/pen/KKEYodo?editors=0010 https://codepen.io/ahmed-attia/pen/wvOZmLx another one with border-radius and mix-blend-mode instead of svg and clipping to edit the border-radius https://9elements.github.io/fancy-border-radius/ https://codepen.io/ahmed-attia/pen/BabEPbx?editors=0110 I hope this helps a little, PS: this code was created by (gsap helper 🫡 or Rodrigo 🫡 I can't remember ) he added it as a solution in a different scenario i just added the scale to get closer to your idea
    3 points
  29. Hi @Bayu Handono, What do you have trouble with? Seems to work at my end. I've written a guide how to work with clip-path in GSAP with a link to a tool which with I make my clip-paths https://bennettfeely.com/clippy/ if you just drag the points to the bottom of the square it will animate .from() the bottom to the top. Hope it helps and happy tweening! As an example https://codepen.io/mvaneijgen/pen/LYavRmQ?editors=0110
    3 points
  30. Yeah I would restructure your layout so that you can easily do this. Right now you moved the whole container its width over the whole screen, but I would instead position all your elements on top of each other, something like this https://codepen.io/mvaneijgen/pen/MWxxLQV?editors=0010 And move the elements in view when you need them, then it will be also much simpler to have certain things happen at the same time. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/jOJJJzX?editors=0100
    3 points
  31. Here are some of the problems I noticed: You were adding a new "mouseleave" event handler on EVERY "mousemove" event, so when the mouse left the button, there were probably thousands of those firing, all trying to tween the same properties of the same element. Massively wasteful. You weren't applying any overwrite logic, so you were creating a bunch of overlapping tweens, all controlling the same stuff. I'd recommend using gsap.quickTo() for the best performance on things where you're constantly interrupting and trying to go to new destinations. You were using pageX/pageY instead of clientX/clientY for measurements, thus after scrolling the calculations would be incorrect. You were only applying the magnetic affect to one .btn instead of all of them. Just loop through them accordingly. You were using an onscroll listener, but you might want to consider using ScrollTrigger instead because it simplifies things. Maybe this will help: https://codepen.io/GreenSock/pen/QWooxbG?editors=0010
    3 points
  32. I was working on a basic example, but the article from @PointC that @mvaneijgen mentioned will explain everything you need to know and more! https://codepen.io/snorkltv/pen/mdooqQX?editors=1010
    3 points
  33. When you use function based values and call ScrollTrigger.refresh() these values get recalculated. If you don't use function based values, but use functions in your values, ScrollTrigger will think they do not update and keeps the values it has calculated on initial load. I've also moved the item.getBoundingClientRect() in to the value, to be sure it recalculates the values. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/ZEZOOEv?editors=0010
    2 points
  34. Hello there. The documentation has the answers to your questions. 1. You'll want to look for the scroller property. https://gsap.com/docs/v3/Plugins/ScrollTrigger/ 2. No, unfortunatelly it is not possible for ScrollSmoother to have it smoothen the scroll of a different element than the body. https://gsap.com/docs/v3/Plugins/ScrollSmoother/#faqs
    2 points
  35. Hi @abernal96 welcome to the forum! Great illustration and great demo! Sharing this makes helping you a breeze, great work! A small note to start, be sure if you fork something to always update GSAP to the latest versions. In your example you'd loaded version 3.9.1 and we are currently at version 3.12.5, so if there were any bugs they would be fixed using the newest version! If you open the JS panel you get a search box and this way you can load most of the popular plugins including all GSAP plugins (even the paid once!) and below here a codepen which just always loads the latest versions of all the plugins, which I personally use to start a new project. https://codepen.io/GreenSock/pen/aYYOdN This helped me understand snap, so maybe it also does you. Snap snaps to a value between 0 and 1, where 0 is the start of the ScrollTrigger and 1 the end. As you have done you can do some fancy calculations, but it is maybe also good to understand what it is doing. You can feed an array to the snap value and this helped me understand it. You want to snap to the start, end and the middle, so if you feed it an array like so [0, 0.5, 1] it would do that. If you would log the value you set now 1 / (videoSections.length - 1) you will see that this gives you the value 0.5, which means it will snap to each value with increments of 0.5, so that would also be 0, 0.5 and 1. If you want to also snap the the initial slide on page load you'll need to create another ScrollTrigger which has the trigger that starts on the top of the browser and then has the end trigger of the top of your .horizontal_container then you can set a snap value of snap: 1, which will make it snap to the end of the ScrollTrigger you've created. 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/oNObWKN?editors=0010
    2 points
  36. 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
  37. Hi Fatima, when I built banners, we normally embedded type as compressed PNG images. The trade-offs -- SEO, accessibility, responsiveness -- are more acceptable in ad banners, since they run in i-frames of fixed dimensions. Long blocks of legal text were sometimes done with system fonts, or as limited palette PNGs. good luck!
    2 points
  38. 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
  39. 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
  40. Hi @SamStAubyn, Had to restructure the HTML/CSS a lot to get it to behave some what and it still isn't perfect. I advise you to remove GSAP for now and just focus on CSS and get everything lined up like you want it to line up when the animation is playing. I've used @Carl "GSAP Staggers with Seamless Loops" logic, see video below for the looping effect and the main thing I've done in the JS is made separate timelines for each of the animations, so now the sentence can type in once and when it is done it will cal the word looping timeline. I've changed a lot of tweens in to .from() tweens, sometimes it is so much more easy to animate .from() instead of .to(), certainly in this case because you want it to type .from() a string of '' (nothing) to what is already there, GSAP is smart and it will see what is the current content and just animates to that, no need to get the content yourself in JS. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/VwNwpeJ?editors=0011
    2 points
  41. You can set pinnedContainer: '.pin-gallery', to you imageReveal ScrollTrigger. from the docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/ Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/JjVPZGX?editors=0010
    2 points
  42. That has nothing to do with GSAP and it's all basic Javascript. I strongly recommend doing a few Javascript tutorials to familiarise yourself with the tool, otherwise you keep running in to the same issues. https://jsfiddle.net/ga6b9328/
    2 points
  43. same problem here, I suspected that this is happening but didn't know that `onLoad` exists, so I tried it and it worked perfectly. So, I made an account just to thank you🙇‍♂️
    2 points
  44. I would love some some insight into how I could go about this in a better way. The reason I have an intro animation that calls a scroll animation on complete is because the intro animation is a page loading animation. When I land on the page, I need to see the intro animation, and only after the intro is finished should I be able to scroll to scrub the rest of the page animations. Another reason I had to do it this way is that the elements in the page loading animation need to be animated out of the view once the scrolling begins. Here is a minimal example: https://stackblitz.com/edit/react-gf8jgn?file=src%2FApp.js I am adding child timelines to a main timeline to keep my code organized. The masterScroll animation is very long and so I moved it to it's own file along with the intro animation. I am wrapping my page with an AnimationWrapper component because I need to fetch some data on the main page, and I can't do that in a client component in nextjs. As you can see, the scrubbing works, but the numerical scrub amount has no effect, and snapping does not work.
    2 points
  45. No worries, that is what the forum is for! Happy to help. But yeah there is just so much already thought of for you in GSAP, it really pays to grap your favourite beverage on a rainy day and just start reading some of the documentation. You'll be surprised what tools you'll find that you didn't know you needed. Again welcome and happy tweening!
    2 points
  46. You have to make sure that everything you want to pin is inside a container that you use as the pin container. Then all your code works as expected. (I've also set clamp() around your start, so that it only starts when the visitor starts scrolling. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/GReaQNL
    2 points
  47. Yep, I've learned a few tricks with smart SVG folks like you, @PointC, @OSUblake and @Carl around, that make me look competent enough 😂
    2 points
  48. Hi @EduardB welcome to the forum! Without a minimal demo it is hard to help you debug. Javascript is 1/3 of the code that is used for GSAP to do its thing. For instance if you have the following in your CSS transition: all 300ms ease-in; you're going to get choppy animations, because then you have Javascript and CSS fighting for who gets to animate what I'm not well versed in willChange: but I would set in in CSS instead of JS, because it is a tool to tell the browser "heads up" this is going to change, so setting it in JS when it is changing feels a bit late. Also you can set properties that will-change and scale, translateY are no CSS properties (well they are kinda, but it is not what GSAP uses) it are values of transform. If you could make a minimal demo we would be happy to take a look at your setup and help you debug. Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/aYYOdN
    2 points
  49. I would set a scale on the image (maybe calculate how much you need the scale to be based ont the window.hight and the image height). Also set the image to object fit cover and add a clamp to the ScrollTrigger, so that it always starts from a point even if it already should be playing. Check out for an explanation. I've modified your pen a bit, to visually see where the image is and the red border shows where it's clipping it off. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/gOEyLLO
    2 points
  50. Hi @JJEccles welcome to the forum! Just to make sure this is you issue right? When you resize the screen bigger, you'll see the next element coming in? You could build your own resize handler and call ScrollTrigger.refresh() on every tick, this will be horrible for performance and the site will probably lag while resizing. ScrollTrigger watches for a resize event and then debounces so that it only has to recalculate everything once (when the visitor stops resizing). I have to say that 'normal' visitors never resize the browser in the middle of scrolling a page, that is only something developer (and annoying designers) do while testing a website. Personally I wouldn't focus on fixing this weird behaviour and instead spend that time on making the site more accessible for vistors who can really benefit for these enhancements. Hope it helps and happy tweening! Screen Recording 2024-02-18 at 16.25.00.mov
    2 points
×
×
  • Create New...