Jump to content
GreenSock

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

dotsinspace

ShockinglyGreen
  • Posts

    25
  • Joined

  • Last visited

About dotsinspace

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

dotsinspace's Achievements

  1. @akapowl i tried to use it but getting error require plugin name even though class with given name is defined.
  2. // 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
  3. // 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
  4. the one you provided already work for me. i want horizontal scaling using scrollerProxy. scrollTrigger one is too chopy not as smooth using scrollerProxuy
  5. Blake is there any way to use smooth-scrollbar with trigger proxy for horizontal scrolling
  6. it worked...i will cry
  7. 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.
  8. Okay what should i do to minimize canvas size as those 3d models has to exact of that shape according to UI
  9. 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 } }) }, [])
  10. 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
  11. 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.
  12. 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.
  13. @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
  14. 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" } })
  15. @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' })
×