JamieRobertson

Got the Timeline setup working nicely by setting the starting point to 0, i also had to take into account the duration of my other timelines on the page but so far so good. thanks for your help. Jamie

Apologies if i gave that impression, thats not my intention. just seem to be fighting against gsap and eager to learn more... Can i ask what the difference is with these? gsap.to(Container.current, { x: () => -(Container.current.scrollWidth - document.documentElement.clientWidth), ease: "Power3.out", scrollTrigger: { trigger: Container.current, invalidateOnRefresh: true, pin: true, scrub: 1, end: () => "+=" + (Container.current.scrollWidth - document.documentElement.clientWidth) } }); This scrolls as expected except i get a jank when it ends as position fixed is removed. Compared to this: Timeline.current = gsap .timeline( { ease: "Power3.out", scrollTrigger: { trigger: Container.current, invalidateOnRefresh: true, pin: true, scrub: 1, end: () => "+=" + (Container.current.scrollWidth - document.documentElement.clientWidth) } } ) .to( Container.current, { x: () => -(Container.current.scrollWidth - document.documentElement.clientWidth) } ) This example is smoother, but gives me the issues discussed earlier.

Hi Zach, thanks for the example, im building something similar but it also has elements above so the user needs to scroll down to hit the timeline. Within this horizontal scroll i have certain cards that act as an intro card and they have an ID, this is what i want to link to. So basically the example you provided but with lots of panels and only certain cards have an id to which i want to scroll to from anywhere on the page. I hope you can help, its driving me nuts... XD Edit: im also building in React. Jamie

Hi Zach, here’s a rough example. https://codepen.io/ru7hl355/pen/WNGVgZw if you click on 3 or 5 you can see it over shoots. How could I resolve that? thanks

Hi Zach, How would you handle the scrolling to a specific anchor when the elements in the horizontal scroll are not equal width? im basically doing this: const scrollPos = offset.top + offset.left; const selector = scrollPos ? { y: scrollPos } : '#timeline'; gsap.to(window, { scrollTo: selector, duration: 2 }); Currently overshooting my target but if i click my link a few times it evens out and is correct so guessing its a calculation error. for context its a horizontal scroll with different sections of varying length. thanks Jamie

useEffect(() => { ScrollTrigger.matchMedia({ "(min-width: 1024px)": function () { if(Timeline.current) Timeline.current.kill(); TimelineTween(); } }); }, []); Ah, figured it out :). thanks for the help.

Hi Zach, Thanks for the welcome and help. Unfortunately its when i add in the media query that things start to break, how would i totally disable the timeline under say 1200px? i thought i could do Timeline.current.kill() but it doesn't seem to regain the scrollWidth after that. Jamie

Hi all, beating my head against a wall here... i have a horizontal scroll component which works great, however when i resize my browser the scroll value seems to get confused and it no longer scrolls... i would expect it to kill the timeline on resize and re-render but that doesn't seem to happen. Can anyone see the issue? import React, { useRef, useEffect } from 'react'; import gsap from 'gsap'; import TimelineCard from '@components/molecules/timeline-card'; import useWindowSize from '@hooks/windowSize.hook'; import { TimelineWrapper } from './style'; const TimelineScroller = ({ content= [], enabled = true }) => { let Container = useRef(null); const Timeline = useRef(null); const size = useWindowSize(); const TimelineTween = () => { const scrollWidth = Container.current.scrollWidth - document.documentElement.clientWidth; Timeline.current = gsap.timeline({ scrollTrigger: { trigger: Container.current, scrub: 1, pin: true, end: () => scrollWidth } },{ defaults: { ease: 'power3.out', paused: true } }) .fromTo(Container.current, { x: 0 }, { x: () => -(scrollWidth) }, 0); } useEffect(() => { if(Timeline.current) Timeline.current.kill(); if(Timeline.current) console.log('TIMELINE:: ', Timeline.current) if(size.width >= 1200) { TimelineTween(); } }, [size.width]); return ( <TimelineWrapper ref={Container} className="timeline-parallax"> {content.map((item, i) => { return ( <div className="item-wrapper" key={`timeline-item-${i}`}> <TimelineCard backgroundColour={item.backgroundColour} textColour={item.textColour} content={item.intro} type={item.type} {...item} /> </div> ) })} </TimelineWrapper> ) }; export default TimelineScroller; Size is a hook that is working correctly. Edited with example: https://codesandbox.io/s/recursing-mountain-e6pw5?fontsize=14&hidenavigation=1&theme=dark