Leaderboard

yeah maybe that's just faster, I keep playing with it, thanks I'll refactor everything over here and in case I can't fix the hooks problem I can open another topic That's all I appreciate your help!

Is this something you still want help with? If so, can you be very specific about what the current demo isn't doing that you want it to do? I read your description a few times and it's still very fuzzy to me. If you want the snapping to be faster, you can define a duration in the snap object. It's almost impossible to troubleshoot that without seeing it reproduced in a demo. I'm not sure what could be causing that error in your project unless maybe React wasn't defined or something. 🤷‍♂️

I'm not sure what you mean by "not smooth scroll", but the problem with the snap position in your demo was that you didn't set ease: "none" on your animation, thus there was move movement at the beginning than the end due to "power1.out" being the default ease. And I'd strongly recommend using the useGSAP() hook for React: https://stackblitz.com/edit/gsap-react-basic-f48716-e9uf9f?file=src%2FApp.js Hopefully that gets you going in the right direction.

Welcome to the forums, @Arkaprava101 Is this what you're trying to do?: https://codepen.io/GreenSock/pen/VwNYLXP

I didn't get the email. I did a search for Barsotti in my emails and didn't see it. I feel like I would have noticed and remembered if you sent me an email. It's possible that I was maybe too stressed at some point that I could have overlooked it. I'm going to message you now and ask for your email to search through my gmail.

Hi, If I understand correctly, just pin the parent element for both boxes: const timeline = gsap.timeline({ scrollTrigger: { trigger: ".div-2", markers: true, start: "top 20%", end: "bottom 20%" , pin: ".parent-div", scrub: 0.2 } }); Here is a fork of your demo: https://codepen.io/GreenSock/pen/JjVjgYa Hopefully this helps. Happy Tweening!

Most fonts have different widths for each character, which will cause the text to change widths as the characters change. A Monospace typeface will is the easiest fix for this: most font libraries have a filter for this if you need something more custom, but you can use your system's default by this to your CSS: font-family: monospace;

Perfect, thanks a lot for all your help!

hi @AmanVerma in your demo i would recommend using a loop and animating on Ypercent instead of y it will be easier also take a good look at this post by @mvaneijgen to get a good understanding of how stacking works another great demos https://codepen.io/ahmed-attia/pen/jOROjzb?editors=1010 also you can load gsap from here not in the HTML or just fork this one https://codepen.io/GreenSock/pen/aYYOdN?editors=1010

OK so the solution was easy Just refresh all triggers before the page leaves swup.hooks.on("visit:start", () => { ScrollTrigger.getAll().forEach((t) => t.kill(false)); ScrollTrigger.refresh(); });

Fantastic answer ! I was facing an issue when animating with cilp path where i get no transition. It was because of my 0 values not having a unit, added a % sign to all my 0 values made it work !! Thank you !

Thank you very much @mvaneijgen! Sometimes to find the appropriate resource as a starting point is the hardest part. Your example is very easy to understand.

Hi, The best course of action right now is to use React Transition Group as shown in this demo: https://stackblitz.com/edit/nextjs-13cw4u?file=Layouts%2FLayout.js,components%2FTransition.js,context%2FTransitionContext.js Due to the way this works, there is no need for the useGSAP hook in the transition component since those are one off animations that will be elegible for garbage collection after they're completed. Is necessary to point out that you have to use the pages router for this approach (animating in and out each page) since this is not possible with the app router regardless of the animation solution you use (Transition Group with either GSAP or CSS, Framer, etc). This is a known issue that hasn't been resolved in over a year by the Next team, nothing to do with GSAP, Framer or other libraries: https://github.com/vercel/next.js/discussions/42658 Here you can find a way to create overlay transitions (the pages are not animated, just an overlay animates over the layout) with GSAP using the app router: https://medium.com/@josiah.webdev/page-transitions-with-gsap-next-js-app-router-5508cee43a80 Finally you can stick with the pages router for simple static websites if you want to use the other way, there is nothing essentially wrong in using the pages router IMHO. Hopefully this helps. Happy Tweening!

Yeah, it would make far more sense to have the script before the closing body tag rather than in the head tag, give that a try and let us know how it goes. Happy Tweening!

Wild! This is new. I'll see if any of my SEO friends know what's going on here or can advise a way for me to do some tests.

That's really odd, google should be looking into your site on the server, before the JS is executed and SplitText did it's job, unless you're storing a pre-rendered version of your site in the server in that case google is doing what's supposed to. Other than run SplitText's code in the client and upload a version without it to the server I can't think of something else, unless google is actually creating a fully rendered site that is also executing the JS scripts when is crawling through it. I'm far from being an SEO expert so beyond this I can't really tell you , maybe this post by @Cassie can help: Happy Tweening!

Hi @davidsantas I've seen this demo before, but I don't know where it is from or why it was made. I would personally animate this with a css clip-path, much more performant than updating the height of an element. Below an example coming from my post how to make any card stacking effect which walks you through the process of how to create such effects and what is the logic behind it. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/GReQYBr

Yes, we use Google fonts with their font loader script to avoid FOUT. I hate my answer to the next question but my manager will not allow me to share (I don't think he understands that browsers have a 'view source' feature.) - I can outline our approach We link our Google Campaign Manager and Google Studio files to the Greensock cdn to get the base animation library, membership extra files (well worth the membership fee, plus you support the developers) need to be added like any other JS file. We also link to the Google fonts. By linking to these services, Google Ad Server doesn't count the weight of Greensock (base) or Google fonts against our total KBs allowed. We basically build what we think is going to be the heaviest banner first. If we have any issues with file weight, animation timing, etc. then we know early. Once the Creative and Account team review and approve the initial build we create the resizes by just copying that folder and making adjustments to the layout, if we build the animation correctly then 95+% of the time we don't even need to touch the JavaScript. We use gsap timelines for all of our animation, only occasionally needing to call a second timeline for animation that spans multiple key frames. We use the Chrome plugin called "Perfect Pixel" to match up the layout of each keyframe to the artwork provided (our developers do NOT design) We meet with the creative team to write up animation notes and confirm that we're under the maximum allowed time. I looked at creating responsive banners but we had too many issues, we ended up building one set of files for each banner dimension but since we can usually use the animation in each size without having to touch anything (gsap for the win!) it's working very well for us. I'm sorry I can't provide one of our templates if I had my way I would gladly do so, also because I'm sure you might come back to me with a suggestion for improvements but if I want to keep my jerb...