Leaderboard

Also, Cassie's suggestion makes it even simpler: https://codepen.io/GreenSock/pen/poZMjOR?editors=0010 But if you don't really need Flip plugin elsewhere, you can save yourself the kb and just go with one of the manual solutions above.

Cool effect! Here's one other option that uses transforms instead of top/left (I just always prefer transforms since they don't affect layout/reflow and they can handle sub-pixel rendering): https://codepen.io/GreenSock/pen/ZEjgbRy?editors=0110 But in this case it probably doesn't matter much if you use top/left. Note that I had to switch the display to inline-block instead of inline because browsers won't render transforms on inline elements. No need to do two different .set() calls either Does that help?

Hello Piet. That is because you have a click event listener on the parent, that tells the timeline to play - you can check in your example by putting a console.log on that parent's eventListener, and you will see, that the parents' function will be called, too, when you click your .closer: https://codepen.io/akapowl/pen/gOjVaPZ So basically you are giving contradicting instructions on clicking your .closer. The best would be to just put the eventListener to play your timeline on a different element (like maybe the header).

Hi there. If all you want is for the position of the red text to fit the position of the blue text, in you case you might be better off with offsetLeft/offsetTop instead of getBoundingClientRect(). https://codepen.io/akapowl/pen/qByedvj

Is this what you're trying to do?: https://codepen.io/GreenSock/pen/BaPXzYB?editors=1010

If I recall correctly, ScrollTrigger's snapping never worked with locomotive-scroll due to locomotive-scroll's method to 'set' its scroll-position - and that doesn't seem to have changed even with the latest version(s) of locomotive-scroll, although they changed that method a bit. Just another good reason for ScrollSmoother. [It works fine in the preview, since locomotive-scroll reverts back to native browser-scrolling at certain window widths, but once the smooth-scrolling is active (on wider windows), it won't work anymore] https://codepen.io/akapowl/pen/mdjNeqo

Hi. It sounds like you are looking for gsap.matchMedia() the docs have an excellent video and a bunch of examples to get you on your way.

Ah I understand what you mean now. Here are two examples. I was thinking of making another where you add two timelines to each other and make them one of them the duration of the first, so that you don't have to know what the duration of the second timeline is to make them in sync, but I need to think of it some more, but your first solution seems solid. https://codepen.io/mvaneijgen/pen/eYjwqEL?editors=1011

That's because you're circumventing the ease by just using an onUpdate that is directly setting the value based on the tween's progress() which is linear. Are you trying to do something more like this (much simpler)?: https://codepen.io/GreenSock/pen/rNrEddY?editors=1010

This totally fixed my issue!! Thank you!!

Outstanding - you guys are the best. Can I mark each one as solution??? Thank you again so much!

Thank you! Your prompt response, as always, helped to fix the issue. Working pen enclosed. Thanks again! https://codepen.io/evryali/pen/WNKVvgm

Hi there, this looks like an issue between locomotive scroll and GSAP We have our own smooth scroll plugin ScrollSmoother - which we recommend, it avoids compatibility mismatches like this. Your code is working a ok if we remove locomotive. https://codepen.io/GreenSock/pen/ExpqjNj?editors=0010 Maybe you could reach out to the folks that at locomotive for help? https://github.com/locomotivemtl/locomotive-scroll

Ah ok gotcha! I don't have time to dig into this now but maybe someone else will, that's a clearer explanation, thanks! If no one helps I'll jump back in when I'm back at my desk

Ha ha ha! Come on. Count on it! Chocolate con churros Thanks!

Heya mate! Sorry could you give this another go at explaining? What are you trying to do with the red dot? Position it over the blue word? (I can't find the animation in the link you added) --- In terms of a curved path though, TIL! I didn't know you could pass in different eases with FLIP! But you can, look at this! https://codepen.io/GreenSock/pen/bGjXGeX/cc6a1577ab5d5ea8ab0722dc407a7929

Hi all, I just stumbled upon this exact "problem" with Nuxt 3.1.1, but I've been able to make it work only by omitting the `.client` part in the plugin file name. In my case, importing the SplitText and Draggable plugins made the entire application crash during development because at the very beginning the `window` object is still `undefined` (only on the first page load. instead, when navigating towards a page that used those plugins no errors were thrown). Maybe this will be helpful to others in the future ✌️ For reference 👇 // /plugins/gsap.js import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' import { Draggable } from 'gsap/Draggable' import { InertiaPlugin } from 'gsap/InertiaPlugin' import { Observer } from 'gsap/Observer' export default defineNuxtPlugin(() => { gsap.registerPlugin(Observer, ScrollTrigger, InertiaPlugin) if (process.client) { gsap.registerPlugin(Draggable) } return { provide: { gsap, Observer, ScrollTrigger, Draggable } } })

Yes that is one of the options, Personally I like to use the "<" position parameter, this means animate at the same time as the previous tween. This way it doesn't matter if you end up putting something at the start of the timeline in the future. All the tweens close to each other will start together. I highly recommend reading the position parameter post, there is much more info on there and just play around with all the possible features and see what they do. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/Yzjoomo?editors=0010

You've got a collapsing margin issue (CSS). It looks like you set a margin-top on the first child of the #smooth-content container, so it's throwing everything off and pushing the top of the container down. You can escape the collapsing margin by either setting a 1px transparent border-top on #smooth-content or do something like this: #smooth-content { padding-top: 1px; margin-top: -1px; } Does that clear things up?

I just made a quick function which allows me to update variables and pass a boolean to either run the “slow” easing-adjusting code or the faster code. Yea, I just changed top/left values in the CodePen for visualization. I mainly work with HTML5 canvases and need to change lots of object positions with GSAP. About the DynamicPropsPlugin, It's not really required right now. Might be a QoL thing, especially if it would have very good performance. But if its not available, that's perfectly fine and not a big deal. Thank you so much again for your help!

You probably won't notice any real-world difference, but the first one is technically cheaper performance-wise because you don't have to loop through all the properties to adjust for the easing. Plus the 2nd version (helper function) is technically tapping into private properties that might change in a future update. So unless you really NEED the easing adjustment of that 2nd solution, I'd definitely stick with the first. If you're concerned about performance, you definitely shouldn't be changing top/left values frequently like in your demo. Just use transforms (x/y). In almost every case that I've seen, performance problems have nothing to do with the GSAP code and everything to do with graphics rendering performance in the browser. So make sure you're obsessing about the right things No, but pretty much anything is possible to do with the current platform. I think it'd be much better for you to explain what you're trying to do from more of a macro level because sometimes I see people getting super caught up in the minutia of a very particular technical issue but their overall approach from an engineering standpoint needs an overhaul and if they did that, it'd greatly simplify or eliminate a lot of their challenges. Why do you feel the need to use DynamicPropsPlugin? Are your values constantly changing? Why? There may be an entirely different approach that'd end up being more performant and there'd be no need whatsoever for a DynamicPropsPlugin. If you can provide a super clear minimal demo illustrating the challenge you're facing, that'd be helpful. Just the most basic thing you can think of (a few colored <div> elements) is fine. Your earlier demos were great.

I think you replied before I edited my answer (I was in a rush, sorry) You just need to add tween.restart()

I just sent you a private message with instructions about where to get the unrestricted beta files. ✅

Hi @Masha555 and welcome to the GreenSock forums! Unfortunately the links you provided are broken. Please create a minimal demo in order to get a better idea of what you're struggling with. The simpler the demo, the better, just a few divs showing the issue. ScrollTrigger does has a refresh method but that runs when you resize the screen so the elements should be in their right position based on the animation's progress, considering the scroll position after the resize. Are you using the latest version of GSAP and ScrollTrigger? Also be sure to use the same version of the GSAP core and ScrollTrigger (currently 3.11.4). Happy Tweening!

Hi @miguelst, Basically you save yourself from importing the core files over and over in your Vue files, that's it. Of course the plugin could be enhanced in order to simplify other tasks but the main benefit will always be the same, not importing the core and the plugins you use and registering those plugins. Maybe create some low level API for some recurrent tasks and such things. I understand that a new GSAP Module is in the plans of the Nuxt team with Nuxt3. Happy Tweening!

Hiya! Can you make it break on this version? https://cdpn.io/pen/debug/GRBbNMG

Just to update, here's what fixed everything for me: ScrollTrigger.normalizeScroll({ target: scroller, allowNestedScroll: true, type: "touch,scroll,pointer" }); I additionally excluded the normalizeScroll for wheel scroll actions with "type". Thanks for all the help again!

Alright, this was a fun challenge, so I forked your codepen and created this: https://codepen.io/GreenSock/pen/LomEvN?editors=0010 If I understood your goal, it covers all the bases. I wrote a function for you that you can just feed an array of URLs into and it'll distribute them around the edge of the circle evenly, and counter-rotate them. I wired up the Draggable so that its rotation simply updates the main timeline that's doing the circle and image rotations, so it's very performant (no need to keep re-creating tweens or setting new values each time). I even made the original spin resume after the throw completes, but it gradually speeds up to normal over the course of a second (so that it wasn't jarring). Fun! Does that help?