Jump to content

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

OSUblake last won the day on October 23

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. Yes. They might have changed it later. Do you think you can make a minimal demo showing your issue?
  2. You can put what you have a in CodePen. We don't want to see your entire site, just the problem you are having an issue with. It's nearly impossible to help someone fix a problem on a live site, especially if we can't interact with the code. You don't need to include any assets from your site. The simpler the demo, the better.
  3. Hi Danielovitch, Your demo seems to be working fine, so I'm not sure what your question is.
  4. Oh, I just saw this url because your URL wasn't linked correctly. https://test-blsvyu36l-rootandleaves.vercel.app/ I didn't even see the other link, but it's way too hard to even tell what your performance problems are related to. I would try to isolate the problem first, like remove ScrollTrigger, and then start with other animations until you find what's killing the performance. If you need smooth scrolling, I would look at some of our demos in the scrollerProxy docs. The native ScrollTrigger demo works fine with syncing with three.js. Ignore all the Assscroll stuff in this demo... https://codepen.io/ashthornton/pen/874833fdebc032bedd0cf61e9eac3ee9 That was taken from this post.
  5. Hi @Lkey Have you tried creating animations for each section, kind of like this? gsap.to("body", { backgroundColor: colorSection.dataset.bgcolor, color: colorSection.dataset.textcolor, scrollTrigger: { trigger: colorSection, scroller: ".lk-wrapper", start: "top 50%", } })
  6. Welcome to the forums @TheKiffestOak The snap function only works with the InertiaPlugin. See the inertia part of the Draggable docs. For seamless looping, check out our loop Helper Function. https://codepen.io/GreenSock/pen/PojYwPp Another resource worth checking is the article on infinite scrolling. It deals with scrolling, but the same concept applies to dragging. https://css-tricks.com/going-meta-gsap-the-quest-for-perfect-infinite-scrolling/
  7. Your GSAP code looks fine, except you really don't need the gsap.ticker.fps(fps) as GSAP will run at the correct fps. I looked at your URL, and there really aren't any animations. Just a bunch of dots floating around. The only thing that stuck out is that you have have a massive canvas. The height on my monitor was almost 7000 pixels high. That's a ton of pixels you're asking the browser to process. Your canvas should really never be larger than the screen.
  8. Welcome to the forums @dve46 I would put a wrapper element around the canvas and use that instead since the inline styling that GSAP is apply for the pinning is not going to match the attributes that three.js sets. ScrollTrigger Pinning with three.js (codepen.io)
  9. Welcome to forums @Sowjanya TweenMax was replaced in version 3 with a simpler gsap object. Check out the migration guide to see all the changes and the new way to create animations.
  10. Welcome to the forums @Ikuro1o There's no real CSS equivalent in the example code you just gave as CSS only works with DOM elements. If you'd like to know how GSAP works, I'd suggest checking out some of the Coding Math videos on tweening and easing (episodes 27-31). He even mentions GSAP. 😁 https://www.youtube.com/user/codingmath/videos
  11. You can check if the mouse has moved before going through the loop. let isDirty = true; // mouse handler function onMouseMove(event) { ... isDirty = true; } gsap.ticker.add(() => { if (!isDirty) { return; } isDirty = false; // loop }); But I can't say how much that will help as managing 2500+ objects is a lot, and going way beyond the scope of this forum. With that many objects, you may need to start looking at advanced algorithms like quadtrees or spatial hashes to reduce the number of objects that are checked within the loop. And from my personal experience, rendering 2500 objects is way beyond the limits of SVG and most likely even canvas for 60+ FPS animations.
  12. Hi battleaxe, You're going to need to some way to store if the animation has already run at the global level. You can use something like your code snippet, or maybe sessionStorage, which can hold values throughout the life of the page. https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
  13. You just need to have tween1 somewhere in your code. let tween1; const scene = new THREE.Scene(); const scene1 = new THREE.Scene(); ...
  14. You can combine your undefined and isActive check like this. if (tween1 && tween1.isActive()) { ... } Another way is to use gsap.getTweensOf(). If the length is 0, that means there are no active tweens on those targets, which will evaluate to false. Any other length value will be true, which means there are active animations. if (gsap.getTweensOf([cube.rotation, cube1.rotation]).length) { ... }
  15. You should not be calling play in the middle of constructing a timeline. Your console.log doesn't work because you put in the middle of some GSAP code. The dot at the beginning of the .to is supposed to follow a timeline instance. Go search around for method chaining. That's how a lot of libraries, most notably jQuery work. // BAD let tlFunc1 = gsap.timeline( { defaults: { ease: "circ" } } ) console.log(myarray[0]) .to('.box', { backgroundColor: myarray[1] }) // GOOD console.log(myarray[0]); let tlFunc1 = gsap.timeline( { defaults: { ease: "circ" } } ) .to('.box', { backgroundColor: myarray[1] }) // GOOD let tlFunc1 = gsap.timeline( { defaults: { ease: "circ" } } ) console.log(myarray[0]); tlFunc1.to('.box', { backgroundColor: myarray[1] }) If you want to kill something, you're going to need to reference it, just like I showed how to make reference in my last post to you. But really, if you're making a master timeline and then trying to kill individual parts of it off, you probably shouldn't be making a master timeline. There is nothing wrong with having independent animations/timelines. I almost never use a master timeline. You can certainly use a master-ish timeline to control other animations/timelines... let ani1 = createAnimation(); gsap.timeline() .add(() => ani1.play(), 1) .add(() => ani1.kill(), 5)
  16. Welcome the forums @deepus7581 Did you get that demo from another thread? Just wondering where it came from. I noticed that demo links to 2 other demos on the CodePen details page, and one of them looks like it has some logic for dealing with scrollTo tweens. https://codepen.io/GreenSock/pen/xxEQNBB
  17. Welcome to the forums @cadenzah It's pretty hard to make sense of that screenshot without having some code to test to reproduce the issue. There are currently no known memory issues with GSAP, so a minimal demo would go a long way in giving you a better answer. All I can say from your description is that you really don't need to put animations inside a data object. The data object is for reactive properties of your component, but I don't know if removing that will help at all. I would also check to see how many tweens are actually on the element using gsap.getTweensOf(). If there is more than the 1 you created, then you might have an issue somewhere in your code.
  18. Hi Josh! Performance is very complicated topic as every situation is unique, so I don't have a silver bullet for you. Just from cursory glance at your code, here are some things that might help. First, maybe SVG isn't the best medium to use. SVG is slower than HTML, which is slower than canvas, which is slower than WebGL. If I have to animate hundreds of objects, I'm probably going to reach for canvas or WebGL first. PixiJS is good 2D WebGL renderer. You're also doing way too much work in your mouseover handler, and mousemove might be a better event to use. Notice in this demo how most of the work is done in the ticker function. The mouse handler just records where the mouse position is. https://codepen.io/GreenSock/pen/WNNNBpo Also in your mouse handler, you're creating 692 tweens, which is going to kill performance. You should only create a tween if you need to animate it. This might be easier if you made an object for every one of your polygons. I like to use class objects for this kind of stuff. Some pseudo code. const mapRange = gsap.utils.mapRange(0, 60, 1.2, 0.2); class Polygon { constructor(element) { this.element = element; this.getProp = gsap.getProperty(element); gsap.set(element, { transformOrigin: "50% 50%" }); } update(mouse) { const dist = ...; if (dist < 60) { gsap.to(this.element, { scale: mapRange(dist) }); } else if (this.getProp("scale") < 1) { gsap.to(this.element, { scale: 1 }); } } } const mouse = { x: 100, y: 100 }; const polys = gsap.utils.toArray("polygon").map(el => new Polygon(el)); gsap.ticker.add(() => { for (let i = 0; i < polys.length; i++) { polys[i].update(mouse); } }); Further optimization might involve only calculating if the element is within a set radius of the mouse. Using Math.sqrt() can be an expensive operation if you have to do a bunch of them. You can easily eliminate elements that are outside of the radius like this. // assumes x and y are the center of the element const dx = Math.abs(mouse.x - this.getProp("x")); const dy = Math.abs(mouse.y - this.getProp("y")); if (dx > 60 || dy > 60) { // not inside // check if we need scale to 1 animation needed if (this.getProp("scale") < 1) { gsap.to(this.element, { scale: 1 }); } } else { // calculate distance const dist = Math.sqrt(dx * dx + dy * dy); if (dist > 60 && this.getProp("scale") < 1) { gsap.to(this.element, { scale: 1 }); } else { gsap.to(this.element, { scale: mapRange(dist) }); } } You're also creating a mouse event for each polygon. It would be better to just have single event listener, and then figure out if the mouse is near a polygon. Yes, it requires a lot more work, but is much more optimized. Highly optimized animations will almost always require a lot more code.
  19. OSUblake


    Hi koub! There's a video in the pinSpacing part of the docs that explains all that.
  20. Hi @IanStews It looks like the previous page gets unmounted after the next page's useLayoutEffect gets called, which is causing issues. When useLayoutEffect fires, it's at the previous page's scroll position which will play the animation, and the Gatsby resets the scroll position. So I would try this first. useLayoutEffect(() => { window.scrollTo(0, 0); ... }, []) If that doesn't work, you can try switching your useLayoutEffect over to a useEffect, although that can bring along other problems, like FOUC.
  21. Looks good for the most part. It might worth it to add will-change: transform; to CSS of your boxes as it can help with performance. To pause at the start, you can pass in a time value to the pause method. reset.onclick = function(){ tl.pause(0); }; You could also write your yheight like this... const yheight = "-=" + totalHeight;
  22. Welcome to the forums @felipejorge You should check out this blog post for 3.7. There are some demos that do exactly that. https://codepen.io/GreenSock/pen/RwpBOvR https://codepen.io/GreenSock/pen/OJpwYXO
  23. I see the problem, but CodeSandbox doesn't update when I change something, so it's hard to troubleshoot. I'm going to have to investigate this locally. Please standby. Thanks
  24. Hi pixelbakery, Notice in the original demo that the boxes are positioned absolute, and have their initial position set by GSAP. That's pretty important if plan on using the same wrap function for every box. Also, your dimensions aren't correct. 24 appears to be in rem, so the actual height is like 96 with the border.
  25. Hi Josh, If I understand your question correctly, you should be able to use a function to grab the color like this. gsap.to(poly, { fill: (i, el) => grayscaleCol(+el.getAttribute("data-canopy")) });