Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by velkas

  1. I'm animating cards (checkpoints) on a horizontally scrolling roadmap and the cards fade in as they enter the viewport. The first three cards should be immediately visible because they are all either passed or very close to the end of their scrolltriggers (so their opacities would be ~1). These cards which should be initially visible actually fade in simultaneously only after the roadmap is pinned. How can I "evaluate" the initial animation state and ensure the cards at the beginning of the roadmap are visible on page load, not just after the pin is activated?

    See the Pen WNJWBOG by connorhansen (@connorhansen) on CodePen

  2. Thanks! Codesandbox is giving me server errors so I have a local Nextjs setup attempting to create an implementation of the Vue example here: 

    See the Pen LYQaOBm by cassie-codes (@cassie-codes) on CodePen


    Running into an error when calling Flip.getState in the effect cleanup: TypeError: Cannot read properties of null (reading '_gsap')


    import { Flip } from "gsap/dist/Flip";
    import { gsap } from "gsap";
    import { useEffect, useRef } from "react";
    function Potions() {
      let iconRefs = useRef([]);
      useEffect(() => {
        let iconRefValue = null;
        if (iconRefs.current) {
          iconRefValue = iconRefs.current;
          Flip.getState(iconRefValue); // Works
        return () => {
          if (iconRefValue) {
            Flip.getState(iconRefValue); // Doesn't work
      }, []);
      return (
            className="avatar flipMe"
            ref={(el) => {
            className="potion flipMe"
            ref={(el) => {
            className="spell flipMe"
            ref={(el) => {
    export default Potions;



  3. On 2/25/2021 at 4:18 PM, ZachSaucier said:

    Hey @Kyle Craven and welcome to the GreenSock forums.


    No, we haven't been able to get to a more full tutorial with Barba.js yet (though I started work on it a while back).


    The closest thing currently is the introduction/overview video in the Flip docs. That along with the Flip how-to pens and showcase should get you started. If you have a specific question please ask! It'd probably be best to start a new thread though :) 

    Any update here? 😄

  4. The following component override (using ScrollerMotion library) seems to do the trick. Still need to try with GSAP Scroll Smoother. 

    import type { ComponentType } from "react"
    import { ScrollerMotion } from "scroller-motion"
    export function withScrollerMotion(Component😞 ComponentType {
    return (props) => {
    return (
    <Component {...props} />
  5. 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.

    • Like 2