Three.js and Gsap

[dotsinspace]

Guys this thread is simple with straight forward question .

 

Using gsap with three.js causes jerk on gsap animation. so are there any

tips and tweaks how to optimize gsap and three.js

[Cassie]

Hi there dotsinspace.

This is pretty vague I'm afraid. We don't know what you're doing as there's no demo attached so we can't really advise.

There are no three.js/GSAP issues that we're aware of.

43 minutes ago, dotsinspace said:

Using gsap with three.js causes jerk on gsap animation

There's a lot of examples of non-jerky animations in this collection, maybe something here will help.

https://codepen.io/collection/DpQWdN?cursor=ZD0wJm89MCZwPTEmdj04
 

[dotsinspace]

Hey, Cassie

 

Basically i have added 3d models using three.js you can checkout them over here

URL:  test-blsvyu36l-rootandleaves.vercel.app/work

Now i am sick and tierd because from morning i am trying to get smoothest scroll but every scroll shows lag even tried other developers code but nothing working fine. and i am for sure it has to do with three.js because those models loads after everything is rendered but wierd part is  that models are just 1.4MB Maximum and gsap lags everything.

 

NOTE: this is live project thats why its hard for me to pin point what is causing that much lag. but as i know there are less chance that anything will cause issue because there are no animation on css side. but my eyes always get focused on three.js

 

GSAP Code:

// Event listener.
  React.useEffect(() => {
    // Local variable.
    let _maxHeight

    // Variable assignment.
    _maxHeight = 0

    // Const assignment.
    const _scrollContainer = '#VerticalScroll'
    const _scrollContainerPage = gsap.utils.toArray('#VerticalScroll > section')

    // Update container heights.
    _scrollContainerPage.forEach(v => { _maxHeight += v.offsetHeight })

    // Smooth scrolling container
    gsap.ticker.fps(60)
    gsap.to(_scrollContainer, {
      'yPercent': -110,
      'ease': 'power3.inOut',
      'scrollTrigger': {
        'trigger': _scrollContainer,
        'scrub': 1,
        'end': () => `+=${_maxHeight} bottom`,
        'duration': 1,
        'invalidateOnRefresh': true,
        'anticipatePin': 1
      }
    })
  }, [])

 

[OSUblake]

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.

 

[dotsinspace]

Okay what should i do to minimize canvas size as those 3d models has to exact of that shape according to UI

[dotsinspace]

One more thing brother how can i tell gsap to only scroll to collective height of container.because right now it just goes on scrolling i am always left with white screen.

[OSUblake]

15 minutes ago, dotsinspace said:

Okay what should i do to minimize canvas size as those 3d models has to exact of that shape according to UI

 

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...

 

See the Pen 874833fdebc032bedd0cf61e9eac3ee9 by ashthornton (@ashthornton) on CodePen

 

That was taken from this post.

 

 

 

[dotsinspace]

it worked...i  will cry 

[dotsinspace]

Blake is there any way to use smooth-scrollbar with trigger proxy for horizontal scrolling

[OSUblake]

Do you mean actual scrolling on the x axis? If so, you would need to provide the scrollLeft getter/setter to the scrollerProxy. However, I would be careful implementing horizontal scrolling as it won't work with a mouse wheel. Most people do a fake horizontal scroll, where you animate a container on the x-axis using the normal scroll direction.

 

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

 

[dotsinspace]

the one you provided already work for me. i want horizontal scaling using scrollerProxy. scrollTrigger one is too chopy not as smooth using scrollerProxuy

[OSUblake]

You would need to change the scrollTop to scrollLeft in the scrollerProxy and set horizontal: true on your scroll triggers.

[akapowl]

Hey @dotsinspace

 

Here is an example of a horizontal smooth-scrollbar with ScrollTrigger from an older thread

 

It also uses a plugin for smooth-scrollbar that makes the page scroll horizontally on wheel-scroll. Might be helpful

 

See the Pen 413181e6f4eef74becc39412364637a4 by akapowl (@akapowl) on CodePen

 

[dotsinspace]

// Local variable.
    let _maxWidth

    // Const assignment.
    const _scrollContainer = '#ScrollContainer'
    const _scroller = document.querySelector(_scrollContainer)

    // Initialize scroll bar.
    const _ScrollBar = Scrollbar.init(document.querySelector(_scrollContainer), {
      'damping': 0.1,
      'overscrollEffect': true,
      'overscrollEffectColor': '#FFF',
      'delegateTo': document,
      'alwaysShowTracks': false
    })

    // High jack normal scrolling.
    ScrollTrigger.scrollerProxy(_scrollContainer, {
      scrollLeft(value) {
        if (arguments.length) {
          _ScrollBar.scrollLeft = value
        }

        return _ScrollBar.scrollLeft
      }
    })

    // Update scroll trigger with scroll positions.
    _ScrollBar.addListener(ScrollTrigger.update)

    // Add _scroller to scroll trigger.
    ScrollTrigger.defaults({ 'scroller': _scroller })

    // Const assignment.
    const _scrollContainerPage = gsap.utils.toArray('#ScrollContainer > section')

    // Get maximum width to scroll
    const getMaxWidth = () => { _maxWidth = 0 ;_scrollContainerPage.forEach(section => _maxWidth += section.offsetWidth) }

    /*
     * Calculate maxWidth and update maxWidth
     * variable for further calculation.
     */
    getMaxWidth()

    // Event listener.
    ScrollTrigger.addEventListener('refreshInit', getMaxWidth)

    // Animate to given section.
    gsap.to(_scrollContainerPage, {
      'xPercent': -100 * (_scrollContainerPage.length - 1),
      'ease': 'power3.inOut',
      'scrollTrigger': {
        'trigger': _scrollContainer,
        'pin': true,
        'scrub': 1,
        'snap': [0, 0.5, 1],
        'start': 'top top',
        'ease': 'none',
        'duration': 0.3,
        'end': () => `+=${_maxWidth / 2}`,
        'invalidateOnRefresh': true,
        'anticipatePin': 1
      }
    })

Like this. still getting vertical scroll

[dotsinspace]

// Local variable.
    let _maxWidth

    // Const assignment.
    const _scrollContainer = '#ScrollContainer'
    const _scroller = document.querySelector(_scrollContainer)

    // Initialize scroll bar.
    const _ScrollBar = Scrollbar.init(document.querySelector(_scrollContainer), {
      'damping': 0.1,
      'overscrollEffect': true,
      'overscrollEffectColor': '#FFF',
      'delegateTo': document,
      'alwaysShowTracks': false
    })

    // High jack normal scrolling.
    ScrollTrigger.scrollerProxy(_scrollContainer, {
      scrollLeft(value) {
        if (arguments.length) {
          _ScrollBar.scrollLeft = value
        }

        return _ScrollBar.scrollLeft
      }
    })

    // Update scroll trigger with scroll positions.
    _ScrollBar.addListener(ScrollTrigger.update)

    // Add _scroller to scroll trigger.
    ScrollTrigger.defaults({ 'scroller': _scroller })

    // Const assignment.
    const _scrollContainerPage = gsap.utils.toArray('#ScrollContainer > section')

    // Get maximum width to scroll
    const getMaxWidth = () => { _maxWidth = 0 ;_scrollContainerPage.forEach(section => _maxWidth += section.offsetWidth) }

    /*
     * Calculate maxWidth and update maxWidth
     * variable for further calculation.
     */
    getMaxWidth()

    // Event listener.
    ScrollTrigger.addEventListener('refreshInit', getMaxWidth)

    // Animate to given section.
    gsap.to(_scrollContainerPage, {
      'xPercent': -100 * (_scrollContainerPage.length - 1),
      'ease': 'power3.inOut',
      'scrollTrigger': {
        'trigger': _scrollContainer,
        'pin': true,
        'scrub': 1,
        'snap': [0, 0.5, 1],
        'start': 'top top',
        'ease': 'none',
        'duration': 0.3,
        'end': () => `+=${_maxWidth / 2}`,
        'invalidateOnRefresh': true,
        'anticipatePin': 1
      }
    })

Like this. still getting vertical scroll

[dotsinspace]

@akapowl i tried to use it but getting error require plugin name even though class with given name is defined.

[akapowl]

The pen I posted additionaly loads smooth-scrollbar's overscroll-plugin via the JS settings, maybe you're missing that?

 

Either try loading the plugin

 

https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/8.3.1/plugins/overscroll.js

 

or removing the initialization of the overscroll-plugin.

 

// this initializes the plugins
Scrollbar.use(HorizontalScrollPlugin, OverscrollPlugin);

// maybe try this instead
Scrollbar.use(HorizontalScrollPlugin);