[How to use gsap with react three fiber?]

Hey Romanus! I hope you are well, I leave here a fork of your pen using GSAP to rotate the cube.

See the Pen rNZmZLx by nazarenooviedo (@nazarenooviedo) on CodePen

Basically, I used a useEffect() to animate it.

 

useEffect(() => {
  if (!ref.current) return;
  gsap.to(ref.current.rotation, {
    x: Math.PI,
    ease: "linear",
    repeat: -1,
    duration: 2
  });
}, []);

I hope helps you!

[Smooth movement cursor image on hover element]

If you find yourself calling gsap.set() many times on the same object (or set of objects), like in a "mousemove" event, you can boost performance 50% - 250% by creating a quickSetter function and using that instead of gsap.set().
 

And on the other hand, If you find yourself calling gsap.to() many times on the same numeric property of the same target, like in a "mousemove" event, you can boost performance by creating a quickTo() function instead.
 

Basically a gsap.quickSetter() is a optimized function of gsap.set() and gsap.quickTo() is a optimized function of gsap.to()

 

I leave here both links to the documentation. (gsap.quickTo() & gsap.quickSetter())

[Smooth movement cursor image on hover element]

Hey Lounes, you can usegsap.quickTo()instead of use gsap.quickSetter() in this way you can use duration and ease for that. I leave here a fork of your pen with the changes applied. I hope that helps you!
 

See the Pen ExeyQgP by nazarenooviedo (@nazarenooviedo) on CodePen

[Sync (Observer & ScrollTrigger & ScrollSmoother)]

thanks so much Jack! it's just I needed 🙏

[Sync (Observer & ScrollTrigger & ScrollSmoother)]

I just took the GSAP Horizontal Scroll pen with ScrollTrigger, and I added ScrollSmoother and this works perfectly. And also I have a requirement to do draggable the horizontal section, so for that I used the Observer plugin to use the onDrag function to update the scroll() of the main ScrollTrigger. So, this also works fine, but I wanna reach a smooth movement on the drag, like a ('lerp' ,'momentum', 'inertia') as when I scroll, but I can't reach. Any suggestions are welcome.

I did this to update the scroll value of the ScrollTrigger.

 

Observer.create({
  target: ".container",
  type: "wheel,touch,pointer",
  onDrag: (self) => {
    scrollTween.scrollTrigger.scroll(
      scrollTween.scrollTrigger.scroll() - self.deltaX
    );
  }
});

Thanks so much! 

See the Pen GRdJazK by nazarenooviedo (@nazarenooviedo) on CodePen

[MorphSVG, React and Typescript]

Hey!, I did a simple animation just to show the concept about to use morphSVG.

 

In this example all paths are morphing from the same shape (circle), if you need transitions between two SVG (I refer to your files), you need to make sure to have the same quantity of paths in each SVG to have a smooth transition between them.

I hope this helps you!

 

https://codesandbox.io/s/morph-svg-gsap-charmander-2wpntv

(I forked your codesandbox, and worked there)

[Animate text elements individually]

Hey @cereal_beast how is going?? you are using the same target for all titles, so this executes the triggers at the same time, so I did a quick refactor. I used an iterator to keep the correct trigger, and then I used the same animation!

I hope helps you!

See the Pen MWVazVe by nazarenooviedo (@nazarenooviedo) on CodePen

[Adding elements dynamically, ScrollSmoother doesn't work. [ 动态添加元素，ScrollSmoother无法正常工作 ]]

Hey @Ryan Lee, how's going? I just add a ResizeObserver in your code to listen to the ".viewport" size changes. Also, I wrapped the ScrollTrigger.refresh() into a delayedCall() just to simulate a debounce function.

 

const container = document.querySelector(".viewport");

const resizeObserver = new ResizeObserver((entries) => {
  gsap.delayedCall(0.2, () => {
    ScrollTrigger.refresh();
  });
});

resizeObserver.observe(container);

 

I don't know in which framework you are working, but please, don't remember to clean up the resizeObserver, just to keep clean the memory.

resizeObserver.disconnect()

I hope this helps you!.
 

See the Pen poLJvga by nazarenooviedo (@nazarenooviedo) on CodePen

[FOUC not working properly]

Hey @cereal_beast, how's going?

You are using a .from() function, so in this way, you will never get the correct autoAlpha because you are set the opacity in 0, probably you will need to use a .to() function to trigger the opacity. I did a quick fork from your pen and fixed it, just check it.
 

I fixed your syntaxis regarding the duration position, and also I split the animation into two tweens, a from() function for all properties and just a to() function to the autoAlpha. With the last parameter in the to() tween ('<') we reach to execute both tweens at the same time.

I hope helps you!
 

See the Pen mdxJdad by nazarenooviedo (@nazarenooviedo) on CodePen

[Is there a method that can run a function after gsap.to]

I'm glad to hear it! is a pleasure 🙏

[Is there a method that can run a function after gsap.to]

Please, could you create a minimal demo? just to debug and test it. Thanks!

[Is there a method that can run a function after gsap.to]

Hey @nthpolygon how is going?? I leave here an example with 2 alternatives, but the onComplete should be doing the same thing.
 

Using onComplete:
 

const tween = gsap.from(["h1", "p"], {
  yPercent: 30,
  autoAlpha: 0,
  stagger: 0.1,
  paused: true
});

gsap.to("body", {
  autoAlpha: 1,
  duration: 0.5,
  onComplete: () => {
    tween.play();
  }
});

Using .then():

 

const tween = gsap.from(["h1", "p"], {
  yPercent: 30,
  autoAlpha: 0,
  stagger: 0.1,
  paused: true
});

gsap
  .to("body", {
    autoAlpha: 1,
    duration: 0.5
  })
  .then(() => {
    tween.play();
  });

I leave here the Codepen:

See the Pen mdXZMQg by nazarenooviedo (@nazarenooviedo) on CodePen

[NextJS importing DrawSVGPlugin]

Hey @chacrasoftware I hope you could solved it, but just in case, I leave here a codesandbox for you!

[React (Next) animating nested elements]

Hey @Nye, I just did a quick refactor to avoid using the addHeadingRef() function, I isolate this code in a little component, and then I just did what @Cassie said, I used the gsap.utils.selector() function and I just use one ref (const containerRef = useRef(null) to map the elements
 

const q = gsap.utils.selector(containerRef.current);

gsap.to(q(".heading"), {
  xPercent: 5,
  duration: 3,
  repeat: -1
});

https://codesandbox.io/s/nested-react-next-gsap-forked-x4fdvr?file=/pages/index.js

 

I hope helps you! 🙏

[How to make a horizontal scroll using Next.JS]

Hey @josefirmino, how is going? I leave here an example from @Cassie but implemented it into the Next.js framework. I hope works for you!. 😀

https://codesandbox.io/s/horizontal-scroll-nextjs-fuog8t?file=/pages/index.js

[[ScrollSmoother] Safari Rendering Issues]

Hey Jack!, thanks so much for your comments! Fortunately, I found was my bug(?), I'm using a video with a wrapper with an ::after layer with a filter: blur() and this apparently doesn't like to safari haha, if I comment on this line, the scroll works perfectly.
 

I leave here the GreenSock demo implementation (with some images replaced by videos) on Next.js, and I did the test, so I leave a commented line with the blur() (just for you can test it).
 

https://codesandbox.io/s/gsap-next-smoothscroll-jg1zin

[[ScrollSmoother] Safari Rendering Issues]

Hey @Cassie, thanks so much, I will review my code, and I will try to do a minimal demo to show it because in my current project I'm having this issue, and isn't into an iframe, but let me debug a little more.

[[ScrollSmoother] Safari Rendering Issues]

Mmmm, is so weird, I tested in:

and in a:

 

and in both mac's we have the same behavior. 

Also I tested using normalizeScroll: true  but I continue having the same issue.

[[ScrollSmoother] Safari Rendering Issues]

Hey guys! I just wanna show that we are having some rendering issues with ScrollSmoother in Safari browser, so I will leave here 2 videos to show the difference between Safari and Chrome. I would like to know if you have any workaround for that.

 Safari:

 

 
Chrome:

 

 
Thanks so much!

 

 

 

See the Pen NWXgqyK by GreenSock (@GreenSock) on CodePen

[[ScrollTrigger] Vertical Slider]

Hi @GreenSock, thanks so much for the insight, I really appreciated it, I would have never find the CSS weird behavior. 🙏😀

[[ScrollTrigger] Vertical Slider]

Hey @Carl!, thanks so much for your help, I think that with these CSS changes I can get the same initial result. Really I needed other eyes to find another way, thanks again for your help, and btw, your courses are great man!

See the Pen abWwMJP by nazarenooviedo (@nazarenooviedo) on CodePen

[[ScrollTrigger] Vertical Slider]

Hey guys! I reused an animation based on snorkltv to have a rotator attached with the ScrollTrigger, but I'm having some issues with the scroll. I can't find the bug, but my issue is that scroll is blocking (I can't reproduce the exact time or behavior), and the animation obviously stops working.

I leave here a video and the Codepen to show them, as usual, thanks in advance for your help! 🙂 🙏

 

 

See the Pen abWwGgJ by nazarenooviedo (@nazarenooviedo) on CodePen

[Skew on scroll with ScrollTrigger - but with a horizontal scroll plugin?]

Hey @andsavu, I leave here a pen with a solution for your issue, so, as you can see I did a correct bind for ScrollTrigger and Smooth-Scrollbar, if you will use just a horizontal scroll you need to do this:
 

// Setup Scrollbar
const scroller = document.querySelector("#scrollbar");

const bodyScrollBar = Scrollbar.init(scroller, {
  overscrollEffect: "bounce",
  alwaysShowTracks: true,
  delegateTo: document
});

ScrollTrigger.scrollerProxy(scroller, {
  scrollLeft(value) {
    if (arguments.length) {
      bodyScrollBar.scrollLeft = value;
    }
    return bodyScrollBar.scrollLeft;
  }
});

Then we need to bind the listeners and a quick default setup for ScrollTrigger to enable the horizontal scroll and setup a scroller.

bodyScrollBar.addListener(ScrollTrigger.update);

ScrollTrigger.defaults({ scroller: scroller, horizontal: true });

And also I added some stuff to improve the code, for example with this line you can be sure to avoid all time the yAxis. 

bodyScrollBar.track.yAxis.element.remove();

Codepen:

See the Pen YzWgJWw by nazarenooviedo (@nazarenooviedo) on CodePen

I hope to help you 🙂

[timeline .paused() attribute doesn't update?]

Hey @RoyM, I just did a fork, and also I replaced your masterTL by a useRef() hook, so in this way works. You can check it here: https://codesandbox.io/s/flamboyant-solomon-vdis4

 

const masterTL = useRef(null);

useEffect(() => {
    masterTL.current = gsap.timeline({
      repeat: -1,
      paused: true
    });
}, [masterTL]);

 

[SVG Sine Wave Timeline]

Thanks so much! you gave me a great idea, I just use a a fixed width for the viewBox and just move the inner group along x axis.
 

Thanks!