katerlouis

I am terribly sorry, the installation docs mention server side rendering and nuxt explicitly .. So the suggestion is to only register the plugins on the client using `process.client` but import the necessary scripts "as usual". That makes sense to me now. I'm still wondering why this hasn't been a problem up to here; I haven't encountered this issue yet and have always registered right after import (apparently on server side?) And what exactly happens when I "transpile" gsap? Would I still need to add the "process.client" conditional?

Thanks for the quick reply! The thread you linked comes to the same conclusion as I have, importing UMD modules, right? But as for the error `doucment is not defined` – importing Flip on client side would result in a big delay, right?! How could you even import with conditionals? That sounds sketchy to me And how would transpiling GSAP solve the the document issue? Could you explain the two options a bit deeper, please? EDIT: To be clear, I do not use Flip yet– all I'm doing is registering it, which already results in the error.

Heyho partypeople, I don't know how to recreate this issue with CodePen, since I'm using Nuxt. And adding my gsap-bonus files to codesandbox also doesn't look like a good idea ? So I'll have to go the old fashioned way: I'm making a Nuxt (VueJS) app and have gsap bonus (shockingly green) installed as suggested: `$ npm install ./gsap-bonus.tgz`. In my simple test page component `src/pages/portal.vue` I install Flip like any other plugin: ```js <script> import { gsap } from 'gsap'; import { Flip } from 'gsap/dist/Flip'; gsap.registerPlugin(Flip); export default { // Vue magic here ``` When I navigate client side from `/` to `/portal`, it works as expected. But when I hard refresh on `/portal` I get a breaking error saying: document is not defined – Apparently the issue is caused by this: Flip.register = function register(core) { gsap = core; _setDoc(document.body); _toArray = gsap.utils.toArray; _closestTenth = gsap.utils.snap(0.1); }; I've already tried installing plugins by importing the ES modules instead of UMD modules, which works on client side navigation, but again not on hard refresh. Then I get: Cannot use import statement outside a module Why is Flip dependent on `document` during import? And how would you suggest getting Flip to work with a Nuxt component? Thanks!

Thanks! Feared so. What is `overwrite: 'auto'` doing in your scrollTween? Also thanks for the idea of killing the tween when `wheel` event is triggered.

Heyho partypeople, Long time no read I got another issue Blake is probably already preparing a solution for while I'm typing is. I feel like he has a 9th sense for this. Anyhow: We want to avoid using swiper or any other heavy library for our simple carousel use case. Scroll-Snap + GSAP should be enough. But, but .. but? When animating the scroll position with gsap in a snap-scroll scenario, it seems to not animate smoothly, but rather "flash" in steps. Question 1: Why is that happening? ScrollToPlugin bug or intended behavior / acceptable caveat? Question 2: How would you suggest to animate to the "next page" programatically? (I explored removing scroll-snap when gsap is animating, but felt this isn't too elegant and resulted in flashes once the scroll-snap was set again) Thrilled for your answers René ❤️

Hey @OSUblake, how does your solution (without quickSetter) differ from mine? I also use a "proxy", which in my case is the Vue data object, and on every change I gsap.set the `drawSVG`-prop accordingly. My concerns with this solution lie in: – how often is the "watch" triggered in Vue? Will the animation always be smooth? – Technically this proxy solution `gsap.set`s twice as much. Could that have impact on performance?

I will have to look into `quickSetter` first, I guess

Crazy– the "proxy part" is kinda what I'm doing, right? Just not tied so tightly to gsap Never seen quickSetter before; the return of `self` and especially the early return of `self` inside `start` and `end` functions is a mistery to me. And what is `arguments.length` – I don't see it declared anywhere. If you find the time I'd appreciate a more in depth rundown of whats going on there. Feels like I'm close to getting a new item– you know, like in Rogue-likes, where you finally get the High jump boots and can't wait to backtrack to all the places where you bashed your head against the wall for hours thinking "this must be possible!" – Nerdtalk over

It's hard to imagine that it would be that much more code to accept an object to set start and endpoint ? Uh, the helper funciton looks really helpful! But ultimately blending results in a single ease. I'm quite sure for this effect to work, the start- and endpoint need to be tweened separately.

Your solution is waaay smaller in code, I like that! But unfortunately the animation feels very different. Although my easings aren't perfect yet (the ease visualisers custom ease builder has it's limits, and my designer will give me a proper path tomorrow :D), it already feels much smoother and "organic" – I don't think you can achieve that without separate easings. You could also make random easings and timings for start and end point each rotation; you can go all sorts of crazy!

drawSVG: "0% 50%" is nice! But what if I want to separate easings for start and endpoint? See the codepen as an example for why this might be useful (with a workaround using vue). Maybe something like this could be implemented in the plugin: gsap.timeline({ repeat: -1 }) .set(elem, { drawSVG: "0% 0%" }) .to(elem, { ease: 'power1.out', drawSVG: { start: "100%", }, }, 0) .to(elem, { ease: 'power1.in', drawSVG: { end: "100%", }, }, 0)

I fricking luv it– except: there seems to be a copy&paste issue – 2 passages called `FAQ` with the first one talking about the GSDevtools. https://greensock.com/docs/v3/Plugins/ScrollToPlugin I hope you keep the typo/formatting styles of the "real FAQs" – find them more readable. As a designer, the typo spacings hurt my heart! The big headline `Frequently Asked Questions (FAQ)` has more spacing to the bottom than to the top; if the fix doesn't involve too much, I'd suggest flipping the values. Since I'm always complaining, I'd like to get constructive here. If there's a way I can help you with the styling / docs in general, I'd gladly do it!

@GreenSock @Carl @ZachSaucier

Thanks Blake! I'm gonna use this pattern What about changing the docs? Any thoughts on that?

Thanks for the in depth reply; Only thing bothering me now is: Can we reflect that suggestion (necessaty by now) more in the v3 docs? At the top of the ScrollToPlugin Docs page is a red box with "how to install", leading to the installation page, where plugin registration is only mentioned in one comment of a code example that doesn't deal with plugins primarily. So this change gets overlooked rather easily I'd say. My suggestion is: at the end of every plugin docs page, add the following paragraph (or something similar) And maybe also add a designated paragraph to the "Installation Page" for more clarity? What do you think? Register Plugin in bundler environments (like webpack, vue-cli or create-react-app) In order to prevent tree shaking to drop your plugins and satisfy the linting rule "no-unused-vars", you must explicitly register the plugin with gsap.registerPlugin(ScrollToPlugin, PixiPlugin, MotionPathPlugin) – see https://greensock.com/docs/v3/GSAP/gsap.registerPlugin()

You are right, with registerPlugin it works: https://codesandbox.io/s/gsap-v3-scrollto-working-with-registerplugin-ynirn Why does it work in GSAP v2 without registering? And why does logging `ScrollToPlugin` work then? (I'm not that familiar with tree shaking) The linter-rule "no-unused-vars" applies here aswell, so it makes sense that tree shaking drops it down the line. But why didn't GSAP v2 drop it? There is a docs article for registerPlugin, but I couldn't find any mentioning on the scrollToPlugin docs page. Wouldn't it make sense to add a link there aswell? Where would you suggest to put the `registerPlugin` function; would it be okay to do it on a component level, so that there will probably be multiple `registerPlugin`-assignments of `ScrollToPlugin`?

I get the following error when trying to scrollTo with GSAP v3.0.2: gsap-core.js?5806:3410 Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': parameter 1 ('options') is not an object. at PropTween._setterFunc [as set] (gsap-core.js?5806:3410) at PropTween._renderComplexString [as r] (gsap-core.js?5806:3447) at Tween.render (gsap-core.js?5806:3188) at _lazyRender (gsap-core.js?5806:187) at _lazySafeRender (gsap-core.js?5806:200) at updateRoot (gsap-core.js?5806:2563) at eval (gsap-core.js?5806:1212) at Array.forEach (<anonymous>) at _tick (gsap-core.js?5806:1211) I replicated the issue in a codesandbox: https://codesandbox.io/s/long-violet-etmz7 (also not working in the standalone app: https://etmz7.csb.app/) With v2 it is working in this codesandbox (and in my project): https://codesandbox.io/s/gsap-v2-scrollto-working-ugbhj (Weirdly, inside the sandbox it's not working, but when you look at the standalone app, it is working: https://ugbhj.csb.app/) Did I find a bug here?

Nice, I found a bug! Whoop Whoop! Out of curiosity. Could you share with us what went wrong there and what you did under the hood to fix it? (Not that I will understand more then 20% of it, if I'm lucky..)

https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin The docs don't reflect that clearProps clears the `style`-tag BEFORE the tween starts. https://codepen.io/katerlouis/pen/eYYbrKM as I understand Rodrigo, the box in this pen should clear the style tag before the second tween (y), which doesn't happen. In case this is because both tweens end up in transforms, I also added a change in background color to the first tween. But the background color also stays until the end of the second tween, where everything gets reset by `clearProps`. I guess either Rodrigo or me are wrong Can anybody confirm Rodrigos statement about clearProps? But yeah; it remains to be revealed why v3 behaves different. Thrilled to hear the Elders on that! PS: Linking to a pen via bookcode gets weird results

`overwrite: "auto"` didn't do the trick, unfortunately. I made 2 code sandboxes illustrating the issue. without issue https://codesandbox.io/s/gsap-v2-no-jump-bug-umw6x?fontsize=14 with issue https://codesandbox.io/s/gsap-v3-jump-bug-in-vue-3272l?fontsize=14 Interesting: when you remove `clearProps` from the v3 sandbox, the issue doesn't occur. So apparently I do not understand what clearProps is supposed to do or we really have gsap bug here. Nevertheless: even if the v3 sandbox illustrates the intended behavior, I'd argue this should be changed to the way it worked in v2. Thrilled to read if you disagree with that and why you made this change.

I'm confused The reason I use clearProps is not to set the initial value; I thought clearProps clears the properties AFTER the tween. I use it to clean the element of any unnecessary styles afterwards (in the style tag), so that it doesn't interfere with my "normal" css positioning etc. (I had responsive issues in the past) Again: I thought clearProps only does something AFTER the tween is completed. Anyhow: I thought the .from() syntax does what @Rodrigo describes under the hood, so I don't have to. I mean why else would .from() exist if it doesn't work like that? and it has/does in v2. Just to be clear: do you guys say the issue I showed in the video is supposed to happen like this under v3 or do you agree that this is a bug (be it from gsap v3 or my code)?

why is that? I really like the "old syntax"; I'm used to it, it's faster to type, easier to see at a glance what the duration is, etc. I will need to look into the `overwrite` solution; right now here in Germany shoulllld be sleeping time having to set where things are at the beginning of the timline would be really bothersome and be kind of a downgrade for me personally–

I have no issue with CSSPlugin being a "Core Plugin". My issue is the misleading navigation of this nested menu: You say "back to" with an arrow pointing back. When I click it you get me to a, for me, new position. This is not "back" for me. Another problem arises with calling CSSPlugin a "Core Plugin" only in the /v3/GSAP/CorePlugins/ route. To be more specific: I am here: https://greensock.com/docs/v3 I click on Plugins and get to here: https://greensock.com/docs/v3/Plugins, where "Back to" points to https://greensock.com/docs/v3, so that's correct I click on CSSPlugin and get to here https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin, where "Back to" (understandably) points to https://greensock.com/docs/v3/GSAP/CorePlugins, which is unfortunately not what the user/me expects. My suggestion: For more clarity what is going on in that route: Don't list ALL the plugins directly under /v3/Plugins, but divide again into "Core Plugins" and "Not Core Plugins" (Have fun finding a fitting name for that ;D) As for the problem "listing plugins in 2 different routes" (/v3/Plugins and /v3/GSAP/CorePlugins) I'd say copy the core plugins, so that "Back to" in /v3/Plugins/CSSPlugin (or maybe /v3/Plugins/CorePlugins/CSSPlugin) points to the "expected location" Phew– that's hard to explain with just words. I hope you understand what I mean

Sorry to bother you guys again; I just wanted to point out weird behavior in the docs tree with v3 docs. https://imgur.com/a/sUAiftP When you go from Home -> Plugins -> CSSPlugin, the back arrow shows "back to core plugins", but the plugins section never showed "Core Plugins". After going back to "Core Plugins", you can go back to "GSAP" where I also never was. I guess that's an easy fix for you guys; If you already knew about it, just delete this thread. Cheers

Sorry, I don't have the time to reproduce this in codepen; maybe it only happens in our dev environment. But fact is: We had no issue under gsap v2, with v3 we do have. I don't see what I've done wrong here. video of the bug with gsap 3 https://imgur.com/a/SV60XJJ probably trivial, but just to be sure: here how it's supposed to look (working with gsap 2) https://imgur.com/a/VGhSY4F simple vue template: <template> <transition @enter="enter" @leave="leave"> <div v-if="isOpen"> <div class="overlay" ref="overlay"></div> <div class="container" ref="container"> ... </div> </div> </transition> </template> with gsap 3: enter(el, done) { return gsap.timeline({ onComplete: done }) .from(this.$refs.container, this.enterDuration, { xPercent: 100, ease: 'power3', clearProps: 'all', }, 0) .from(this.$refs.overlay, this.enterDuration, { opacity: 0, clearProps: 'all', }, 0); }, with gsap 2: enter(el, done) { return new TimelineMax({ onComplete: done }) .from(this.$refs.container, this.enterDuration, { xPercent: 100, ease: Power3.easeOut, clearProps: 'all', }, 0) .from(this.$refs.overlay, this.enterDuration, { opacity: 0, clearProps: 'all', }, 0); }, Thrilled to hear what you think. Until there's a solution for that I sadly have to revert to v2 ? Thanks!