Jump to content
Search Community

deodat

Members

  • Posts

    16

  • Joined

  • Last visited

 Content Type 

Posts posted by deodat

    Problem with isReversed in a burger animation

    in GSAP

    Posted

    Ok, so I've found a solution which is to integrate my timeline in a useState like this :
    (but it's not very clear to me why this works... :) )
      

      const [tlBurger] = useState(
    gsap.timeline({
      paused: true,
      reversed: true,
      defaults: {
        duration: 0.5,
        ease: 'Back.inOut.config(2.3)',
      },
    })
  );

  const burgerRef = useRef();
  const waveTopRef = useRef();
  const waveMidRef = useRef();
  const waveBotRef = useRef();
  const flatTopRef = useRef();
  const flatMidRef = useRef();
  const flatBotRef = useRef();

  useEffect(() => {
    tlBurger
      .to(waveTopRef.current, { morphSVG: flatTopRef.current }, '<')
      .to(waveMidRef.current, { morphSVG: flatMidRef.current }, '<')
      .to(waveBotRef.current, { morphSVG: flatBotRef.current }, '<')
      .addLabel('hover')
      .to(waveMidRef.current, {
        duration: 0.3,
        scaleX: 0,
        transformOrigin: 'right center',
        ease: 'none',
      })
      .to(waveTopRef.current, { y: 10 }, '-=0.1')
      .to(waveBotRef.current, { y: -10 }, '<')
      .to(waveTopRef.current, {
        rotation: 45,
        transformOrigin: 'center center',
      })
      .to(
        waveBotRef.current,
        { rotation: -45, transformOrigin: 'center center' },
        '<'
      );
  }, [
    tlBurger,
    waveTopRef,
    waveMidRef,
    waveBotRef,
    flatTopRef,
    flatMidRef,
    flatBotRef,
  ]);

     

    Problem with isReversed in a burger animation

    in GSAP

    Posted

    Hello,

    I'm trying to replicate the animation you can see in this codepen in a React environnement (Gatsby), but I'm unable to pass in the condition where isReversed is equal to false and I don't understand why.
    Here is my codesandbox where I replicate the problem in a minimal demo : 
    https://codesandbox.io/s/modest-williamson-vw78t

    So I can't reverse the animation on click.


    Thanks for your precious advices,

    Deodat

    See the Pen OJRYXdV by deodat (@deodat) on CodePen

    ScrollTrigger with fixed backgrounds and decoupled slides

    in GSAP

    Posted

    Hello!

    I'm trying to build a slider with fixed backgrounds and slides with content that come with a vertical transition (at the end of this post).

     

    I'm not sure I've chosen the good strategy, I begun with this ScrollTrigger demo codepen : 

    See the Pen rNOebyo by GreenSock (@GreenSock) on CodePen


    The result isn't totally fluid... 

    I'd like to know what you would have done to achieve this?

     

    I'd like to trigger the slide change (background's fading and content transition) each time I begin to scroll. I tried something with the ScrollTo plugin but it was pretty janky when I started to use my trackpad :   

    See the Pen GRjNjxx by deodat (@deodat) on CodePen

     (now I'm trying to set a variable to avoid scrolling when the animation isn't completed).

    Thanks a lot in advance for your advices and ideas!

    Deodat

    See the Pen ZEpXpLB by deodat (@deodat) on CodePen

    ScrollTrigger, Horizontal Scroll, Split Text and Scrub

    in GSAP

    Posted

    Thanks you so much Paul for taking the time to explain all the process in details to me (and maybe others)!
    It's exactly what I wanted to achieve. 
    I know it would have been a lot easier with a real horizontal scroll (I did it pretty fast with the vertical scroll) but it's not easy to scroll horizontally with a mouse :)
    I'm gonna to dissect it all and play with it! 

    • Like 1

    ScrollTrigger, Horizontal Scroll, Split Text and Scrub

    in GSAP

    Posted

    Hello,

    I'm trying to scroll sections horizontally with a first section that scrubs the time a split text is animating (that one works).

    The problem is that my others sections seem to go below the first one with the pin and scrub of this last one.

    And I can't scroll the sections anymore (if I remove the split text animation, it does).
    I've tried many things (pinSpacing, etc.) but I can feel I miss something important.

     

    Any help very much appreciated,

    Deodat

    See the Pen PoGwezG by deodat (@deodat) on CodePen

    ScrollTrigger, matchMedia and gsap.set

    in GSAP

    Posted

    Hello,

     

    I'm trying to implement matchMedia with ScrollTrigger, it works very well but I have this little problem with gsap.set that I'm required to use because the pin method overrides my CSS transforms (in my CSS comments). 
    But it doesn't seem to apply at all, or just for a brief moment when crossing my 800px breakpoint.

    Any help and comment very much appreciated,

    Thanks,

    David

    See the Pen JjXKdBY by deodat (@deodat) on CodePen

×
×
  • Create New...