How to animate a dynamic slideshow with some transitions with GSAP ?

[curlyroots]

Hello everyone,

I've come to ask for your help because I haven't found any similar discussions addressing my problem. To summarize my project, I work for a company that offers a solution for automating video creation and uploading to various networks, including YouTube. We use ReactJS and the great tool Remotion => https://www.remotion.dev/ to generate videos using code.

 

Recently, I've integrated GSAP into our project, mainly to animate SVGs, but also to create a dynamic slideshow with effects such as the Ken Burns effect and lateral scrolling to give the impression of "navigating through the image".

My images are stored in an array and I scroll them for 3 seconds each.

 

Do you have any tips for adding smooth transitions to the images in my slideshow?

At the moment, I'm using a transform (translate) that I adjust as the images scroll, but this is becoming increasingly problematic. Unfortunately, I can't use pure CSS in the project (and therefore initialize a move to zero in the CSS), as the animations must be based on the value of useCurrentFrame() => https://www.remotion.dev/docs/flickering.

I had some difficulty synchronizing the GSAP animations with Remotion, and was lucky enough to come across this article which helped me a great deal to integrate the library correctly, which can be found here: https://archive.ph/dGQ19

 

Below, I share with you the piece of code responsible for displaying the slideshow.

Thank you very much for your help.

 

Best regards,
Mediapole company.

 

PS : You can see here an example of my template : https://youtube.com/watch?v=K-d2XTi57D8

See the Pen GRzZrRv by selim-ramdani (@selim-ramdani) on CodePen

[Rodrigo]

Hi @curlyroots and welcome to the GSAP forums!

 

Your demo is not working. In order to create a minimal demo using React, you can fork one of the starter templates we have in our Stackblitz collection:

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

1 hour ago, curlyroots said:

but also to create a dynamic slideshow with effects such as the Ken Burns effect and lateral scrolling to give the impression of "navigating through the image".

Yeah, long slow images animations can be an issue for browsers. In this case maybe you could implement either canvas or WebGL using PIXI or THREEJS for better performance, but that will also depend on the limitations or constraints of the tool you're using on your project.

 

Finally in the case of the company you're working with, it would be good to know if you need a license or not based on your business model. Please review the information in this page in order to be certain about this fact:

https://gsap.com/licensing/

 

If you need any clarification feel free to contact us via DM or using our contact form
https://gsap.com/community/contact/

 

Hopefully this helps.

Happy Tweening!

[curlyroots]

Bonjour @Rodrigue,

Thank you for all the information you've provided.

The demo doesn't work but the piece of code responsible for displaying the slideshow does display correctly.

I could share a stackblitz link if this post is unreadable and I apologize in advance.

For the moment, we only want to test GSAP, and then we'll see if we need a special license. Thanks again for your help.

 

Here's the code snippet and video link: (slideshow starts at the sixth second)

 

 

 

import {Img, Sequence, interpolate, useCurrentFrame, useVideoConfig} from 'remotion';

import gsap from 'gsap';

import {useRef} from 'react';

import {useGsapTimeline} from '../../Template01-06photos/utils/useGsapTimeline';

 

export const Card = ({photos, animation_photo}) => {

  const videoConfig = useVideoConfig();

  const frame = useCurrentFrame();

  const {fps, durationInFrames} = useVideoConfig();

 

  const imageDurationFrames = Math.floor(videoConfig.fps * 3); // 3 seconds per image

 

  const photoCount = photos ? photos.length : 0;

 

  const currentPhotoIndex = Math.floor((frame / durationInFrames) * photoCount);

 

  const translateXZoom = interpolate(frame, [0, imageDurationFrames], [0, -5]);

  const translateY = interpolate(frame, [0, imageDurationFrames], [0, -5]);

 

  const scale = interpolate(frame, [0, imageDurationFrames], [1, 1.2]);

 

  // Calculates the image index to be displayed as a function of elapsed time

  const imageIndex = currentPhotoIndex % photoCount;

 

  const translateX = interpolate(frame, [0, videoConfig.durationInFrames], [0, -180]);

  const opacity = Math.min(1, frame / 60);

 

  const pictureRefs = photos.map(() => useRef(null));

 

  let targets = gsap.utils.toArray(pictureRefs);

 

  const animationBoxRef =

    useGsapTimeline <

    HTMLDivElement >

    (() => {

      const timeline = gsap.timeline();

      pictureRefs.forEach((ref, index) => {

        timeline.to(targets[1].current, {

          //

        });

      });

      return timeline;

    });

 

  return photos ? (

    <>

      {photos.map((photo, index) => (

        <Sequence ref={animationBoxRef} key={index} from={index * imageDurationFrames} durationInFrames={imageDurationFrames}>

          {animation_photo == 'zoom' ? (

            <Img

              src={photo}

              ref={pictureRefs[index]}

              className="photo"

              style={{

                objectFit: 'cover',

                width: '100%',

                height: '100%',

                transform: `translateX(${translateXZoom}px) translateY(${translateY}px) scale(${scale})`,

              }}

            />

          ) : (

            <Img src={photo} ref={pictureRefs[index]} style={{objectFit: 'cover', width: '100%', height: '100%', transform: `translateX(${translateX}px) scale(1.2)`}} />

          )}

        </Sequence>

      ))}

    </>

  ) : null;

};

[curlyroots]

I found some interesting things thanks to you :

https://github.com/gl-transitions/gl-transitions/tree/master

https://gl-transitions.com/editor/fade

https://github.com/JonnyBurger/remotion-gl-transitions/tree/master

[Rodrigo]

Hi,

 

The problem is that the code you post doesn't raise any red flags for me. The only things I can think of is whether or not that useGsapTimeline hook is doing proper cleanup and, as mentioned before, those really slow transitions can cause those issues. That's why I suggested either canvas or webgl for this.

 

You found a solution that is based on GLSL shaders and should perform great. If you can plug that into your app in order to create the videos, then I would choose that route.

 

Happy Tweening!