flowen
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by flowen
-
-
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!
- 2
-
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
-
-
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!
- 1
-
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
- 1
-
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\"". -
1 hour ago, ZachSaucier said:
We believe that this issue should be fixed now. Can you all please try uninstalling GSAP then installing it via the private npm registry as specified in the installation instructions?
uninstalled the .tgz, installed using the instructions, works perfectly!
- 2
- 1
-
14 hours ago, ZachSaucier said:
Yes, via the .tgz in your user downloads. Sorry for the trouble.
no worries at all. thanks for creating such a great product
-
18 minutes ago, ZachSaucier said:
I haven't really used either much but I have had to help more people with Yarn-related issues in these forums so that's a big negative Looking at Yarn's GitHub repo and seeing almost 2,000 open issues is also a big red flag to me. Yarn also seems split over version 1 and 2. Plus the documentation for both is lacking, at least for less-common use cases.
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?
- 1
-
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.
- 1
-
4 hours ago, akapowl said:
Edit:
Actually just setting the killing to .kill(false) seems like the way better approach 😅
ScrollTrigger.getAll().forEach((trigger) => trigger.kill(false));
That prevents the animations from being reverted:
To prevent the animation from being reverted when it is killed, simply pass false as the parameter. For example ST.kill(false).
https://greensock.com/docs/v3/Plugins/ScrollTrigger/kill()
oh nice! wow, great find, thank you so much!
What made you look at the kill method? 😁
-
2 hours ago, akapowl said:
Hey @flowen
If you rip out everything that is related to the smooth-scroll library that you are using, you will notice that it works as intended.
So it probably is an issue related to that and not to ScrollTrigger.
https://codesandbox.io/s/magical-cherry-czdy9?file=/smoothscroll.js
My guees would be, that the .disable functionality of that library is maybe not enough, and the instance would have to be completely destroyed and re-initiated instead when transitioning - but that is just a wild guess, because I don't know a thing about that library.
Hope this helps somewhat, though.
Cheers.
Paul
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
-
40 minutes ago, akapowl said:
Hey @flowen
Did you maybe link to the wrong CodeSandbox?
Because I can not make out anything about ScrollTrigger or page transitions/switching pages in the demo you linked to.
ups! you're right, I updated the url. Thanks!
-
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!
- 1
-
I've simplified the example right here
I still face the exact same issue. While scrolling up a lot of tweens are kinda skipped..
-
15 hours ago, ZachSaucier said:
Hey flowen. You've got quite a bit going on in that sandbox. Can you please try to strip out everything that's not related to your question?
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 ✌️
-
👇
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!
-
👇
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 🤘See the Pen PoZRwPW?editors=0010 by ashthornton (@ashthornton) on CodePen
how to get current applied (inline) styles set by gsap
in GSAP
Posted
There's something for everything in gsap~~