nxtEdition React GSAP templates

General
1

I have been using CasparCG at work for quite a long time and I am happy. For templates I tried nxtedition create-caspar-graphics. With my level of knowledge I have been able to make cool templates in vanilla JS, but I want to go further and use the full potential of this Graphics Kit using React. I’ll throw shame aside and ask here what is not clear to me.

How the useAnimatedChange custom hook should be used with GsapTimeline? There is not a single example where I can see, understand and learn this.

Thank you in advance for your support!

2

Is it this one you have been used?

3

Hi, yes, this one I am using now and want to use it more additional with React.

4

Hi!

The <GsapTimeline /> component was created to solve the problem of animating a graphic on and off (play/stop) using a GSAP timeline, while the useAnimatedChange() hook was created to make transitions between updates — e.g. if you want to animate out a piece of text before animating in the new one.

In and out animations are usually quite straightforward, but updates can be trickier since you need to keep track of both the old and new value at the same time (sometimes you even want to show both at the same time in the transition).

The useAnimatedChange() hook let’s you define a tween for the out transition and tween for the in transition (when a value changes). But it’s still up to you to render the two elements. Here’s an example of what that could look like:

const Credit = ({ text }) => {
  const [curr, next] = useAnimatedChange(
    text,
    { y: '-100%', duration: 0.3, ease: 'ease' }, // out tween
    { y: '0%', duration: 0.3, ease: 'ease', delay: 0.4 } // in tween
  )

  return (
    <>
      <div ref={curr.ref}>
        <span>{curr.value}</span>
      </div>
      <div
        ref={next.ref}
        style={{
          transform: 'translateY(-100%)'
        }}
      >
        <span>{next.value}</span>
      </div>
    </>
  )
}

But since Framer Motion came along with its AnimatePresence, which takes care of all this in the background, we’ve basically stopped using the useAnimatedChange() hook (both can be used alongside or inside a <GsapTimeline />). Here’s roughly the same thing using Framer Motion (notice how we only need one text element):

<AnimatePresence mode="wait">
  <motion.div 
    key={text}
    initial={{ y: '100%' }}
    animate={{ y: 0 }}
    exit={{ y: '100%' }}
  >
    <span>{text}</span>
   </motion.div>
</AnimatePresence>

This will take care of animating out the old text, before animating in the new one.

1 Like
5

Thank you very much!
I wasn’t expecting such a great explanation of how it all works. You are doing a wonderful job. Good luck!