LucieB

Hi @Rodrigo, I have a new question related to your answer, and the example created using GSAP with Nuxt 3: If I understand correctly the example, the code is only used for page transitions. How can we create an intro for each page (that could be different for each of them)? The goal would be to add an intro to each page, not to have this animation when changing pages, but only on the first site load. I tried to change some values on the function, but it failed every time because the animations play always. The only way I found is to add an animation inside the App.vue file (but how to know on which page we are, and call the right animation?) Thanks for helping… Lucie

Hey Rodrigo, thank you for the links !

Hi everyone, I'm actually discovering Nuxt 3, and am trying to manage page transitions with GSAP. I'm sorry if my questions also concern Nuxt (and not only GSAP), but I hope to find answers on this forum, which brings together a community of creative people. On the documentation, I saw we can animate page transitions with class names and CSS. But, I'm wondering if a transition manager like Highway exists to use GSAP with my website (e.g. onEnter, onEnterCompleted, onLeave, and onLeaveCompleted functions). My ideal goal would be to animate a page transition and to animate an intro (not the same animation). I do not have a CodePen to share, but here's an illustration of what I'd like to achieve : When the user navigates to the About page, the square goes to position B. And when the user returns to Home, the square goes to position A. References of websites I saw using Nuxt and GSAP (that do not use CSS class names like on the Nuxt documentation) : https://www.heights.agency https://fix.studio https://www.humanastudio.com Thanks for helping… Lucie

You're the best! Now it's working as I want: THANK YOU!

Hey my friends! I'm working with React and I use GSAP for the first time with Contexts. Perhaps i mistaken (because of the refs and useEffects hooks?), but my timeline's working twice all the time, and I don't know why. I tried to use from, fromTo, to... And actually every time, the issue is present. I created a short CodeSandBox to illustrate my issue. Of course, for my example I don't need the use the Context, but in my real project I would. Hope you guys are fine in these strange moments. Have a nice day! Lucie

Hey. Just one last thing : to add some smooth/motion to a draggable slider, I saw we can use throwProps: true. Is it a GreenSock Premium plugin ? Or can we use it without the plugin ? I read some old topics in the forums, but actually I don't know if there's new changes about this, with the V3. Thanks

Thanks guys. What a answer, thanks a lot Rodrigo. I was just wondering about this : import { Draggable } from "gsap/Draggable"; gsap.registerPlugin(Draggable); But the code you wrote will probably help me a lot. Thanks again, and take care!

Hi everyone! Like most of you, I'm at home and I'm trying to create new things with GSAP! My goal is to recreate a draggable slider that I saw on Nikolas Type website, with React JS (hooks). I've never used the Draggable of GSAP. And even if I read the documentation, I don't know how it works with React : Can I just import gsap like this : import { gsap } from "gsap" ? Should I write the Draggable inside the useEffect part ? Here's a preview of what I'd like to achieve : Here's a Codesandbox I made. Actually there's no interactions/animations yet: https://codesandbox.io/s/draggable-slider-with-gsap-c5lem?file=/src/components/Slider.js Thanks a lot, and take care!

This is perfect! Thanks for all explanations Rodrigo. And I'm sorry about all my questions...

Hey Rodrigo, I'm sorry about the 404. I thought my link was good. I recreated what i want to illustrate here. This is not about a reverse animation. I just created two different animations, and as you can see I re-write the target for animation the element (eg. container.current.children[0]). Do you think the best method is to create a state and store inside the element I want to animate differently (to not repeat myself in writing the ref children) ? I let you look at my code, if you have some time. Thanks again for your time. Take care! Lucie

Thanks again Rodrigo! Everything's working as I want! Thanks to you! I only have a last question about targeting elements, in React for GSAP animations: Actually I only target elements that I want to animate with useRef. No problem at all. But I'm wondering if we could create some variables to store the ref path to animate the element we want. I create a new CodesandBox to illustrate my question : https://codesandbox.io/s/target-elements-in-react-gsap3-3vz98 I created an animation in useEffect, when the DOM's ready. But I also created an event listener on the button onClick. And to animate the title, or the subtitle, I need to rewrite the entire path from the ref ( eg. containerRef.current.children[0] ). So, my question is : Should I store the path in a state ? Like this : const [title, setTitle] = useState(""); useEffect(() => { setTitle(containerRef.current.children[0]); }, []); const myEvent = () => { gsap.to(title, { color: "red", duration: 1 }) } I'm sorry about all my questions. I just would like to write the cleanest code as I can. Thanks again, Rodrigo!

Hey, I met some issues with this technique. Perhaps because my Wifi connection is not excellent... When I push my website to the prod and watch it, sometimes the timeline is animating before the document is ready. I mean the animation began before all the content is loaded, specially on mobile. Even if I use a delay for the tl. So my question is : should I create a state for the timeline to resolve this problem ? Thanks a lot again, and take care!

Oh okay! Thanks for this explication, Zach !

Hi Mikel ! Thanks for your answer. But it seems it's not about easings. Because in my demo, if I change the target, the animation looks smoother : https://codepen.io/thisislucie/pen/QWbRKQB

Greetings! I'm trying to create properly a simple overlay for pictures onClick event. I saw we can use the clipPath with GSAP, but I have some troubles : the duration is not respected for the animation. I wrote a duration of 1.5seconds and the animation is really quick! How to resolve this ? Of course, I could create a simple empty div that takes the width and the height of his container as an absolute position and animate this. But I'm trying to create and animate an overlay the cleanest possible way. So, my second question is : Is the clipPath a good way to create an overlay ? Thanks, and take care!