Lamonier

Hey! I'm Lucas, a full-stack developer from Brazil. Throughout my career I have built efficient, professional user interfaces for e-commerce, marketing campaign management, and sober websites. Over the course of the last year and a half I have, however, diving deep into ways to make experiences that go beyond the... For lack of a better word, usual. Today, on top of my back end experience and traditional front end, I passionately craft experiences using GSAP, 3D graphics, sound, and pretty much whatever crazy idea that has the potential to wow visitors. My professional portfolio website, which was accepted to join the official GSAP showcase, was built to experiment with different techniques, using the power of GSAP to bring to life 3D models. Take a look: LucasLamonier.com Animations, however, are just part of what I love to do. Allowing your visitors (or users) to interact with your website are also a huge deal. The images above are an interactive city-like sculpture that, when dragged the right way, become a fully functional QR code. Available here: LucasLamonier.com/😎 (Yes, the address is an emoji. The intention here was to go really over the top.) Beyond all that, I also do a lot of back end stuff, from Discord bots to fully-fledged e-commerce platforms. Currently available for projects, freelances, or more permanent arrangements. You can reach me either via DM here, on LinkedIn (LinkedIn/com/in/lamonier) or on any of the clickable things in the Contact section of my website. Thanks a lot GSAP folks and you who read this far. Peace!

Hey! I'm Lucas. A full-stack developer that works with Next.js, the MERN stack (MongoDB, Express.js, React, and Node.js), and, of course, GSAP! I have experience designing, developing, and shipping websites, apps, and solutions that reached some thousand users. From marketing campaign landing pages to proprietary e-commerce platforms. I am currently open to freelance projects as well as part-time and full-time positions. More details about me and some of my projects are available on my personal website: https://www.lucaslamonier.com/ If you're in need of some animations, full websites, web apps, or even some ideas, please do get in touch! My contact info is on the website and you can reach me by replying to this post or sending me a DM. I have no timezone restrictions. Thanks for reading!

@RawrBear that sounds like a challenge, but also a lot of fun. Having ideas and not being able (yet) of implementing them is awesome. Means you always have something to strive for. I'm somewhat short on ideas so coming up with something is already a challenge. Now for typescript, my naive JS brain thinks it's silly to write that bunch of stuff. However, I've been through some really hard times while making a Discord bot because I kept passing wrong things to functions. It would've saved me a lot of time. The huge majority of libraries on NPM is adopting TS, so it has got to be good ? I started studying it on my free time and it's been easy, until I write code on my own.

@RawrBear I want to see your project! ? Also, if you want to discuss some ideas or maybe something I could possibly be of some assistance, let's talk! @MichaelVazquez thanks! You got this! Keep beefing up your portfolio!

@RawrBear thank you so much! I used a ton of codepens, references of websites and components I found on Awwwards, and other random stuff. If you want I can send you some of the things that inspired me.

@PointC ?? All right! Better get started then! Thank you.

Thanks, @NickWoodward. I used React, so it was "easier". My approach was to split strings and wrap each individual character with a <span>. Then selected them all and a stagger of 0.3 (or 0.5) made all the magic happen. You have to set white-space: pre; on your targeted spans or else the spans that contain only a space will collapse. Thank you, @GreenSock! Sure will do! Woah, @Carl! That means a lot. Thank you very very much!

@mvaneijgen it's at https://lucaslamonier.com/ Open at your own risk. For a better (actually worse) experience try opening it on a smartphone. ? This page was really an experiment, I wanted to try as many crazy things as possible. I am now working on a version that will be more elegant and advanced (GSAP context, matchmedia...). @Cassie thank you so much! ?

Whew... 2023's been quite a ride so far. On november 24th, 2021, I bought an HTML and CSS course on Udemy. Coming from a career that I hated, it was a relief to find something that I actually enjoyed doing. HTML/CSS naturally led me to JS, then the whole thing flipped upside down with React and I was learning so many interesting things. Then came Node and I finally could make more ambitious things. I am not a designer and my creations never turned out the way I wanted, so I ended up moving away from the front end. But one day I found this website called Awwwards and I saw things that defied everything I've ever learned. Obviously it took me like 3 minutes to find a green library that looked like magic. And the craziest thing is that it appeared to be... Easy to use? ? I spent a month trying out different things. Made a website that has 0 design cohesion (but cool and poorly performant animations) and learned a lot. Got invited to an interview this week. It went great and a couple of hours afterwards they called to tell me I was the one. A part of the interview was specifically about the website with the "interesting" animations that I created and they liked what they saw. I'll start next Monday. So yeah, thank you all for being awesome! P.S.: in due time I will explain to them how getting me into the Club GreenSock is in the company's best interest.

I am terribly sorry for taking so long to reply, going through a rough patch. But I did it! And could not replicate my problem!! ? https://codepen.io/lrlamonier/pen/YzOpZGM I set up React and turned strict mode on. The code reflects exactly the setup I have. Each section is a component and the trigger structure is the same. I'll have to do some refactoring on my components, so I'll take a moment to read the docs thoroughly and start using context.

Hey, everyone! I hope you're all having a great 2023 so far. I've been having a blast experimenting with React in the past few months, but React has been reluctant to join the fun. More specifically the way it builds the page under the hood. Specially when you throw into the mix the strict mode, that runs everything twice. GSAP's docs on pairing it with React are absolutely awesome and helped immensely. However, some edge cases showed up and were tricky to solve. The latest one was triggers showing up in the wrong place, but would immediately snap to the correct position if the viewport was resized. Disclaimer: I was not using GSAP context ?. After doing some heavy testing I found that, although I was cleaning up inside the useLayoutEffect hook, the trigger wasn't being properly removed. useLayoutEffect(() => { const myTl = gsap.timeline({ scrollTrigger: { id: "trigger-id", // ... } // fancy effect return () => { ScrollTrigger.getById("trigger-id").kill(); myTl.kill(); } }, []); Cleanup done. I killed the trigger, then the timeline. (I have a question, though. Killing the timeline also kills the trigger, right?) Still, the error was there. Took me a while to figure out that the problem was happening with the trigger itself. Then I added: useLayoutEffect(() => { if (ScrollTrigger.getById("trigger-id")) { ScrollTrigger.getById("trigger-id").kill(); } // create timeline and its trigger // animation // cleanup (same as above) }, []); In the first render, if you try to .kill() the trigger you will get an error because you would be calling a method on something that doesn't exist. To bypass that I added an if that checks if the trigger exists or not. That solved the problem like magic. Everything works fine now. Since creating a trigger is something common when building a larger page, I created a helper function to shorten that. // import not from the library itself, // but from the file where you registered plugins // (as described in the docs) import { gsap, ScrollTrigger } from "./utils/gsapRegs"; const cleanTrigger = (config) => { if (ScrollTrigger.getById(config.scrollTrigger.id)) { ScrollTrigger.getById(config.scrollTrigger.id).kill(); } const tl = gsap.timeline(config); return tl; } export default cleanTrigger; So with that function, whenever you need to create a timeline that will work with ScrollTrigger, you call the cleanTrigger function and pass to it the object that you would pass to gsap.timeline(). The function first extracts the trigger id from the payload uses it to kill the trigger, if it exists. You get back a timeline with a "safe" trigger that you can use normally. Be careful, though, you still need to .kill() the timeline in the return function. So... // instead of const myTl = gsap.timeline({ scrollTrigger: { // ... }, }) // use const mySafeTl = cleanTrigger({ scrollTrigger: { /... }, }) That is the solution I came up with and any and all feedback is greatly appreciated. It is possible, if not probable, that I went through all this trouble because I missed something in the docs (or forums), but it's what ended up helping me. I have one question: do I have to kill the trigger as well or just the timeline? Also, is there a better solution for this issue? That's pretty much it. I hope that this helps someone that's going through the same problem either by being a solution or by being an opportunity to highlight this to distracted people like me. Thanks in advance! ?

Thank you so much @Rodrigo. It worked perfectly! It also helped with visual glitches that happened every now and then.

First of all, you people from GreenSock are simply out of this world. GSAP made me fall in love with front end again. Thank you very much! My question is not about a specific edge case, it's a little bit generic. I remade my portfolio (https://lucaslamonier.com/) with GSAP and went crazy with it. The page ended up being a bunch of experiments of random techniques and visuals. Just like I intended ? A couple of sections were pinned with ScrollTrigger. The whole section which had a height of 100vh. It works nice on desktop, but there is an issue on mobile that sometimes can hinder UX. At least on Chrome, when the user scrolls up the URL bar appears, which changes the viewport height and causes everything to re-calculate and sometimes makes the scroll position to change. This is particularly problematic on a section that shows a side-by-side comparison of different images, where part of the experience is scrolling up and down. Shout out to the codepen of the before/after images. What I am after is some advice for best practices when pinning whole sections and/or maybe some resources on that. I work with React and considered making completely different components for mobile that have animations that are not pinning-related. Thanks in advance!