JoeH Posted September 18, 2020 Share Posted September 18, 2020 Hi all, I'm not able to provide a CodePen for this I don't think (because I'm using React). I'm using Routes and CSSTransition, the problem arises when going between 2 pages which transition, these pages use the same components. On the page is a component which is a gallery and uses scrollTrigger to animate in each image in the gallery, my code for this is below. What happens is that when the transition is over and the second page has loaded, the scrollTrigger is not triggered (even if I scroll). The unusual part is that if I resize the browser width it triggers. I understand I'm not exactly giving much to go by here so let me know how I can demonstrate the problem better, I can set this up somewhere it this helps. const GalleryType1 = ({assets}) => { const GalleryRef = useRef(null); useEffect(() => { gsap.utils.toArray(GalleryRef.current.children).forEach(section => { gsap.timeline({ scrollTrigger: { trigger:section, start: "center bottom", end: "center top", } }) .to(section.children[0].children[0].children[0], 1, {transform: "scaleX(0)", transformOrigin: "right", ease: "power2.inOut"}) .fromTo(section.children[0].children[0].children[1], {scale: 1.4}, {scale:1, ease: "power2.inOut", duration: 0.9}, '-=0.8') .add(function() { section.children[0].children[0].classList.add('loaded'); }) }); }, []); return ( <> <div id="gallery-type-1"> <div className="container-fluid"> <div ref={GalleryRef} className="row"> {assets.map(({ title, subtitle, image }) => ( <div className="col-6 col"> <div className="gallery-item"> <div className="gallery-image-item-wrapper"> <div className="gallery-item-cover"/> <div className="gallery-item-image" style={{ backgroundImage:"url("+image+")" }}> </div> </div> <div className="text"> <div className="heading">{title}</div> <div className="sub-heading">{subtitle}</div> </div> </div> </div> ))} </div> </div> </div> </> ) }; export default GalleryType1; Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 19, 2020 Share Posted September 19, 2020 Hey Joe. 16 hours ago, JoeH said: I'm not able to provide a CodePen for this I don't think (because I'm using React). Sites like CodeSandbox are easier to use with React. Lots of people make React demos with GSAP Learn more about doing that here. 16 hours ago, JoeH said: The unusual part is that if I resize the browser width it triggers. It sounds like ScrollTrigger just needs a .refresh() when the new page is loaded then. Link to comment Share on other sites More sharing options...
JoeH Posted September 19, 2020 Author Share Posted September 19, 2020 Thanks Zach! What worked was putting the ScrollTrigger.refresh(); After my first line const GalleryType1 = ({assets}) => { Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now