dotsinspace

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

it worked...i will cry

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.

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

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

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

One more question as you can see in code pen when horizontal scroll page ends on last page in this case ( 3rd Page ) and Vertical Scroll starts my every user see little bump before vertical scroll begins how can i avoid it.

Guys why snap is not working when ever i scroll last page get snapped every time, instead of middle one in same example we are discussing. https://codepen.io/dotsinspace/pen/vYZKwvM NOTE: i am looking for dynamic solution. current code of gsap is dynamic independent of width of window. it just calulates total page in #ScrollContainer and slide accordingly. i have already tried adding snap: { x: [0, 100] } etc. but nothing works perfect. along with it have one more doubt ( not question ) is it possible to add smoothness to vertical scroll like what horizontal scroll have. because horizontal scroll look nice but when last page starts vertical scroll everything seems ugly.

@Cassie just created different setup for this issue. https://codesandbox.io/s/intelligent-haslett-iot3j?file=/pages/index.js please do checkout it. i aggreed that it works with basic setup but in next.js project it just doesnt work

i tried all cases but there are no logs nothing which can state problem. it just doesnt work. ScrollTrigger is working fine but ScrollToPlugin just doesnt work. gsap.to(window, { scrollTo: { x: ".page2" } })

@Cassie cant we target #ScrollContainer in codepen example ? or do we have to use window for scroll target. and second thing following works gsap.to(window, { 'scrollTo': { x:800 } }) but if try to target element with class or id than it doesnt work either. gsap.to(window, { 'scrollTo': '.page2' })

Agreed what you are saying but on my React Next app even following code doesnt work gsap.to(window, { scrollTo: '#IDofGivenPage' }) Even i tried all cases in react next but scrollTo Plugin just doesnt work

TypeError: Failed to execute 'scrollTo' on 'Window': cannot convert to dictionary. this is error i am getting

@OSUblake i am trying to use scrollToPlugin but its not working. Could You Please help me. please do checkout same codepen.

@OSUblake i just found out why it was causing that weird bump. please do checkout my codepen. just updated it and it too behaving weird. i am new to gsap. but i have question. why applying transition prop in CSS causes that bump ? is it intended or its that CSS gives transition priority over gsap. https://codepen.io/dotsinspace/pen/gOWVdqe

@OSUblake i found out cause of this bump. Please do checkout this video https://www.awesomescreenshot.com/video/4922136?key=46e6a765fe4512046aec941e19272ac0 Bump occurs when transform property marked in red changes. even i have created codepen it is working fine you can check it out https://codepen.io/dotsinspace/pen/gOWVdqe. but again things are working fine on codepen but on by next.js project this bump is occuring all the time even though i dont have animation or easing related to this. if you want see live running project than please do checkout my portfolio website www.rootandleaves.com. Just want to get ride this of issue i have already wasted lot of time on this.

And Please admin delete this Post as this post will not going to help anyone and my code is open too. Thanks again

Highly Appreciate your time guys thank you and sorry for wasting your time.

@Cassie i tried to write it out on codepen but codpen version was running with no issue. so i got confused what wrong i am doing. thats why skipped to put codpen code over here.

Code to this Problem. /* * IMPORTS */ import React from 'react' // Npm: react.js library. import Head from 'next/head' // Npm: next.js header utility. /* * PACKAGES */ import Navbar from '~packages/common/components/NavBar' import Banner from '~packages/common/components/Banner' import TechnologyBanner from '~packages/common/components/TechnologyBanner' import Client from '~packages/common/components/Clients' import WebDevelopment from '~packages/common/components/WebDevelopment' import Footer from '~packages/common/components/Footer' import LanguageOption from '~packages/common/components/LanguageOption' import JoinMsTeamsOrGmail from '~packages/common/components/JoinMsTeamsOrGmail' import Particle from '~packages/reusecore/src/elements/Particle' import AppDevelopment from '~packages/common/components/AppDevelopment' import ContactForm from '~packages/common/components/ContactForm' import DevOpsDevelopment from '~packages/common/components/DevOpsDevelopment' import ServerDevelopment from '~packages/common/components/ServerDevelopment' /* * OBJECTS */ const Index = ({ scrollContainerStyle, scrollPageStyle }) => { // Hook assignment. const [scrollContainerClasses, setScrollContainerClasses] = React.useState('background dark') const [languageOptionClasses, setLanguageOptionClasses] = React.useState('font light') const [activePage, setActivePage] = React.useState('Home') // Object assignment. const { gsap } = require('gsap') const { ScrollTrigger } = require('gsap/ScrollTrigger') const { ScrollToPlugin } = require('gsap/ScrollToPlugin') // Event listener. React.useEffect(() => { // Local variable. let _maxWidth // Variable assignment. _maxWidth = 0 // Register gsap plugins. gsap.registerPlugin(ScrollTrigger) gsap.registerPlugin(ScrollToPlugin) // Const assignment. const _scrollContainer = '#ScrollContainer' const _scrollContainerPage = gsap.utils.toArray('#ScrollContainerPage') // 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, 'start': 'top top', 'end': () => `+=${_maxWidth}`, 'invalidateOnRefresh': true, 'anticipatePin': 1, 'onUpdate': v => { // Update states of fonts and backgrounds 0.33 <= v.progress ? setScrollContainerClasses('background light') : setScrollContainerClasses('background dark') 0.33 <= v.progress ? setLanguageOptionClasses('font dark') : setLanguageOptionClasses('font light') // Update active route. setActivePage(0.66 <= v.progress ? 'Technology' : 0.33 <= v.progress ? 'Clients' : 'Home') } } }) }, [ScrollToPlugin, ScrollTrigger, gsap]) // Return component. return ( // Return component. <> <Head> <title>App | A react next landing page</title> <meta name='Description' content='Home | Rootandleaves Webservices'/> </Head> <main id='ScrollContainer' className={scrollContainerClasses}> <Particle/> <section style={scrollContainerStyle}> <LanguageOption className={languageOptionClasses}/> <section style={scrollPageStyle} id='ScrollContainerPage'> <Banner children={(<Navbar activePage={activePage}/>)}/> </section> <section style={scrollPageStyle} id='ScrollContainerPage' className='font dark'> <Client children={(<Navbar activePage={activePage} darkTheme/>)}/> </section> <section style={scrollPageStyle} id='ScrollContainerPage' className='font dark'> <TechnologyBanner children={(<Navbar activePage={activePage} darkTheme/>)} scrollById={'Technology'} onClick={v => v}/> <WebDevelopment /> <AppDevelopment /> <DevOpsDevelopment /> <ServerDevelopment /> <JoinMsTeamsOrGmail /> <ContactForm /> </section> </section> <Footer /> </main> </> ) } /* * PROPTYPES */ Index.defaultProps = { 'scrollContainerStyle': { 'display': 'flex' }, 'scrollPageStyle': { 'minWidth': '100%', 'minHeight': '100vh' } } /* * EXPORTS */ export default Index

Guys I created following scroll using gsap. everything works fine but when i scroll i get bump. checkout following demo. // Link to video. https://www.awesomescreenshot.com/video/4919029?key=777eddf4aceeda23309397067f230987