Jump to content
Search Community

Three.js and Gsap

dotsinspace test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

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

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

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.
×
×
  • Create New...