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