Jump to content

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

OSUblake last won the day on December 3

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. I've seen the video and the live demo, but we don't have the time or resources to go through 1000+ lines of code and styles. If you can make a minimal demo, we can take a look. All you need is 1 card in the demo that clearly shows the issue.
  2. Please see the post I responded to earlier. We simply cannot help you go through several hundred lines of code. If you can make a minimal demo, we'd be more than happy to take a look. This is a good example of a what a minimal demo for React should look like. One small file with a minimal amount of CSS.
  3. I would do a 100% hitTest on the container, if that's true, you know you're inside the container. Then you can loop through and find the first element it's intersecting with.
  4. I would think so, although I don't know how well that would work performance wise. I'm wondering if you could rework to put everything inside a <symbol> element, and then use a <use> element for the different views? Just thinking of stuff off the top of my head right now. I actually don't know how well that work as <symbol> and <use> elements can be performance intensive.
  5. I already discussed that several posts above. The object in the console has already changed by the time you inspect it. You should not be logging out the section to check for isActive. section.isActive is the value when that function was called. But that function is being called by different ScrollTriggers. The false value you see there is from a different trigger than the true below that. Instead of toggling a class, why don't you just do a gsap animation instead?
  6. What do you mean by a before state? And what do you mean by too late? The class will toggle exactly at the point shown on the markers. And getting back to your original question, it console logs out the correct values. The false one is the section leaving, and the true below that is the new section.
  7. You have media queries that prevent it from working unless my screen is really wide. But you should just leverage the toggleClass property. The problem you have is that your section triggers overlap, so something like this. A Pen by GreenSock (codepen.io)
  8. Welcome to the forums @JeremyLove There is no scrolling in your demo, so I'm not sure what you are trying to do. The only thing that logs out is on complete. Regardless, you are logging out an object, which may have changed by the time you inspect it. Whatever isActive logs out is the value at that point in time. This has nothing to do with GSAP, and is how JavaScript works. Try searching for JavaScript value vs reference. You can see it action here. Notice how I change the isActive after logging it out, but if you inspect it, it will be different. Value vs Reference (codepen.io)
  9. Here's the docs on it... https://greensock.com/docs/v3/GSAP/gsap.quickSetter() If you need to constantly set a value, quickSetter will perform better than the normal gsap.set(). It will work fine as React will never touch the proxy elements. Just create the proxy elements inside the same effect you create your Draggables, and you should be fine.
  10. Welcome the forums @Kieran_St I made a demo several years ago that kind of does this, although it's not perfect and could definitely use some fine tuning, but maybe it can give you some ideas. https://codepen.io/osublake/pen/XdQPvJ From this thread...
  11. Yes, it looks like that issue will be fixed in the next release.
  12. Welcome to the forums @JIZA I'll need to check on that behavior, but the easiest solution is to just draw your SVG path at the correct start and end points. Another option is to animate the progress of the timeline like this. https://codesandbox.io/s/red-brook-xvwi9?file=/src/App.js
  13. To do this, I wouldn't actually drag the handle. I would use one of my favorite Draggable techniques, using a proxy element that's not in the DOM. The basic idea is that you use a trigger to start dragging the proxy element, and then apply those changes to the actual target. This should help you get started. Adjustable Scrubber (codepen.io)
  14. And sometimes when I need to make sense of values that would cause the console to keep scrolling, I like to make a little debug panel. Debug panel (codepen.io)
  15. Do you have an demo of something that was causing you problems, maybe in its broken form? Debugging is a really broad topic, and I doubt there are any resources on how to do it, especially for animations. It just a skill you develop over time, but the main idea is that you should try to isolate and reduce the problem to its most simplest form as the will make it easier to figure out. Once you have the issue sorted out, then you can start adding in more functionality. Inspecting a timeline object is rarely of any help. There's probably a method for everything you need, for example, the .progress() method. https://greensock.com/docs/v3/GSAP/Timeline/progress() Timeline docs https://greensock.com/docs/v3/GSAP/Timeline Tween docs https://greensock.com/docs/v3/GSAP/Tween
  16. If you have a transition component, then mounted is going to fire before the page is ready. You should probably tap into some of the JavaScript hooks it provides to manage ScrollTrigger creation and killing. https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks
  17. That error might be coming from server side rendering as client side scripts won't work. Try checking for a window object first like this... if (typeof window !== "undefined") { gsap.registerPlugin(Draggable, InertiaPlugin); } Or register it inside an effect as those won't run server side. useEffect(() => { gsap.registerPlugin(Draggable, InertiaPlugin); }, []);
  18. You are using export, which won't work in a normal CodePen. You don't need to listen for resizes as ScrollTrigger does that automatically. For values that are dynamically calculated, you should use function based values. this.timeline = gsap.timeline(scrollTrigger:{ trigger: this.$slidesContainer, start: 'top+=80px top+=350px', end: () => '+=' + $(this.$slides[0]).width() * this.$slides.length, scrub: 0.1, invalidateOnRefresh: true }) .to(this.$slides, { x: () => { let slideWidth = $(this.$slides[0]).width() let slidesWidth = slideWidth * this.$slides.length return -(slidesWidth + 380) }, ease: 'none' })
  19. OSUblake

    Scrollable overlay

    Hi Kokku, It might related to this. Just a browser sizing issues.
  20. Hi chrisi To drag stuff outside of a container with overflow, you wouldn't really drag what's inside the container. You would create a clone of that element outside of that container, position the clone over the original element, and then drag the clone. I have several demos in this thread that go over that technique, although they are using old versions of GSAP and should be probably be updated.
  21. I have no idea how resizing could possibly fix a caching issue. It doesn't seem possible unless you have some extension that is interfering with it somehow. When I see weird browser behavior, I like to check it out in a new incognito window as a sanity check.
  22. Hi raana, Next.js does not support ES Modules by default, so you'll need to import the UMD files from the dist folder. import { gsap } from "gsap/dist/gsap"; import { Draggable } from "gsap/dist/Draggable"; gsap.registerPlugin(Draggable);