Jump to content
Search Community

velkas

Members

  • Posts

    33

  • Joined

  • Last visited

 Content Type 

Posts posted by velkas

    Scrolltrigger Initial State Visibility

    in GSAP

    Posted

    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

    Seamless page transition when clicked on a small image.

    in GSAP

    Posted

    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() {
  gsap.registerPlugin(Flip);
  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 (
    <>
      <img
        className="avatar flipMe"
        ref={(el) => {
          iconRefs.current.push(el);
        }}
        src="/person.svg"
      />
      <img
        className="potion flipMe"
        ref={(el) => {
          iconRefs.current.push(el);
        }}
        src="/potions.svg"
      />
      <img
        className="spell flipMe"
        ref={(el) => {
          iconRefs.current.push(el);
        }}
        src="/spell.svg"
      />
    </>
  );
}

export default Potions;

     

     

    FLIP-Plugin: animate across routes in Vue.js 2

    in GSAP

    Posted

    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? 😄

    Scroll Smoother and Framer

    in GSAP

    Posted

    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 (
    <ScrollerMotion>
    <Component {...props} />
    </ScrollerMotion>
    )
    }
    }

    What does "end: top bottom" mean?

    in GSAP

    Posted

    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
1
2
Page 1 of 2  
×
×
  • Create New...