Jump to content
GreenSock

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

Three.js and Gsap

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

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
 

  • Like 1
Link to comment
Share on other sites

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
      }
    })
  }, [])

 

Link to comment
Share on other sites

  • Solution

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.

 

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

 

 

  • Like 1
Link to comment
Share on other sites

it worked...i  will cry :D

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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);

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×