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


GreenSock last won the day on October 3

GreenSock had the most liked content!

About GreenSock

Profile Information

  • Gender
  • Location
    Chicago Area
  • Interests
    Volleyball, Basketball, Christian Apologetics, Motorcycling

Recent Profile Visitors

64,706 profile views

GreenSock's Achievements

  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?