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

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; };

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