flowen

There's something for everything in gsap~~

so I know there's element._gsap.rotation for example. But it returns a string like '1.234deg'. Is there an easier way to 'get' inline styles (set previously by gsap). why: I've set random rotations on click, want to turn rotation back to 0 I can't seem to find anything in the documentation (was expecting to see it @ CSSpluggin) thx!

ahh ok I see! Really thought I would improve everything by having a single path to draw vs small pieces. Thanks for explaining!

Thanks for sharing the solution and how you got there. It's been a while, but it was like this: Drew the shape in illustrator. Imported the svg into figma There I flattened the paths to a single vector and exported from here

for some reason, the outline of the logo has to have a very high duration for it to properly animate the svg path. How can I fix this? .from('#logo-stroke', { duration: 12, drawSVG: 0 }, 'start')

const debugMultiplier = 1; gsap.defaults({ ease: 'power2.in', duration: 1 * debugMultiplier, }); ?‍♂️ edit: where did the delete forum-post function go? Obviously this wouldnt work with any animations with a different duration than default

so.. a technique that's quite common for debugging is just multiplying the animations duration to slow down the animation and debug it that way. Now with es6 imports/exports and having different animations in different files, it can be a bit annoying to manage these variables. I was wondering if there's perhaps an internal variable to multiply durations. Otherwise would suggest to add one to the gsap.defaults() function which simply multiplies the duration.

heya dear greensocks ? Look at my beautiful prototype image: So I was thinking of making an image gallery where the front (current) image loops to the back of the gallery and the other images move forwards. While looping through this, the active image will enlarge a bit (forgot to include that in my amazing prototype) and when it loops back, becomes smaller. To give a simulation of depth. Now I'm also thinking in terms of performance of course. The stacking order of images could probably hinder performance as they'll cause a lot of composite layers (may be using the wrong terminology here). I wonder if webgl is necessary perhaps. Technically I'm struggling how to do create this loop. I'm thinking of using a virtual scroll, track the y-value and update the progress. Perhaps this could be done with a gsap timeline that receives the progress variable in .totalProgress(). Then there's the animation itself, would probably be done best with a bezier curve I assume. I wonder if anyone made something similar and can perhaps give me some pointers if this is feasible or if it's gonna be really hard to be executed. Or some feedback from a design perspective whether this is something that looks great in my mind but really ugly in the browser thx for reading!

ok was a bit too quick.. I had a .yarnrc with `registry "https://npm.greensock.com/"` in it. Kinda forgot why, might have to do with previous problems I had when I was trying to download the licensed packages from the greensock registry

Trying to install virtual-scroll package, was really surprised to see that it was trying to fetch it from greensock.com instead of npm. What could I do to fix this? yarn add virtual-scroll master ✭ yarn add v1.22.5 warning package.json: No license field [1/4] ? Resolving packages... [2/4] ? Fetching packages... error An unexpected error occurred: "https://npm.greensock.com/virtual-scroll/-/virtual-scroll-2.1.0.tgz: Request failed \"500 Internal Server Error\"".

uninstalled the .tgz, installed using the instructions, works perfectly!

no worries at all. thanks for creating such a great product

ah! Interesting too know. Coincidentally, I also use Nuxt 2 on this project so another reason for me to keep using Yarn. I've personally never had problems with either npm or yarn, but perhaps I'm not enough of a power-user I suppose in the meantime the best way to use gsap3+bonus tools is to install locally, right?

for me its: yarn upgrade-interactive --latest that's it honestly I don't do much with these tools apart from just installing and upgrading. @ZachSaucier which makes me curious! what other uses do you use npm for and what other features are important for you?

same problem for me. Before it worked fine. - i've tried empty'ing ~/.npmrc then reload and add back my token - I've added a new .npmrc in my project with the token neither worked.

oh nice! wow, great find, thank you so much! What made you look at the kill method? ?

Thanks Paul for having a look, really appreciate! Tonight I will have a closer look at the smoothscroll's API and see if that offers a solution. I quickly checked your fork and noticed that when you scroll down (on home) and then click on contact, the model still slightly resets before it transitions to the next page. Not as much as before but it still does unfortunately. So perhaps there is still something that related to scrolltrigger?

Little bump with update in the main post

ups! you're right, I updated the url. Thanks!

CodeSandbox It's quite a bit of code, but let me guide you. I'm quite sure I located the code that's causing the problem(s). I'm just not sure how to fix it. Problem When browsing between pages, the model's position and rotation values start from (or reset) to a different value. When I remove the timelines from the file (described below), it all works properly. So my hunch is I'm doing something wrong regarding the creation of timelines/scrolltriggers or perhaps the removal of them. Perhaps the timeline get's stuck somewhere or scrolltrigger thinks it's being scrolled to the top perhaps? home/createScrollTriggers.js Here I create a timeline with a scrolltrigger for the index/home page. Created dynamically based on html data attributes. Update: What I tried: I tried moving the timeline to the highwayjs renderer. I tried removing the dynamic creation of the timelines. I tried using scrollTrigger.create() methods vs a timeline. None of it worked and I still have no clue why the values keep reseting. I'm also not sure how to trace where things are going wrong. I'm so stuck on this. I have no clue what I can try ?

@GreenSock thanks for that debug snippet! so useful, will save this for future use Thanks for explaining, this makes a lot of sense. I've been able to fix the overlapping problems by adjusting the end props and using the visual markers to do so. This snippet helped a lot (besides the visual markers). Thanks!

@ZachSaucier I've simplified the example right here I still face the exact same issue. While scrolling up a lot of tweens are kinda skipped..

ah I understand. Is it okay if I refer you to the code instead? Controller.js init() r74-75 a gsap.set for initial settings intro() r88 intro animation createScrollTriggers() r155 here I create a timeline based on the `data-scroll-trigger` attributes in the index.html So I loop through each attr and based on the data-name add to the timeline that contains the scrolltriggers. If this isn't clear I don't mind creating a new one at all ✌️

? codesandbox Having some fun over the week with this little threejs+scrolltrigger Unfortunately when ya scroll back up a few animations are skipped. I tried replacing the .to()'s with .fromto()'s but they had no effect. Any other suggestions? thanks guys!

? See the code here What am I doing wrong here? I basically took the code from the codepen example form the docs the _toArray is a reference to gsap.utils.toArray but not sure how that could help me . also I was wondering about the following: why in the example codepen is there a variable totalScroll to calculate the scrollHeight? It's only set on 'load' but never set again after. Still even though I resize the screen it works perfectly.. Magic ?