JamieRobertson
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by JamieRobertson
-
-
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,
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.
- 1
-
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
-
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
Problem with anchors and horizontal scroll - ScrollTrigger
in GSAP
Posted
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