Jump to content
Search Community

Leaderboard

  1. mvaneijgen test

    mvaneijgen

    Moderators


    • Points

      90

    • Posts

      2,733


  2. Cassie test

    Cassie

    Administrators


    • Points

      68

    • Posts

      5,046


  3. Rodrigo test

    Rodrigo

    Administrators


    • Points

      58

    • Posts

      7,004


  4. GreenSock test

    GreenSock

    Administrators


    • Points

      44

    • Posts

      23,267


Popular Content

Showing content with the highest reputation since 05/25/2024 in all areas

  1. Hi everyone, Looks like we're back online again. ✨ Again, so sorry for this disruption.
    10 points
  2. Hi @Cassie This morning we have started to face the same issue with 504. Could you check if there's another error with your cloud service provider?
    5 points
  3. If you want the text to be already tweening before you start pinning the section, you will need to seperate things out into two ScrollTriggers. One that is just responsible for tweening on the text but does not pin anything - that should have its start whenever you want before the top of your section hits the top of the window. And another one that is just responsible for the pinning and does not have a tween attached - e.g. set up like the one you already have. Something like what follows below. And indeed, if you have any problems or questions with regard to anything else, it would be best to create a new topic for those alongside a minimal demo. gsap.registerPlugin(ScrollTrigger); // ST for tweening but not pinning const scrubTl = gsap.timeline({ scrollTrigger: { trigger: ".conth2fijo", start: "top center", end: "+=150%", scrub: 3, } }); scrubTl.to(".h2fijo", { x: 0, xPercent: -60 }); // ST for pinning only ScrollTrigger.create({ trigger: ".conth2fijo", start: "top top", end: "+=100%", pin: true })
    4 points
  4. Glad to hear @mvaneijgen's solution worked for you. There's absolutely nothing wrong with it. Here is an alternate solution that isn't any better or worse but it's what I usually reach for. I was already working on it so figured I'd post anyway. The basic idea is that you create a function that creates a tween that contains an onComplete that calls the function again at a random interval https://codepen.io/snorkltv/pen/xxNLbwa?editors=0010 Going one step further you could tell the function which element to drop and now you have multiple elements following the same procedure https://codepen.io/snorkltv/pen/KKLvwMq?editors=1010
    4 points
  5. GSAP is highly optimised and will 'bake' all the animations/values on first load, so that it only has to focus on animating the elements. So on page load it gets a new random value and then used that value when ever, but the utils random function has an option to create a function of it and if you use this in the onComplete callback to set a new repeatDelay value it will work as you expect https://gsap.com/docs/v3/GSAP/UtilityMethods/random()/ I've written it out really verbose, so that you can see the value updating in the console, but you can just feed in the random function directly. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/WNBEeKL?editors=0011
    4 points
  6. I was just about to answer with a strong suspicion. When using Wordpress / Elementor these jumps on pin / unpin are a typical sign of CSS transitions being applied somewhere on the element that gets pinned. Just as in this other recent post and the older one below. Maybe those can help you figure out what to look for. Edit: And now I see, that Cassie already seems to have pinpointed the exact element/transition.
    3 points
  7. Not sure what you mean, it uses threejs which is a library that is based on webgl, Yuri uses threejs and vanilla javascript so it's all the same. GSAP can animate almost anything in threejs, so you can easily create some planes on the canvas, give them textures, rotatations and position them the way you want, then wrap in group and use gsap to animate that group like gsap.to(group.rotation, { y: 360 }) and adding scrollTrigger to it.
    3 points
  8. Thanks to you too then, Jack 🙂 Awesome library you've made and the help provided by you and your team in these forums is second to none 👏
    3 points
  9. Adding a note here that setting letter-spacing solved this issue in the project I'm working on. Thanks!
    3 points
  10. https://github.com/pnpm/pnpm/issues/4724#issuecomment-2174349045 If you have a project with such issue, then just create .npmrc in the root of the project with: strict-store-pkg-content-check=false
    3 points
  11. Hey Christina! I've rewritten this a little for you, https://codepen.io/GreenSock/pen/LYoOjLr?editors=0010 Some notes & further reading. Use transforms where possible instead of width/height/margin etc as it's better for performance (smoother animation) This solution is based on a technique called staggered staggers which @Carl from the wonderful creative coding club explains here https://www.snorkl.tv/greensock-staggers-with-seamless-loops/ This thread covers more details about your particular use case, where you have images overlapping and z-index changes Hope this helps to give you a better starting point!
    3 points
  12. Here's a preview of the next release showing it works the way you're requesting regardless of the debounce value: https://assets.codepen.io/16327/Observer.min.js https://codepen.io/GreenSock/pen/JjqyYmv?editors=0010 Thanks for reporting that, @akapowl
    3 points
  13. Hi @Hayot welcome to the forum! There demo's are all on the demo page https://gsap.com/demos/?page=1&tags=ScrollTrigger Hope it helps and happy tweening! Here is the particular demo https://codepen.io/GreenSock/pen/eYpGLYL
    3 points
  14. Hi @G54P welcome to the forum! Check out keyframes, withit you can define multiple steps and apply an ease over the whole duration of the steps. https://gsap.com/resources/keyframes/ Your demo just moves an element from left to right, so I wouldn't see a need for any GSAP feature other then the default .to() where yo move the element from 0 to lets say 100, but apply the ease that fits the animation you're after. Check the ease visualiser if you want a visual way of creating eases. https://gsap.com/docs/v3/Eases/ If you still need help after this please include a minimal demo with what you've already tried. We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! And this also wil save a lot of time back and forth because we can dive in the code directly. Hope it helps and happy tweening!
    3 points
  15. Both approaches are not very different in terms of performance. Pre-optimization at this level is usually wasted work!
    3 points
  16. Oh my, I had a project where I needed these kind of clip-paths, so I though lets check out Jacks function! How amazing, you can just use any shape and it automagically fixes the path for you, no need to thinker in some design program with weird sizes! https://codepen.io/mvaneijgen/pen/VwObeme
    3 points
  17. You don't want to create a function of the snap value ❌ snap: () => 1 / 4 ✅ snap: 1 / 4. Your code will calculate the value and then snap to that value eg 0.25, but I think you want to snap it to increments of 0.25 eg 0, 0.25, 0.5, 0.75, 1 which you get if you just feed it 1 / 4. When working with snap you can also feed it an array and thus just hard code the values, this is something I always like to do, to test if the math I'm using is correct with the values I want to get snap: [0, 0.25, 0.5, 0.75, 1] it is always a good idea to test your logic. Hope it helps and happy tweening!
    3 points
  18. Hi Glad to hear you are interested in learning more about GSAP and you're trying things like this. Here is a basic demo from my course ScrollTrigger Express that perhaps may help. https://codepen.io/snorkltv/pen/PoxojaO?editors=0010 Open it in a new window and resize to see that it is fully responsive and that the pinning stops whenever "japan" is visible in the viewport. Also notice that each country name (card) is a different width and it adjusts flawlessly to resize. The course contains loads of videos to help you through these types of common scrolltrigger tasks and many more advanced setups. Hopefully this demo will give you some ideas how to incorporate the code into your project. Carl
    2 points
  19. I was surfing normalize scroll of ScrollTrigger and saw this in docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()/ ScrollTrigger.normalizeScroll({ allowNestedScroll: true, lockAxis: false, momentum: self => Math.min(3, self.velocityY / 1000); // dynamically control the duration of the momentum when flick-scrolling type: "touch,wheel,pointer", // now the page will be drag-scrollable on desktop because "pointer" is in the list }); In the end of momentum line there should be a comma, instead of semicolon. as it's in a object Here: momentum: self => Math.min(3, self.velocityY / 1000);
    2 points
  20. Hello Rafal. Reading the documentation usually helps a lot. Here is what it has to say on pinning: https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#pin The important parts for your question are underlined. Since you are simply setting pin to true, you are telling ScrollTrigger that you want to pin the trigger element, which is your logo. But judging from your description that is not what you want. What you want instead is target the element that you want to pin. I added an id of 'hero-image' to your image in the hero-section to make it really easy. pin: '#hero-image' That should work a lot more like you intended then, right? https://codepen.io/akapowl/pen/bGyMGxr
    2 points
  21. Just following up on the DM you sent with the link to your site. - this is the issue! Stray CSS transition on the pinned container https://codepen.io/GreenSock/pen/zYQWagj?editors=1100
    2 points
  22. Hi Rodrigo, thanks for your reply. This actually really helped me! I tried to delete every single css rule that affected multiple elements, I found out that the problem was this line of code html { scroll-behavior: smooth; } I don't know why, because I use this rule in every project and it never happens to find out this issue, even using gsap 🫤 But now it works fine!!! Thank you very much for your help!
    2 points
  23. Hi there! So if I were you I would store the timeline somewhere where you can access it in a click function, then use control methods to control the timeline Here's a simple example without React https://codepen.io/GreenSock/pen/GRaQwpZ?editors=1011 This is a good demo showing this pattern in React - https://codepen.io/GreenSock/pen/eYWGeGe And a section of the GSAP docs https://gsap.com/resources/react-basics/#creating-and-controlling-timelines
    2 points
  24. All good! Sounds like speed is the right fit here. And yeah, in terms of "why" this is like this, 'auto' in this case just means "automatically shift the image within it's container in the direction of the largest gap (up or down)." It's solving the most common challenge we saw people having with parallax images, where someone wants to move an image within a container without it moving outside of the bounds of the parent. This demo shows this, with speed it's hard to know *what* speed is correct, and you can end up moving the image too far and cropping the image off https://codepen.io/GreenSock/pen/bGyLmEG?editors=0100 So it's certainly possible to get consistent results but you have to ensure that all your images are the same ratio and positioned the same in the CSS and in the same ratio container. That's where the control lies.
    2 points
  25. Actually it works! Thanks! Here's the StackBlits demo for anyone who wants to follow up.
    2 points
  26. Hello Mattes. That sounds more like a Three.js question. For the future please keep in mind, that this forum is intended for questions about GSAP and not intended for general debugging. The line marked in the picture below shows the file the error occurs in - in dev-tools you can usually click on those links in the braces and it will take you to the line of the file causing the malfunction. In your case it is in script-gsap.js ... ... and this is the line causing problems: ... .to(model.children.map(child => child.material), { duration: 1, opacity: 1, ease: 'power2.inOut' }, 0); ... If you log out the material for each direct child of that model (of which there is only one), you will realize that it returns undefined - That's the cause of your problem. If you log out the child itself, you will realize that it has another child - which does have a material. And if you target that instead ( I just tried with child.children[0].material ) things should already work for you. I hope this will help. Good luck with the project.
    2 points
  27. Switching from useEffect to useGSAP indeed solved the issue!
    2 points
  28. The useEffect dependency doesn't stop the hook from running initially (it just re-runs it when "data" changes). What I'd suggest is something like: useEffect(() => { if (!data.length) return; var featuredWorkTL = gsap.timeline(); ... }, [data]);
    2 points
  29. Hi You might want to have a look at the fast scroll end feature in Scrolltrigger https://gsap.com/docs/v3/Plugins/ScrollTrigger/#fastScrollEnd Hopefully this helps Happy Tweening!
    2 points
  30. I corrected my code following your advice. it works. Thanks a lot
    2 points
  31. Are you asking how to animate text in from the right? Something like this, give it a go, if you get stuck, make a new thread with a minimal demo showing what you've tried. gsap.from(".text", { xPercent: 200, scrollTrigger: { trigger: ".section" ... } })
    2 points
  32. Also - small bit of feedback. You don't need a timeline here. A timeline is for sequencing multiple tween. // this works but there's no benefit to a timeline gsap.utils.toArray('.ani-flash-in').forEach(item => { var tl_item = gsap.timeline({ scrollTrigger: { ... } }); tl_item.from(item, { scale: 1.1, opacity:0, filter: "blur(10px)", ease:"power2.inOut", duration: 0.666 },"0"); // <--- this 0 is redundant, it's a position parameter that's placing the tween at the beginning (0 seconds in to the timeline }); // better - just use a tween gsap.utils.toArray('.ani-flash-in').forEach(item => { gsap.from(item, { scale: 1.1, opacity:0, filter: "blur(10px)", ease:"power2.inOut", duration: 0.666, scrollTrigger: { ... } }); }); 🔥 Also filter is VERY hard on browsers to animate. (Bad for performance) I would advise to use an opacity fade or something instead of blur.
    2 points
  33. Heya! Right, as each forEach loop just contains one of your elements, so there's nothing to stagger A ScrollTrigger can be added to a tween, or a timeline or it can just be standalone. (or in this case, with the batch method, it's an entirely different pattern, where ScrollTrigger is internally creating a batched group of ScrollTriggers for you) If you set a trigger on the row you'll be able to stagger the elements inside as all three will enter the viewport at once (when they're in a row) BUT you won't be able to detect when each one individually enters the viewport when they're in a column, (as the trigger logic is on the container and not on the individual children) This is largely the problem that batch is solves You don't need a timeline or a loop if you're going with the batch route. I think it's the best option here. You just tell ScrollTrigger which elements you want to 'batch' and then when they pass the trigger points they get passed through to the callback functions. If multiple enter at the same time (like a row), and you've defined a stagger in the animation in the callback, they'll be staggered. However, if you've only got one element entering the viewport at a time, (like a column) there's nothing to stagger, so they'll be animated one by one. You can define different animations in the callbacks https://codepen.io/GreenSock/pen/ExzoGNN?editors=1010 Definitely give the docs a read too, they're very detailed. https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch()/ Hope this helps.
    2 points
  34. Hello Javier. As Jack already mentioned, you've got a CSS transition applied to the element that you are pinning with ScrollTrigger. This right here: When simply just removing the transform part in the transition rule for the .e-con class, things already didn't jump anymore for me. Maybe the thread linked below can also help - I sure hope it does. Good luck.
    2 points
  35. To "offset" the animation? Not sure I understand what you mean, but you can animate one animation with another animation. So for example, you could pause() your main animation, and then create a tween of that animation's playhead such that it animates it from a time that's offset (not zero). And you could attach that tween to the ScrollTrigger. let animation = gsap.timeline(); animation.to(...).to(...); animation.pause(); let tween = gsap.fromTo(animation, { time: 0.5 }, { time: animation.duration(), duration: animation.duration() - 0.5, ease: "none", scrollTrigger: { ... } }); I'm not sure how exactly you'd qualify something as "bad", but it's not ideal performance-wise. I personally try to avoid creating anything new during scroll just because scrolling is so performance-sensitive. It's usually smarter to pre-create things so that they're ready to rock-n-roll at a moment's notice during scroll. I don't think I've ever seen a situation that called for creating a ScrollTrigger inside of an onEnter/onLeaveBack. That kinda sounds like an engineering problem potentially. But hey, in the real world (not theoretical), the way you create your ScrollTrigger in an onEnter may be total fine and not cause any noticeable issues whatsoever. I'd suggest running tests. Probably #2.
    2 points
  36. Notice you've actually got TWO scrollbars on the right side. This looks like a CSS issue in the way you set it up. Just remove the overflow-x: hidden from the html element. body { /* NOT html, body */ font-family: "Rock Salt", cursive; width: 100%; height: 100%; color: #fff; overflow-x: hidden; } Does that clear things up? Basically, your scroller wasn't what you thought it was.
    2 points
  37. For anyone wondering I worked around this by replacing <br> tags with a custom <span> that simulates a <br> based on this solution. Codepen: https://codepen.io/sombrilla/pen/jOoYyqp
    2 points
  38. This is when having MDN in your bookmarks is a great idea, no matter how many years you've been in development those resources always help 😉 https://developer.mozilla.org/en-US/docs/Web/API/Element/closest Happy Tweening!
    2 points
  39. Recent update to that github thread: https://github.com/pnpm/pnpm/pull/8201 TLDR: Might get turned from an error into a warning.
    2 points
  40. Hi, I apologize for the 404 error with my NextJS demo. It turned out to be a permission issue that I've since corrected (https://codesandbox.io/p/devbox/c4cq6q?file=%2Fpin-element%2Fsrc%2Fapp%2FPinComponent.js%3A28%2C11). However, I'm happy to report that the useGSAP hook has been a lifesaver! It completely resolved the issues I was having with animation cleanup in React, especially with strict mode enabled. A huge thank you to @Rodrigo for the fantastic support!
    2 points
  41. Hi, you can specify an endTrigger https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#endTrigger here is a quick example: https://codepen.io/snorkltv/pen/jOoLqNx?editors=0110 if you need something different please provide a minimal demo
    2 points
  42. OfCourse I can @GreenSock Was curious about it and wanted to bring this into notice.
    2 points
  43. Yeah, that's pretty tricky but here's a helper function that'll allow you to "protect" certain elements from the split: https://codepen.io/GreenSock/pen/qBGmJRR?editors=0010 You just use selector text for the "protect" property. Seems to work well for your scenario. Right?
    2 points
  44. Hi @rovindie welcome to the forum! Just add the images to your HTML, position them with CSS and then add them to the animation. I always like to start any animation in GSAP with a timeline (they are just so much more powerful). I've forked your pen and created a timeline and installed GSDevTools, so now we can see the timestamp of each tween, just add a new tween to the timeline with your image animation and use the position parameter to place it at a specific point. I've also disabled ScrollTrigger for now, that because 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. Let see how far you can come with this info, we love to see what you can come up with, 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/mvaneijgen/pen/wvbdMYj?editors=0010 Edit: something like this could work
    2 points
  45. By default each tween in GSAP has an ease of power1.out you could set this to steps(1), it will forgo all the easing and just animate the animation form 0 to 1 in an instance. Check out the ease visualisers if you want to see how it works. https://gsap.com/docs/v3/Eases/CustomEase/#description You can make it snappier by what you did setting the ease and the duration of the snap, but if you then set scrub: 1, this will mean that the animation will lag behind 1 second, so all the snapping will also lag behind with one second. Even with this setup ScrollTrigger will still have to wait until the user has done scrolling, so it will never be instantly. https://codepen.io/mvaneijgen/pen/yLWbyQw?editors=0010 This is how close you can come with ScrollTrigger, but what you're asking is an effect you get with working with the Observer plugin so if you want to take it further, that is the tool I would use. Hope it helps and happy tweening!
    2 points
  46. It rotate both was based on where the current item is, there isn't really "other direction". If you only ever want it to spin in one direction you could keep track of the current item and then check how much the items that is being clicked is removed from that spot and then calculate how much it should rotate in your particular direction to get to the same spot. If they all get the class .circle I think nothing would change, but I would just try it and the if an issue arrives tackled that when you get there. Hope it helps and happy tweening!
    2 points
  47. I've done some tweaks and add 180 degrees to each element and this seem to do the trick. I've also updated to the latest version of GSAP. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/mdYRLRB?editors=1000
    2 points
  48. I'm not sure why you would need flip for that. If you create a timeline you can just mix and match Flip with normal tweens and combine them in to one animation. When animating complex strings you have to make sure all the suffix are the same, eg in your case suffix all the values with a % sign. You can read more about this here In your Flip state you tell it to capture the clipPath, but none of the elements you 'watch' have a clip path property, only your <img> tag has this property, to that is also the element you want to watch. Again tweening a clipPath isn't really something you'll need flip for you can just use a normal tween for that. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/NWVdPxL?editors=0010
    2 points
  49. You can just set the height using the start and end properties. I don't know what 000 0 200vh would do, but I've modified your demo so that the end is at the bottom of the element + the window height time 2 eg 200vh. Now the pin lasts the height of the element times twice the window height. You can also set it to `top+=${window.innerHeight * 2} top`, so that it is just 200vh. With ScrollTrigger always enable markers, so that you can see what it is doing under the hood and for bonus points set the id of the ScrollTrigger for maxim readability! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/qBGqKgg?editors=0010
    2 points
  50. hi @mvaneijgen, thanks for quick reply. You are right my mistake. It is working fine now. Thanks a lot again.
    2 points
×
×
  • Create New...