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. Hi Michael, Have you tried using sort? That can help out when stuff is created out of order. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.sort()
  2. Welcome the forums @devilsinkpot I'm having a hard time understanding what you're trying to do. Do you think you can put that in a minimal demo, even if it's not working. Just seeing the layout in a working demo would be really helpful. Thanks!
  3. Hi Akhil, You would need to change the zIndex before the animation starts, kind of like this... GSAP Hover Timeline Animation (codepen.io)
  4. Welcome to the forums @Tiba You need to create your animations outside of the event handler. GSAP Starter Template (codepen.io)
  5. Welcome to forums @FuryWebdev Check out our Most Common ScrollTrigger Mistakes article. You should not nest ScrollTriggers inside a timeline.
  6. Hi @Drexel .from animations can be a little tricky to work with in timelines. Check out this guide on immediateRender to learn about what's going on.
  7. Hi Michael, I can't recall ever seeing someone integrate GSAP with Wix. What does the editor look like? Can you add HTML or is it all drag and drop? Outside of an iframe, Web Components would be another option, which works fine with events and resizing, but you would still need to host the JS for the components somewhere. That's what a lot of build tools like Webpack and Parcel do, so I wouldn't call that a bad solution.
  8. Yeah, let us know how that goes. I think there might be room for improving how matchMedia works across different components.
  9. Not really sure what you mean. How is an intersection observer target different from a ScrollTrigger trigger? You don't need a container for ScrollTrigger, just the element you are targeting. Did you try with the CSS variables? I would try to make the animation without ScrollTrigger first. Once you have it looking like you want, then add in ScrollTrigger.
  10. That just has to deal with the border of the container. There is 1px on each side, so it accumulates to 2px. You're always going to have adjust it due to the way it works. The only position you wouldn't have to adjust it is if the resize handle was at the top left corner of the container.
  11. I have no idea what that pen supposed to be doing, but I added overflow: hidden; to the HorizontalContainer. Does that fix it? ScrollTrigger horizontal scroll different Div width size (codepen.io)
  12. The SVG part is pretty easy, all you have to do is add a viewBox attribute to the SVG. The text part is a little more complicated unless you incorporate the text inside the SVG. If you can't add the text to the SVG, I can make another demo later.
  13. Correct. The arrays that are for the DOM refs are filled every time React re-renders. However, the array with the animation will only be filled one time inside the useEffect.
  14. No idea. Sometimes setting will-change: transform; in the CSS can help, but I've only really noticed that issue in Chrome. https://developer.mozilla.org/en-US/docs/Web/CSS/will-change Try putting together a minimal demo that can recreate the issue, and you'll likely get better answers as we'll be able to test and experiment with it.
  15. ScrollTrigger can do everything the intersection observer can do and more, including toggling classes. If you want to animate a pseudo element with GSAP, just use CSS variables. .text-reveal { --reveal-width: 0%; ... } .text-reveal:before { width: var(--reveal-width); ... } gsap.to(".text-reveal", { "--reveal-width": "100%", ... });
  16. The problem is that you were using the event to get x and y which is not the same as this.x and this.y. There are basically two different ways to to handle this. Don't use arrow functions... const gsap = this.$gsap; const draggableRef = this.$refs.draggable; this.$Draggable.create(this.$refs.resize, { // type: "top,left", onPress(e) { e.stopPropagation(); }, onDrag() { gsap.set(draggableRef, { width: this.x + 2, height: this.y + 2, }); }, }); Or grab x and y from the instance... this.handle = new this.$Draggable(this.$refs.resize, { // type: "top,left", onPress(e) { e.stopPropagation(); }, onDrag: () => { this.$gsap.set(this.$refs.draggable, { width: this.handle.x + 2, height: this.handle.y + 2, }); }, }); I went with the second one as it will allow you to use this like you normally would in your component(s). https://codesandbox.io/s/confident-ully-7n1ko?file=/pages/index.vue
  17. Welcome to the forums @enda Did you see our React tutorials? Changing the input causes React to re-render, which calls your CateGory component again, which is clearing out the DeepAnim array you created in your effect. So just comment this out. const DeepAnim = useRef([]); // for the animations // Don't do this for an array that needs to persists between renders // DeepAnim.current = []; Also, a timeline doesn't have an ease property. Perhaps you meant to use it in the defaults. // bad const headani = gsap.timeline({ ease: "expo.inOut" }); // good const headani = gsap.timeline({ defaults: { ease: "expo.inOut" } });
  18. Welcome to the forums @Seyrinian Can you put what you have in a minimal demo on CodeSandbox (they have a nuxt template), and then I can fix it for you.
  19. Then you would select the panel-bg. It's still going to be a timeline. gsap.utils.toArray(".panel:not(:last-child)").forEach((panel, i) => { tl.to(panel, { yPercent: -100, ease: "none" }, ">") tl.from(panel.querySelector(".panel-bg"), { scale: 2 }, ">-0.5") });
  20. Now you just need to construct your timeline. I think it's easier to make sense of what's going on by not including ScrollTrigger at first. Just make your timeline, and once it's animating correctly THEN hook it up to ScrollTrigger. GSAP Scrolltrigger Pinning and Scale (codepen.io)
  21. Hi @rgdesign The only problem I see right now is that you are using an old version of GSAP and plugins. We're at v3.8 right now. GSAP + LocomotiveScroll + Horizontal pined + ScrollTrigger (codepen.io)
  22. Hi Dan, You're just asking the browser to do too much work. If I remove all the GSAP animations, it still runs slow. My guess is that a lot of that has to do with you using innerHTML, which creates a bunch of new elements and causes layout thrashing. You also have 60 components, which is going to add a lot of overhead. It would be more performant if you could do everything inside a single component. Also, I noticed you are using the old GSAP syntax.
  23. Hi @Shahas Nizar You should start out by getting rid of the ScrollTriggers inside your timeline. There should only be 1 ScrollTrigger associated with a timeline. Check out the Most Common ScrollTrigger Mistakes.
  24. It sounds like a reloading issue as described here.
  25. Welcome to the forums @Pixizz85 It's hard to troubleshoot a live site, and there might not a way to do this use hash anchors as the browser doesn't know we are messing with the scrolling. I would probably try it using query strings in the url, kind of like this. <a href="https://dev.station-w.fr/gsap/services.html?anchor=%23service1">Go to service 1</a> <a href="https://dev.station-w.fr/gsap/services.html?anchor=%23service2">Go to service 2</a> <a href="https://dev.station-w.fr/gsap/services.html?anchor=%23service3">Go to service 3</a> And then after you create your smooth scroll and any other related triggers, see if there is a param for an anchor to scroll to. let urlSearchParams = new URLSearchParams(window.location.search); let anchor = urlSearchParams.get("anchor"); if (anchor) { gsap.to(window, { scrollTo: anchor }); }