Leaderboard

Hey Refinery! You are just overthinking it a bit. All you need is the following: gsap.from(".list__item", { opacity: 0, duration: 0.5, x: 50, stagger: 0.5 }); What you are doing in your code is creating an individual Tween for each of the list items, not a timeline that contains all the items. As each tween is independent and only contains one item, there is nothing to stagger and they all paly at the same time.

@kabocreative we love when "newbies" like you jump in and offer some ideas. That's exactly how you'll be come an expert! And it always makes the community richer and more well-rounded when a diversity of people contribute, even if the answers aren't "perfect". So keep it up! ? If I understood correctly, it should be as simple as a .fromTo() that goes from xPercent: 100 to xPercent: -100: https://codepen.io/GreenSock/pen/wvmdZye?editors=0010 Is that what you're looking for @Vineeth Achari?

I think you mean you'd like it to start off screen? If yes: https://codepen.io/kabocreative/pen/poLPBra I added: gsap.set(".typography-headline-hero", { xPercent: 100, }); I'm a newbie to GSAP, so others might have greater ideas!

I can vouch for Jack here, Cassie. I've checked with him about this very thing and approved the post.

Hey everyone! I've been working on a fun demo project called TweenPages to show how I do complex page transitions with GSAP in Next.js. I haven't shared it yet with anyone publicly until now. Would love to get some early feedback. Especially on the docs where I go into detail on the code side of things. Am I doing it right? Am I doing it wrong? Are there things I can improve? Fun! - https://tweenpages.vercel.app/ Docs - https://tweenpages.vercel.app/docs Code - https://github.com/johnpolacek/TweenPages Hope the project helps anyone who want to do GSAP animations like these on Next.js.

No question. Just wanted to share something I worked on today. I regularly see this effect used on awwwards sites and wanted to try my hand at it. I don't recommend using it a lot on a single page since it isn't optimized. Feedback welcome.

I haven’t used it in awhile but see if getRelativePosition() can help https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.getRelativePosition

Hi Cahrlyta, You're adding the great blank space yourself with the following JS in your code: function setHeight() { height = container.clientHeight document.body.style.height = height + "px" // <- This bit here. } I don't know why you are adding it or what is the effect you are after but that's what is causing the big white space. A tip for the future, try to simplify your code all the way to the bare minimum possible when trying to work things out. In this sample of yours, you have far more code, HTML, CSS and JS needed to illustrate your issue. I bet if you stripped it down yourself, you would have worked out what was going on.

Okie dokes! Thanks for dropping by to help then Jack!

You have an error of This isn't a GSAP error https://stackoverflow.com/questions/22430671/javascript-failed-to-execute-drawimage

Hi Sarmad! If I understood you correctly, you wondered how to put GSAP animation to some online course. Fortunately for you there are many ways. If you are working with PPT, so maybe this article will help you https://www.ispringsolutions.com/blog/elearning-examples . If it helped you - great! If not, could you please ask your question differently?

Thank you so much for the help Jack. I have a lot to learn.

You have it set up so that every time you click, the timeline is recreated. Since you are using .to, all the animation values are relative from the time of creation. The first time you click the toggle, it opens the legend because it's going from an invisible state to a visible one. The next time you click the toggle, it recreates the timeline. It looks at the properties on the legend, says "we need to go TO that" but it is already there. So when you reverse it, you are just going to the current values. You have to create your timelines outside of the event that reverses it or use .fromTo tweens. The former is probably better than the latter.

Explanation I was under the wrong impression that If I passed a selector into the hitTest then it would do the hit test against every element that fit the selector. In which case I dont neccesarily have the element when I execute the hitTest() I just have a selector which might fit many diffirent elements and I want to return the element of that selector that was actually hit. Anyway, I realize now that this is not actually how the hitTest() works and Ive finished my solution. Thanks for your help. Your suggestions where very helpfull for much of my experimentation. Issue Resolved I experimented with a lot of diffirent ways of doing it using the liveSnap property. But nothing quite did all the things I wanted with the flexibility I was looking for. Instead I ended up bringing in the flip plugin and just using that to create my own snapping to complement the draggable plugin. Which turned out to be the perfect solution. I have a ton of flexibility now. Record For the record, in case anyone else is trying to do something similar ill post another codepen with the approach I came up with for my solution. https://codepen.io/carelesscourage/pen/VwXbLRx The Code My real source code is doing all this in Nuxt 3 which has do do some extra juggling because of SSR. Heres how I did it in Nuxt 3 if anyone is spesifically dealing with that approach. Also, for the record, the below code will only work in Nuxt 3 if you transpile GSAP. Otherwise you have to import the gsap dependecies using require() inside the process.client check. Heres the Nuxt 3 docs to explain how to transpile dependencies: docs <script setup> import { gsap } from "gsap" import { Flip } from "gsap/Flip"; import { Draggable } from "gsap/Draggable"; const fragElement = ref(null) let zones = [] let fragRect = null let draggable = null onMounted(() => { if(process.client) { gsap.registerPlugin(Flip, Draggable); zones = document.querySelectorAll('[data-dropzone]') fragRect = fragElement.value.getBoundingClientRect() draggable = new Draggable(fragElement.value, { onDrag: onDrag, onRelease: onRelease, }) } }) function zoneHit(el, {hit, mis = () => {}, dud = () => {}}) { let noHit = true function onHit(zone) { noHit = false hit(zone, el) } zones.forEach((zone) => { el.hitTest(zone) ? onHit(zone) : mis(zone, el) }) noHit && dud(el) } function landHit(zone, el) { zone.classList.remove("drag-hit"); zone.classList.add("land-hit"); Flip.fit(el.target, zone, { duration: 0.1, }); } function landMis(zone, el) { zone.classList.remove("drag-hit"); zone.classList.remove("land-hit"); } function onDrag(e) { fragElement.value.classList.add("drag") zoneHit(this, { hit: (zone) => zone.classList.add("drag-hit"), mis: (zone) => zone.classList.remove("drag-hit") }) } function onRelease(e) { fragElement.value.classList.remove("drag") zoneHit(this, { hit: landHit, mis: landMis, dud: () => gsap.to(this.target, {duration: 0.5, x:0, y:0}) }) } </script> <template> <div ref="fragElement" class="frag u-panel" > <slot></slot> </div> </template> <style lang="scss" scoped> .frag { background-color: var(--background); padding: var(--space-familiar); border: solid 3px red; transition: all none !important; transition: max-width 0.4s !important; max-width: 700px; } </style>

It's really up to you based on the effect you want, but my guess is that multiple single paths might be easier to work with. Performance likely has absolutely nothing to do with the plugin - I'd estimate that 99%+ of the CPU load comes from browser rendering (not GSAP setting the values). So the key when working with SVG is to minimize the amount of pixels that must be repainted (small display bounding box) and fewer paths overall. Think of it this way: the browser has to do math to dynamically fabricate all the pixels for each path, so you want to minimize its workload. I've seen people scale a simple SVG to be like 5000px + in each direction, animate it, and then wonder why the browser struggles to keep up. That's a lot of pixels to ask the browser to repaint 60 times per second. See what I mean?

I think maybe you were missing a little part of my last post- you can run conditional logic inside the batch So you can handle how the animation happens for each element. Does this help? https://codepen.io/GreenSock/pen/zYWoyyK?editors=1011

Ah, yeah. I assumed there was a bug causing an issue. This is actually *mega cool* I had no idea GSAP could animate gradients this simply. In my head they were a binary background property that couldn't be animated and I assumed we'd need some extra assistance with them BUT look, it's just animating like pure magic! Here - very simplified pen to show you (this is what we mean when we ask for a reduced test case.) Simplified code makes it a lot easier to work out what's going on. https://codepen.io/cassie-codes/pen/a565a64ed971eadafd29a4c932ae9d05?editors=1010

I need to install the bonus packages with yarn. Npm seems to work but yarn, it just hangs. Any idea how I can resolve this?