Jump to content


  • Posts

  • Joined

  • Last visited

Community Answers

  1. velkas's post in What does "end: top bottom" mean? was marked as the answer   
    I may be wrong but I believe that end: top bottom means to end the animation when the top of the animated element reaches the bottom of the viewport. So end: top bottom-20px would end the animation when the animated element is 20px below the bottom of the viewport.
  2. velkas's post in ScrollTrigger Usage with Gatsby and Smooth Scrollbar was marked as the answer   
    After some fiddling, the solution I came up with was to conditionally render the children. The scroll requires a ref to the scroll container so the init function is placed inside useEffect to guarantee the ref is defined. And because this component is at the "top level" we don't need to pass location to the useEffect callback. This seems to work but any improvements or suggestions are welcome 🤷‍♂️
    import React, { useRef, useEffect, useState } from "react" import Navbar from "./navbar" import Scroll from './scroll' import '../styles/smooth-scrollbar.css' const Layout = ({ children }) => { let scrollerRef = useRef() let [scrollDefined, setScrollDefined] = useState(false) const initScroll = () => { Scroll(scrollerRef) setScrollDefined(true) } useEffect(() => { initScroll() }, []) return ( <div className="global-wrapper scroller h-screen overflow-hidden" ref={scrollerRef}> <header className="global-header animate__animated animate__fadeIn"> <Navbar /> </header> <main>{ scrollDefined && children }</main> <footer> {/* © {new Date().getFullYear()}, Built with */} {` `} {/* <a href="https://www.gatsbyjs.com">Gatsby</a> */} </footer> </div> ) } export default Layout  
    import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import Scrollbar from 'smooth-scrollbar' import SoftScrollPlugin from './plugins/SoftScrollPlugin' const Scroll = (scrollerRef) => { const scroller = scrollerRef.current Scrollbar.use(SoftScrollPlugin) const bodyScrollBar = Scrollbar.init(scroller, { damping: 0.1, delegateTo: document, alwaysShowTracks: true }) window.bodyScrollBar = bodyScrollBar gsap.registerPlugin(ScrollTrigger) ScrollTrigger.defaults({ scroller: scroller }) ScrollTrigger.scrollerProxy(scroller, { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value } return bodyScrollBar.scrollTop } }) ScrollTrigger.refresh() bodyScrollBar.addListener(ScrollTrigger.update) } export default Scroll  
  3. velkas's post in Frame Skip on Infinite Text Carousel was marked as the answer   
    Removing spaces between elements in HTML resolved the issue. Additionally I think a better alternative is to use flexbox. I've updated the pen to use flexbox.