Jump to content
Search Community

Search the Community

Showing results for tags 'helper functions'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 2 results

  1. I am using the horizontalLoop function provided in the helper functions to animate different lengths of <h1/>s in my NextJS app. I am also using Sass to style my components. I have added the following code in my _app.js to make sure gsap calculates properly: import { useRouter } from "next/router"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; function MyApp({ Component, pageProps }) { const router = useRouter(); const refresh = useCallback(async () => ScrollTrigger.refresh(true), []); useEffect(() => { gsap.registerPlugin(ScrollTrigger); router.events.on("routeChangeComplete", refresh); return () => router.events.off("routeChangeComplete", refresh); }, [router.events, refresh]); return <Component {...pageProps} />; } The problem I think is the refresh is happening before the document is loaded. So, I added the following code in my Marquee component: const gsapAnimate = () => { const boxes = gsap.utils.toArray(`.marquee-item-${uniqueId}`), tl = horizontalLoop(boxes, { repeat: -1, speed: 4 }); ScrollTrigger.create({ trigger: triggerClass, start: "top bottom", end: "bottom top", // markers: true, onEnter: () => tl.play(), onLeave: () => tl.pause(), }); }; useEffect(() => { window.addEventListener('load', gsapAnimate); return () => { window.removeEventListener('load', gsapAnimate); }; },[]); Now, the calculations are correct and it's animating well but when I navigate away from the page and get back, the animation stops. How can I get around this? What I Want: expectation.mp4 Current State: reality.mp4
  2. Hello Fellow GreenSockers, @GreenSock (Jack) has made a new Learning page. Over the years Jack has "whipped together" various GSAP-related helper functions for community members, so we gathered them into one place for convenience. Enjoy! https://greensock.com/docs/HelperFunctions That's it for now, but we'll keep adding relevant helper functions here as we craft them. Happy Tweening!
×
×
  • Create New...