Timeline breaks on resize

[JamieRobertson]

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

[ZachSaucier]

Hey Jamie and welcome to the GreenSock forums. 

 

This sort of thing is what invalidateOnRefresh is for: https://codesandbox.io/s/adoring-feather-nomtx?file=/src/App.js

 

Note that I didn't add conditional checking of disabling/enabling it (or destroying/recreating) based on your media queries.

[JamieRobertson]

21 minutes ago, ZachSaucier said:

Hey Jamie and welcome to the GreenSock forums. 

 

This sort of thing is what invalidateOnRefresh is for: https://codesandbox.io/s/adoring-feather-nomtx?file=/src/App.js

 

Note that I didn't add conditional checking of disabling/enabling it (or destroying/recreating) based on your media queries.

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

[JamieRobertson]

  useEffect(() => {
    ScrollTrigger.matchMedia({
      "(min-width: 1024px)": function () {
        if(Timeline.current) Timeline.current.kill();
        TimelineTween();
      }
    });
  }, []);

Ah, figured it out :). thanks for the help.