juan-alvarz

Hi to everyone of this beautifull community. I need some of your help, I want to create a landing page with some cool effects, in this case, I want to create a branch effect/circuit movement, I mean, right now I have this codepen with the init of the animation, I want that the text enter, then, desintegrate into branches, that branches need to move around the page, I imagine this like a circuit signal, something like this: but with straighter trajectories instead of curves, I thing that with a SVG Plugin I can do this, but can you provide me some example or help for execute this ideas? Thank you so much.

Hello dear Green Sock Team, I have a question about gsap.matchMedia and ScrollTrigger plugin, I am making a page with ScrollTrigger animation, as I have asked before: I need to make the animations according to mediaqueries, as they are quite different from each other, but it turns out that I have tried several things and it does not work. 1. import React, {useEffect} from 'react' import gsap from 'gsap' import ScrollTrigger from 'gsap/dist/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger) import {mainAnimationDesktop, mainAnimationMobile} from '../utils/animations' export default function Page(){ useEffect(() => { const mm = gsap.matchMedia(); mm.add('(min-width: 1024px)', mainAnimationDesktop) mm.add('(max-width: 1023px)', mainAnimatoinMobile) },[]) return ( // ... my components ) } this work properly, except for one thing, when I resized the browser down to 1024 the page break, but if I reload the page (whit that size, <1024), the page load with animation mobile correctly, and if I resized the page doesn't break and execute the correct desktop animation, what's happen here? 2. import React, {useEffect} from 'react' import gsap from 'gsap' import ScrollTrigger from 'gsap/dist/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger) import {mainAnimationDesktop, mainAnimationMobile} from '../utils/animations' // in this version I just put the logic inside mm export default function Page(){ useEffect(() => { const mm = gsap.matchMedia(); mm.add('(min-width: 1024px)', () => { // the code is so extensive, so I just omit it }) mm.add('(max-width: 1023px)', () => { // this version is like the desktop version, but I'TS JUST AN EXAMPLE // both desktop and mobile have ScrollTrigger const tl = gsap .timeline() // config for views of scenes // give an visibility 0 to all container for avoid superpositions .set(MAIN_CONTAINERS_IDS, { opacity: 0, visibility: 'hidden', }) // Init with sectionOne .to(ids.sectionOne.MAIN_CONTAINER, { visibility: 'visible', opacity: 1, duration: 2, }) // Content of sectionOne .fromTo( ids.sectionOne.CONTENT, { opacity: 0, x: '-=15vw', }, { opacity: 1, x: 0, duration: 5, delay: 0.5, } ) // introduction of page is finished .addLabel('sectionOne stop - enter sectionTwo'); ScrollTrigger.create({ animation: tl, trigger: MAIN_CONTAINERS_IDS[0], start: 'top top', end: '1000', scrub: 0.5, pin: true, snap: { snapTo: 'labelsDirectional', }, }); } },[]) return ( // ... my components ) } in this one the animation for desktop and moble go perfectly but... we arrive to the title of the topic, the ScrollTrigger seems to stop working links: 1. here is the second version, with logic inside mm at the same file, where ScrollTrigger doesn't work: https://ignite-web-juan-alvarz.vercel.app/temp 2. here is the first version, with animation comes from another file but inside mm depending mediaqueries, in this one the desktop version is correct, but in mobile doesn't work the animation: https://ignite-web-rouge.vercel.app I know the post was a bit long but it is to clarify everything and be very specific and you can help me, thank you very much.

thank you very much carl, that worked perfectly!

Hello everyone of GSAP. I have a project where I have to incorporate animations according to screen size (Desktop, Tablet & Mobile, for each device), so, we have 3 different animations, the question is, how can I make GSAP run one animation file or another depending on the size of the screen? the animations between these 3 services are really very different. I tried with an if according to the innerWidth, however I think that before that, I must execute some kill and some enable in case the browser resize is done, because of the responsive Thanks a lot for your helping

I'm very happy! right now it is very frustrating when you see your code more than 100 times and you don't find the fault, I have to say that in your answer it was only missing a loop without end, I just added it and it was like this, I hope this will also help someone else who needs it. https://codepen.io/juan-alvarz/pen/zYLEYEZ simply added gsap.timeline({ repeat:-1, repeatDelay:1, yoyo: true }) with this the animation continue without end Thanks Rodrigo, you're my hero ?

Hello dear team of GSAP, since I met GSAP I have not stopped using it in my projects, and it has helped me a lot, what I have found in the forums has been enough to get out of the problems I've had, except for this one. I am using GSAP with Next, I have an animation that I want to make, similar to this one: https://codepen.io/GreenSock/pen/GqKrxG happens, that once finished, that is, in an onComplete of the yoyo, I want it to change the text for one of those that I have in an array, i'm using useState for it, and it don't work, the question is How can I make a similar effect that change text inside of array in a yoyo property?, thanks