Jump to content

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

OSUblake last won the day on September 22

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. And that's not a component. It's just a normal JavaScript class and would work the same even if you didn't include React, so leave it as is. A class component extends React. class MyComponent extends React.Component { }
  2. My suggestion would be to keep it as a class. Don't break something that isn't broken. Function components just make animation code harder to follow and reason about. If you really want to continue forward, then I would suggest go through our React Guides first as they are mostly focused on function components.
  3. Welcome to forums @seungguini You should always create your timelines inside a hook. // only need to use a ref if you are tring to access // the master timeline elsewhere const masterTimeline = useRef(); useLayoutEffect(() => { const introTimeline = gsap.timeline() .from(hiText.current, { y: "+=10", opacity: 0, duration: 1.5, ease: "power4.easeInOut", }) .from(iAmAText.current, { y: "+=10", opacity: 0, duration: 1.5, ease: "power4.easeInOut", }) .to(cursor.current, { opacity: 0, ease: "power0", repeat: -1, yoyo: true, repeatDelay: 0.5, }); const occupationTimeline = gsap.timeline() .add(typeOccupation(occupation.current, "a CS Major", 1)) .add(typeOccupation(occupation.current, "a Software Developer", 1)) .add(typeOccupation(occupation.current, "a NLP Researcher", 1)) .add(typeOccupation(occupation.current, "a Computer Science Tutor", 1)) .repeat(); masterTimeline.current = gsap.timeline({ paused: true }) .add(introTimeline) .add(occupationTimeline); return () => masterTimeline.current.kill() }, []) Be sure to check out our React Guide for more details.
  4. No worries! That has happened to all of us.
  5. We don't have the resources to help build out custom solutions, but you should start by working out values that don't make sense, like scrDistObj.maxY. That's 0, so there's nothing to scroll.
  6. You would need to rework using your container as the scroller. ST = ScrollTrigger.create({ animation: tween, scrub: true, scroller: container });
  7. Every tween you have is calling doBackground. You need to add it conditionally like this. let vars = {duration:0.55, yPercent:100, stagger:0.03,ease:'power4.out'}; if (index === 1) { vars.onComplete = doBackground; } tl.from(chars.chars, vars, ">-30%") Or you could just put the callback in your timeline. if (index === 1) { tl.add(doBackground) }
  8. Pixi objects don't work with three.js and vise versa. If you need color matrix filter for three.js, you'll need to find a shader that can do that. I'm sure someone has already written one for three.js.
  9. Also, you never need to do this. var currTrans = $("#hat").css('-webkit-transform').split(/[()]/)[1]; var posx = currTrans.split(',')[4]; var posy = currTrans.split(',')[5]; Just use GSAP's get property. https://greensock.com/docs/v3/GSAP/gsap.getProperty() let x = gsap.getProperty(".foo", "x"); let y = gsap.getProperty(".foo", "y");
  10. Hi fionchadd Coordinates can be really confusing in SVG, so here's how to make this easier. Initially have your hat and drop area sitting in the top left corner, so their initial coordinates will be 0,0. Now use GSAP to position the hat and drop box. gsap.set("#hat", { x: 200, y: 200 }); gsap.set("#droparea", { x: 500, y: 100 }); Or even better, also have your items centered. gsap.set("#hat", { xPercent: -50, yPercent: -50, x: 200, y: 200 }); gsap.set("#droparea", { xPercent: -50, yPercent: -50, x: 500, y: 100 }); Now when you have a hit, just to move the hat to the coords you set for the drop area. gsap.to("#hat", { x: 500, y: 100 })
  11. Can you please make a minimal demo with those logs. It looks like there is a solution.
  12. OSUblake

    GSAP Utils

    I think you had the right idea with your timeLapse object. You can get the object using bracket notation. let item = timeLapse[value]; Day to night (codepen.io)
  13. Welcome to forums @tpinne You can use onUpdate in each of your ScrollTriggers to set the progress. Can you put that in a minimal demo?
  14. Don't know if this will help because you didn't provide a minimal demo, but you should create and kill your ScrollTriggers with useLayoutEffect. That will also fire a tad earlier than useEffect.
  15. You can create a minimal demo on CodeSandbox. It has every environment/framework available. https://codesandbox.io/
  16. Should be resolved now. It was issue with an older version of three.js 🤷‍♂️
  17. I honestly don't know how to change the transform origin. You should probably search three.js support channels for that. If you can show how to set it, we can help show how to animate. I have a feeling it's a little more complicated than just changing a property due to way rotation is handled in 3d.
  18. Thanks. We're looking into it. I'm downloading the update right now.
  19. Welcome to forums @Grace Cho Performance ultimately comes down to graphics rendering and what you are telling the browser to change visually. The demo you posted doesn't even use GSAP. Safari just has a hard time handling some stuff. Not all browsers are created equally. If it's too much for a browser to handle, then you should tone down whatever you are doing, but it's impossible to say what that is because you didn't provide a minimal demo. Your JS is fine. But what we can't see what it's doing as there is HTML and CSS involved.
  20. Welcome to forums @DRJO You can use the trial version of all our plugins on CodePen, CodeSandbox, etc. You should use a snap points function, and if the point isn't within a certain radius, return the point that was passed in. Otherwise, return the closest point. snap: { points: function(point) { // now you can run whatever logic you want in here, like // looping through the other boxes to see which is closest // and if it's within a certain distance, apply the snapping. // Just return the adjusted point with x/y properties or // if it's not within the range, return the original point: return point; } } This thread should help give you some ideas.
  21. To make a motion path seem random, you can just make it really long with several loops, think of a swirl, but then have end connect to the start. The MotionPathHelper would be a good tool to help visualalize that, or you could just draw a path in a SVG editor. https://greensock.com/docs/v3/Plugins/MotionPathHelper For the flame, you can create another animation just for the flame, and maybe change its opacity using some sort of custom ease, like RoughEase or CustomWiggle. You could even add some rotation to the SVG to make it appear more random. Just a quick example I made using the MotionPathHelper. MotionPathHelper demo (codepen.io)
  22. Hi leonardphb! For that you would use the MotionPathPlugin. https://greensock.com/docs/v3/Plugins/MotionPathPlugin Everything will work basically the same, except there is not a "soft" type anymore... Tween timeScale() (codepen.io) That helper function comes from this thread.
  23. Welcome to forums @Cole Kerr I don't think you need that rotationZ. gsap.set(".qf-back", { rotationX: 180, // rotationZ: 180 });
  24. Here's something to get you started, so you should be able to work the rest out. If you don't see anything, it's because of how you have SVG set up. You need to shrink the screen height down. https://codesandbox.io/s/stupefied-wood-pjzog?file=/index.html
  25. Hi Johnee! I'm very confused about what you're trying to do. If you're working gltf models, then keep PixiJS out of it. Pixi's pivot and anchor are just for Pixi display objects, and will be of no help with three.js. And that fiddle isn't even working for me, but just from reading the code, all it's doing is providing a texture for three. Nothing special, and can be done using regular canvas APIs. GSAP can animate whatever you want, but you need to figure out how to rotate your model the way you want in three.js first. Get the start and end states, and GSAP can fill in the rest.