Jump to content

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

GreenSock last won the day on October 3

GreenSock had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by GreenSock

  1. Welcome to the forums, @laurentnicolas. If I understand your goal correctly, you'd need to build out a single timeline animation that handles all of those motions, sequenced in whatever way you want. For example, the first part of the animation moves all the panels xPercent: -200, then you insert an animation that animates [whatever] vertically, then an animation that moves the panels to xPercent -400 for example. That way, as you scrub that timeline, it does precisely what you want in the proper order and everything is smooth. Don't try to overthink things and make one ScrollTrigger force another one to stop and start again with onEnter/onLeave callbacks. That'll get very messy and likely inaccurate. A single timeline is the way to go. My advice: don't hook it up to ScrollTrigger at first. Just get the animation to play in the way you'd expect, and THEN hook it up to the scroll position with ScrollTrigger. Good luck!
  2. Welcome to the forums, @Zoff Unfortunately we can't really diagnose anything by just looking at a snippet of code - can you please provide a minimal demo? Please only include the things that are absolutely essential to show the issue (don't include your whole project). A CodePen or CodeSandbox is best - please read the forum guidelines Please also keep in mind that we can't support 3rd party libraries (ngx-slick-carousel sounds like a 3rd party library for Angular) but we're happy to answer any GSAP-specific questions.
  3. I assume you wanted something like this: https://codepen.io/GreenSock/pen/LYjNbWp?editors=0010 I enhanced it by gradually speeding up or slowing down. You can tweak it however you want. Strategy: tween timeScale of the loop timeline. You can use a negative value to make it go in reverse. Use a delayedCall() that you just restart whenever there's a wheel event so that after 1 second of inactivity, it fires off a timeScale tween back down to 0. Does that help?
  4. Hi @ouis. It looks like there were a bunch of logic issues, React-related problems, no boxes were selected, and you were using VERY old syntax from before version 3. If I were you, I'd just use the helper function from the docs that handles looping things on the x-axis: https://codepen.io/GreenSock/pen/abydjzJ?editors=0010 Is that what you were looking for?
  5. First of all, thanks for being a Club GreenSock member! 🙌 I'm pretty sure those vulnerabilities have absolutely nothing to do with GSAP. The messages says "audited 1946 packages" and GSAP has absolutely zero dependencies, so it sounds like you've got a bunch of other packages installed in your project, some of which have vulnerabilities. We're not aware of any vulnerabilities in GSAP. 🤷‍♂️
  6. No problem - glad you figured it out! Thanks for letting us know.
  7. Yep, I agree with Blake. I'd probably just do this: let targets = gsap.utils.toArray("...all your selector text here..."); if (targets.length) { // create your animations in here... }
  8. GreenSock

    Simple Animation

    Could you be a little more specific, @renny? We don't really have the resources to provide free "build-to-order" consulting services (please read the forum guidelines), but if you have a GSAP-specific question we'd be happy to answer it. Please make sure your minimal demo only includes the isolated piece you're wrestling with (no need to use the real artwork - plain <div> elements are fine). The simpler and more targeted your demo, the more likely you'll get a helpful answer. Isolating is key to troubleshooting for any developer. 👍
  9. Sure, how about this?: https://codepen.io/GreenSock/pen/JjyYxPY?editors=0010 The issue with the way you were attempting it was that you had logic issues due to the fact that onEnterBack would only occur if you go PAST the end position (which you had set to 30px more than the height of the element, creating a relatively large gap) and then come backward into the active area. Just use toggleClass and an end value that's super big (so that it never hits the end).
  10. Sort of, yeah. I generally think more like this: let sections = [section1, section2, section3, section4], // function references clampIndex = gsap.utils.clamp(0, sections.length - 1), curIndex = 0; window.addEventListener("wheel", e => goto(e.deltaY < 0 ? -1 : 1)); // you'll also need to listen for touchmove and pointermove events to sense when a touch device attempts to scroll/swipe. function goto(direction) { // direction is 1 for forward, -1 for backard let newIndex = clampIndex(curIndex + direction); if (newIndex !== curIndex) { sections[newIndex](direction); curIndex = newIndex; } } So you'd have a section1() function, a section2() function, etc. that handle animating to that state. Depending on your content, you may need to also pass in the direction so that it knows if it's animating from the previous state or the next state (backwards). Don't forget to listen for touchmove/pointermove events to sense when a user tries to touch-swipe/scroll. It can be a little tricky. Good luck!
  11. My best guess (without a minimal demo) is that it's InertiaPlugin, because you have inertia: true. That plugin must constantly track the properties (typically "x" and "y") to know their velocity at any given time. You can enable/disable that using the InertiaPlugin.track() and untrack() methods: InertiaPlugin.track("#element", "x,y"); InertiaPlugin.untrack("#element", "x,y"); Other than that, yes, GSAP will eventually autoSleep when there haven't been any GSAP animations for a while. Even if it didn't sleep, that wouldn't take up much processing at all. It's super cheap. So if your device's fans kick on, you've almost surely got something else going on that's not just GSAP or Draggable being idle.
  12. It seems like you're loading the correct file via the <script> tag, DrawSVGPlugin.min.js - I've never heard of anything like this before. Can you please provide a minimal demo that allows us to reproduce the issue? Based on the error you mentioned, it sounds like something is literally trying to set window.window = ?? (something) which DrawSVGPlugin definitely doesn't do. And nobody else has reported a similar issue, so I'm perplexed. Sounds like maybe an issue in your particular environment which is why a minimal demo would help. If we can reproduce the issue on our end, I'm sure we can figure out a solution if it's GSAP-related. 🤷‍♂️
  13. I have no idea how that demo site was actually built, but based on my cursory glance there isn't much need for ScrollTrigger necessarily - I think all they're doing is listening for wheel/touchmove/pointermove events to sense when the user wants to "scroll" to the next section. Notice there's no native scrollbar at all. All "scrolling" is totally fake. So you could just have a function you'd call for each section (like section1(), section2()) and that dynamically creates your tweens/timelines so that it's all completely dynamic and picks up wherever the elements are at that moment (because people may "scroll" quickly and not let animations finish). Then you just keep track of the section you're in and iterate forward/backward based on the user's scroll intent. By the way, usually whenever I see someone using CSSRulePlugin (and you forgot to wrap your value in a cssRule:{} object by the way), I like to tell them that they could probably just use CSS variables instead - it strikes me as a cleaner approach in most cases. GSAP can directly animate CSS variables - no need for an extra plugin. {"--yourVariable": 200} Good luck!
  14. Welcome to the forums @Landrynadre! I glanced at your code and it appears to be animating precisely as I'd expect - can you provide an example or further describe what exactly you mean by "smooth" and how you want it to loop? Currently, you've got things set up so that once it gets to a y position of exactly -230, it'll jump back to 0 and keep going...until the raw (unwrapped) y number hits 800 less than it was when you started, at which point everything will start again. This looks like a logic issue in your code, but I'm just not sure exactly what you want it to look like (hence my request for a visual demo or elaboration about what you're looking for).
  15. You really can't have two nested pinned elements simultaneously. In other words, you're trying to pin an element whose ancestor is also simultaneously pinned. You could just tell that nested element's ScrollTrigger to start when the ancestor's is finished. In this case, it's simple because we can use the .previous() method to grab that ScrollTrigger and use its end: start: self => self.previous().end https://codepen.io/GreenSock/pen/GRvJezp?editors=0010 Is that what you're looking for?
  16. Yep, as @Cassie said it's critically important that you create ScrollTriggers in the order they occur on the page because the ones further up may push the lower ones down (thus affecting their start/end scroll positions). If you must create them out of order, you can set a refreshPriority on each but in your example I'd just do it like this: https://codepen.io/GreenSock/pen/BadNbmj?editors=0010 In your first loop, just check to see if the section has the ".panels-horizontal" class and if so, initialize it at that point so that things are all created in the proper order. Does that clear things up?
  17. This is all very intentional - There are browser bugs and quirks that this works around. GSAP is protecting you We switch the transformOrigin to 0 0 because if we don't, you'll see funky behavior in Safari, for example. Firefox also has various bugs related to transform-origin on SVG elements. We bake all the calculations into the matrix(), including the origin offsets. 👍
  18. You're talking about the overscroll behavior, right? The rubber-band effect? That has nothing to do with GSAP. Here's an example of how you could [mostly] fix that I believe: https://codepen.io/GreenSock/pen/zYdGyoX?editors=0010
  19. @Black Ducas if you'd like some help, please provide a minimal demo and we'd be happy to answer any GSAP-specific questions.
  20. No problem - it's new in version 3.8.0 👍
  21. Is this what you mean?: https://codepen.io/GreenSock/pen/ExvjNev?editors=0010 Thanks for being a Club GreenSock member, @Jloafs! 🎉
  22. Sure, that's what the new containerAnimation property is for: https://codepen.io/GreenSock/pen/NWvqbzK?editors=0010 Is that what you're looking for?
  23. Welcome to the forums, @GiGiX! Nah, it's not a rookie mistake - you've got a tricky scenario there. But don't worry, it's totally solvable. The problem is that you were pinning an element inside another element that's also pinned. That's not a good recipe for success Just pin the outer element in both scenarios. You can even make the horizontal one pick up exactly where the previous ScrollTrigger picks up by using a function-based end value of self => self.previous().end https://codepen.io/GreenSock/pen/rNzVWjL?editors=0010 Is that more like what you wanted?
  24. I fixed the CodePen - there were some calculations that were slightly off. Plus inertia could push the scroll past where it would land, and bounce back, so the snapping was happening when it was just a tad further than it would land. If you removed snapping altogether, you'd see that it was landing about 7 pixels past where it should which is why the directional snapping kicked in. It should all be resolved now. 👍
  25. What do you mean by "initialized"? Initialization happens immediately in .create(), so I'm a bit confused. Perhaps you mean "when the start and end values are finished populating"? That happens on "refresh" events, as Blake pointed out. So yes, you could just listen for that.