Jump to content

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

OSUblake last won the day on June 23

OSUblake had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. Hi Jesthered! I'm not sure I fully understand what you want, but if your split text animation has different requirements than your timeline, you could make it have its own scroll trigger. gsap.to(split.chars, { ease: "circ.out", y: 80, stagger: 0.02, scrollTrigger: { ... } });
  2. Hi Evan! Love your avatar. Best browser ever! Your code probably isn't going to port over to React that well, but that animation is definitely doable. For get started with React and ScrollTrigger, I would recommend checking out this article first, and then if have any more questions, please hesitate to ask. If you need to make a React demo, you can use codesandbox.
  3. Hi Eyepatch! Maybe you can learn from this pen. It's using a wheel and touch events, but you could replace those with a click. https://codepen.io/BrianCross/pen/PoWapLP
  4. Hi, you're going to need some type of event to trigger it. And you will probably need to move it where ever the mouse is. var myDrag = new Draggable("#dragger"); window.addEventListener("mousemove", startDrag); function startDrag(e) { window.removeEventListener("mousemove", startDrag); gsap.set("#dragger", { x: e.clientX, y: e.clientY }); myDrag.startDrag(e); }
  5. Hi Ali! You can tween your motion path tween. You just need to figure out what progress value to stop at. MotionPathPlugin Demo (codepen.io)
  6. Hi Krishang! You're missing a file somewhere. Make sure whatever you're trying to load actually exists.
  7. Just tween it. GSAP recognizes color values. Animating color string (codepen.io) And if you need to split the color into components, there's a util for that. https://greensock.com/docs/v3/GSAP/UtilityMethods/splitColor()
  8. Both. GSAP is animating objects in three.js. PixiJS is basically the same, but focuses on 2D rendering. Those special effects are done using filters/shaders. https://filters.pixijs.download/main/demo/index.html
  9. Hi @Anurella Replicating that exactly would probably require you to use WebGL, like PixiJS or three.js. Maybe try animating each letter separately. Wavy Text (codepen.io)
  10. Yep. However, it works slightly different if you need to use this. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions Or you can write functions like this now. tl.to(dots, { duration: "random(8,15)", autoAlpha:0, scale:0, ease:"power4.in", physics2D: { velocity: "random(200, 700)", // velocity: "100", angle: "random(-85,-100)", gravity: 100 }, delay(i) { return !i ? 0 : gsap.utils.random(0, 3); } });
  11. You can always look at the source code, but the physics plugins are not meant to be a replacement for a physics engine. With real physics, you don't have a duration, so the animation ends when it comes to rest. With tweens, you have to use a duration, so figuring the best values to use in your use case is just going to take some trial and error. Probably shouldn't have a stagger and delay in your animation. Try this. tl.to(dots, { duration: "random(8,15)", autoAlpha:0, scale:0, ease:"power4.in", physics2D: { velocity:
  12. I don't see any difference, and there shouldn't be any difference as they are animating the same property. It is throttled. All events are queued so it only updates on every animation frame. If you have a high refresh monitor, that will happen more often.
  13. It's a ternary operator. condition ? exprIfTrue : exprIfFalse Basically the same as doing this. let opacity; if (isHidden) { opacity = 0; } else { opacity = 1; }
  14. The cursor should have a position of fixed. Here's an example of following the cursor. https://codepen.io/GreenSock/pen/WNNNBpo
  15. My initial thought is that it might not work well with Flip because you are dragging an element you are trying to animate. Maybe if you use some sort of placeholder element the same size as the one you are dragging.
  16. Definitely not the best place to put that. It should probably be somewhere when your nav opens and the scroll bar appears.
  17. You can use the wrap util for this. https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap() let obj = { x: 7 }; let wrap = gsap.utils.wrap(1, 10); gsap.to(obj, { x: 13, modifiers: { x: value => Math.round(wrap(value)) } });
  18. Just paste the url. You can fine tune it with durations and the position parameter. tl.fromTo(".text1", {y: 500}, {y: -500, duration: 1}, 1); tl.fromTo(".text2", {y: 500}, {y: -500, duration: 1}, 2);
  19. That demo is really old, and is not meant to be an accurate representation of a timeline. It was for a video just to explain some concepts. Most of the stuff in there is hard coded. Just comment out the all the JS all you will see.
  20. You can include your lottie animation in the timeline. let playhead = {frame: 0}; let tl = gsap.timeline({ scrollTrigger: {...} }); tl.to(playhead, { frame: animation.totalFrames - 1, ease: "none", onUpdate: () => animation.goToAndStop(playhead.frame, true), }, 0) .to(...)
  21. Does this not fix the issue? https://codepen.io/GreenSock/pen/MWpzOmM
  22. What if you get rid of the top and bottom margin?
  23. If you're using ScrollTrigger, have you looked at invalidateOnRefresh property? https://codepen.io/cassie-codes/pen/8a2b93488881f6b89f6c82d8b4eac40c
  24. Firefox is just weird for stuff that doesn't get rendered, like elements inside <defs> tags
  25. Try using coordinates instead of percents. <mask id="theMask" maskUnits="userSpaceOnUse"> <circle id="target" r="400" cx="500" cy="500" fill="none" stroke="white" stroke-width="84" stroke-linecap="round" /> </mask>