Maxwell Alves

@Rodrigo the structure of your project is a little different, you are using version 13, mine is 13.4.1 . Not sure if that would impact directly. About the mentioned error, I found it strange, because those lines were being used, which is nothing more than font import. And I also believe it has something to do with the SSR, but I'm already following the new recommendation on this one, which is to pass the "use client" flag. I see you got around this with a custom hook.

Thanks!

Not work, i open and the animation not work. Apply refresh and nothing

@Cassie I made your suggestion in the test with NextJS (13), when saving, the automatic rebuild, made the video work, but when I click "refresh" from the browser embedded in the codesandbox, the animation no longer works, that is, it only worked once turn. My suspicion is that it's something with NextJS, but honestly, I'm not sure, since I don't get any errors in the console. https://codesandbox.io/p/sandbox/react-next13-gsap-control-video-fd969p

I think you got it wrong. As I explained above, the only one that didn't work was NextJS. You applied the context in pure react, in this version, I had no problem either. As I mentioned, I did 3 tests, pure React (works), NextJS (Doesn't work), vanilla (works). However, I'll apply your context example to NextJS and return here.

Well, here's an explanation of some tests i did: Link React(Create-React-App): https://codesandbox.io/s/react-gsap-control-video-55jv75 Link React/Nextjs13: https://codesandbox.io/p/sandbox/react-next13-gsap-control-video-fd969p Link VanillaJS: https://codepen.io/maxleon52/pen/vYVbvXX I replicated the example in 3 ways, however, in NextJs, it doesn't work. Motive? I have no idea! No error appears on the console to debug the code. If anyone knows how to explain me, comment below, I will be grateful for your help. The steps used were: 1 - Install ffmep, See the doc at: https://ffmpeg.org/documentation.html; 2 - Do the conversion of the video, here is a command line example: ffmpeg -i NAME_YOUR_VIDEO.mp4 -vf scale=960:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p NAME_EXIT_YOUR_VIDEO.mp4 3 - Replicate the example code above. That's it. PS: I didn't develop the code, I just found it at this link:https://codepen.io/wisearts/full/ExZGrbZ All the credits are his, I just adapted it to my need, with react and nextjs.

Thanks, i searched and got it. I saw several tests, I couldn't. I created a similar thread, though, focused on React with NextJS. I'll explain there, my experiments. Follow the link:

How to encode these formats into a video? I would like to do in a video of mine.

I'm trying to replicate this example for React/NextJS. In this example, I changed the prop "scrub" from "true" to "2", and it worked exactly as I would have liked, where when you scroll the video moves forward or backward smoothly. I've been trying for days to do this in React, and it just doesn't work. Could some expert help me convert this code to React/nextjs? PS: The code pen is the exemplo that i try replicate. My code is thi img:

I'm trying to replicate this example for React/NextJS. In this example, I changed the prop "scrub" from "true" to "2", and it worked exactly as I would have liked, where when you scroll the video moves forward or backward smoothly. I've been trying for days to do this in React, and it just doesn't work. Could some expert help me convert this code to React/nextjs? My code is thi img:

@OSUblake it turns out that you can't know at which point on the screen this problem will happen. If you test the demo on Edger and Opera these rendering errors don't happen, I need to know, if I made the animations correctly, if the refs are correct. Because I honestly don't believe it's a code error, but in Chrome, as in other browsers that use webkit, it doesn't have this problem.

guys @GreenSock and @OSUblake, see the demo video in chrome; https://watch.screencastify.com/v/zMqEdjqMxDsXNkqdwWvS the code is on stackblitz platform, because codesandbox was crashing a lot. https://stackblitz.com/edit/nextjs-vluygx?file=pages/solucoes.tsx I apologize for having created another forum, however, I abandoned that one, as it was written in my native language, Portuguese, I didn't even realize when I did it.

@GreenSockplease add "/solucoes" to the url so you can see the animation running, detail, open it in a separate tab for a better view. see image:

Hey guys, why is my animation having a rendering problem? example: https://stackblitz.com/edit/nextjs-vluygx

Guys, i forgot the video. https://watch.screencastify.com/v/G7rOyL4BuV3nf1PrE3ee

Olá pessoal, estou tentando entender o motivo pelo qual a minha animação fica com essas sombras/fantasmas. Seria algo errado no meu código? import { ReactNode, useLayoutEffect, useRef } from "react"; import gsap from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; import { Container, GroupCards, GroupCardsLeft, GroupCardsRight, Card, } from "./styles"; interface VendasProps { children?: ReactNode; } function Vendas({}: VendasProps) { gsap.registerPlugin(ScrollTrigger); // Cards let cardRef0 = useRef(); let cardRef1 = useRef(); let cardRef2 = useRef(); let cardRef3 = useRef(); let cardRef4 = useRef(); let cardRef5 = useRef(); let cardRef6 = useRef(); let cardRef7 = useRef(); let cardRef8 = useRef(); let cardRef9 = useRef(); let cardRef10 = useRef(); if (typeof window !== "undefined") { useLayoutEffect(() => { gsap.to(cardRef0?.current, { y: -830, scrollTrigger: { trigger: cardRef0?.current, scrub: 2, }, }); gsap.to(cardRef1?.current, { y: -1030, scrollTrigger: { trigger: cardRef1?.current, scrub: 2, }, }); gsap.to(cardRef2?.current, { y: -1390, scrollTrigger: { trigger: cardRef2?.current, scrub: 2, }, }); gsap.to(cardRef3?.current, { y: -1510, scrollTrigger: { trigger: cardRef3?.current, scrub: 2, }, }); gsap.to(cardRef4?.current, { y: -830, scrollTrigger: { trigger: cardRef4?.current, scrub: 2, }, }); gsap.to(cardRef5?.current, { y: -1430, scrollTrigger: { trigger: cardRef5?.current, scrub: 2, }, }); gsap.to(cardRef6?.current, { y: -1390, scrollTrigger: { trigger: cardRef6?.current, scrub: 2, }, }); gsap.to(cardRef7?.current, { y: -910, scrollTrigger: { trigger: cardRef7?.current, scrub: 2, }, }); gsap.to(cardRef8?.current, { y: -830, scrollTrigger: { trigger: cardRef8?.current, scrub: 2, }, }); gsap.to(cardRef9?.current, { y: -1430, scrollTrigger: { trigger: cardRef9?.current, scrub: 2, }, }); gsap.to(cardRef10?.current, { y: -1390, scrollTrigger: { trigger: cardRef10?.current, scrub: 2, }, }); return () => { gsap.killTweensOf(cardRef0); gsap.killTweensOf(cardRef1); gsap.killTweensOf(cardRef2); gsap.killTweensOf(cardRef3); gsap.killTweensOf(cardRef4); gsap.killTweensOf(cardRef5); gsap.killTweensOf(cardRef6); gsap.killTweensOf(cardRef7); gsap.killTweensOf(cardRef8); gsap.killTweensOf(cardRef9); gsap.killTweensOf(cardRef10); }; }, []); } return ( <Container> <GroupCards> <GroupCardsLeft> <Card ref={cardRef0} id="cardRef0"> <h4>Automatize suas vendas e escale mais</h4> <p> Envio automático de catálogos, ofertas e outras mensagens pelo WhatsApp. </p> <p> Bot disponível para responder dúvidas a qualquer momento, inclusive nos feriados e fins de semana. </p> <p> {" "} Automatize com chatbot e direcione o cliente ao chat humano quando necessário. </p> </Card> <Card ref={cardRef1} id="cardRef1"> <h4>Venda em qualquer canal e em tempo real.</h4> <p>Tenha controle multicanal de todas as suas interações</p> <p> {" "} Ofereça a possibilidade de o seu cliente comprar com você em qualquer canal, obtendo o direcionamento certo. </p> </Card> <Card ref={cardRef2} id="cardRef2"> <h4>1 número = vários profissionais no WhatsApp</h4> <p>Escale suas vendas mantendo apenas 1 número no WhatsApp.</p> <p> Uso de API oficial para mais segurança e estabilidade para o seu negócio não parar. </p> </Card> <Card ref={cardRef3} id="cardRef3"> <h4>Recuperação de carrinho abandonado</h4> <p> Pare de perder vendas por abandono de carrinho. Motive seu potencial cliente a retornar à compra, por meio de envio de mensagens via WhatsApp. Ofereça algo especial, como um cupom de desconto, para que ele possa retomar e concluir sua compra. </p> </Card> <Card ref={cardRef4} id="cardRef4"> <h4>Siga os passos e ações do seu cliente.</h4> <p>Veja quais foram os pontos de interação com a sua marca.</p> <p> Tenha uma visualização simplificada de todos os contatos do cliente em um único lugar. </p> </Card> </GroupCardsLeft> <GroupCardsRight> <Card ref={cardRef5} id="cardRef5"> <h4>Geolocalização para levar o cliente à loja física</h4> <p> Oriente de forma automatizada o seu novo cliente ou um cliente já conhecido a encontrar a loja mais próxima ao endereço dele. </p> </Card> <Card ref={cardRef6} id="cardRef6"> <h4>Comunique a disponibilidade dos seus produtos</h4> <p> Informe seu cliente avisos de reposição no estoque, novidades que chegaram no catálogo, dentre outras atualizações. </p> </Card> <Card ref={cardRef7} id="cardRef7"> <h4>Agilize respostas para dúvidas frequentes </h4> <p> Mantenha visível as dúvidas e respostas mais frequentes dos consumidores e acelere a tomada de decisão. </p> </Card> <Card ref={cardRef8} id="cardRef8"> <h4>Gerencie conversas entre vendedores e clientes</h4> <p> Direcione o cliente de forma automática para o departamento adequado e ofereça atendimento personalizado. </p> </Card> <Card ref={cardRef9} id="cardRef9"> <h4>Vitrine com avaliações sobre seus produtos</h4> <p> Disponibilize comentários e avaliações sobre experiências anteriores com seus produtos para ajudar ainda mais na conversão. </p> <p> Ofereça mais segurança para novos consumidores ao expor experiências anteriores dos seus atuais clientes. </p> </Card> <Card ref={cardRef10} id="cardRef10"> <h4>Indicação de produtos no momento certo</h4> <p> Sugira produtos complementares de forma automática, colaborando para mais compras e que se complementam. </p> <p> Entenda as preferências do seu consumidor e ofereça produtos de forma mais assertiva. </p> </Card> </GroupCardsRight> </GroupCards> </Container> ); } export default Vendas; Vale ressaltar que, estou chamando um componente dentro do outro: