ngc7293
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by ngc7293
-
-
2 hours ago, OSUblake said:
You can use the touch-action CSS property to control stuff like that, but I'm not sure exactly sure if that's what you're looking for.
I need to set preventdefault to true to ensure that the picture will not be dragged away by the default behavior on the PC, but on the mobile phone, the page cannot scroll because of this setting.
I revised the case and hope it can express my problem clearly.
-
19 minutes ago, OSUblake said:
Hi ngc,
I'm not exactly sure what you mean here. What exactly are you trying to do?
The function I want to implement is similar to the "allownateuchscrolling" property of the Draggable plug-in.
-
On 4/3/2022 at 5:39 AM, GreenSock said:
That's a good catch, @ngc7293. There was an event listener left on in that particular scenario (it'd only happen if you disable() WHILE dragging) but that should be resolved in the upcoming patch which you can preview at https://assets.codepen.io/16327/Observer.min.js
Better?
That 's great!
But when dragging, I want to allow native scrolling in the vertical direction and disable default events in the horizontal direction. What should I do?
-
Hi, this is the plug-in I want, but now I have some problems.
When I disable the plug-in during the drag process, it still runs, even if the mouse is released. You can see that the console is continuously outputting...
In fact, I want to realize the function of locking the axis, just like the Draggable, Or I can disable default events dynamically.
I hope I have made myself clear.
See the Pen jOLNLZE by xf-ngc7293 (@xf-ngc7293) on CodePen
-
1 minute ago, mvaneijgen said:
The beauty of GSAP is that you can build with it what ever your hearth desires. I've build a carousel with GSAP I'm really happy with, because I can extent it with animations if needed.
Here is a basic version
and here a more elaborate version
Thank you for sharing. I just look forward to GSAP. Thank you very much.
-
I'm looking forward to GSAP Carousel/Slider. I don't know if you have this plan?
The best carousel plug-in I've ever used is "jQuery carouFredSel", but this project has disappeared for a long time.
Such as slick and swiper are not perfect.
Do you really not have this plan?
-
1
-
-
3 hours ago, GreenSock said:
Very strange indeed, @ngc7293. Looks like an iOS Safari bug that's unrelated to GSAP. All you need to do is set a 3D transform of any kind on the ".section" element(s):
transform: translate3d(0,0,0);
And that fixes things. Again, this is unrelated to GSAP/Draggable - it's a very odd browser behavior.
Thank you very much for your help.
-
Hi, I have a problem.
In this case, I found it when I was using my iPhone's browser, dragging in the gray area cannot scroll the page.
This gray element is only used to represent the inoperable area. Deleting it will not solve this problem.
See the Pen zYdOKEZ by xf-ngc7293 (@xf-ngc7293) on CodePen
-
Thank you for your reply
-
hello,
When I use Draggable, it doesn't seem to automatically respond to container changes,It changes when I click on the content.
Click the resize button, and then click the content area to observe the change of the scroll bar.
I hope my poor English makes it clear, thanks.
See the Pen gOLpxKK by xf-ngc7293 (@xf-ngc7293) on CodePen
-
6 minutes ago, GreenSock said:
I wish I understood your question better. Please don't post in a foreign language (I translated it for you using Google Translate).
It seems to work exactly as I would expect:
When the trigger element leaves the viewport, the onLeave function is triggered. Am I missing something?
Sorry, it seems that it is difficult for me to describe my problem clearly, thanks for your reply -
23 minutes ago, GreenSock said:
I didn't quite understand your question. If you want to trigger a function when an element leaves the viewport, yes, that's easy:
ScrollTrigger.create({ trigger: ".element", onLeave: yourFunction });
Does that answer your question?
Sorry my english is poor.
I mean, when I set {start:'top 50%'}, when "onLeave" is triggered, "trigger" is in the viewport.
I hope that no matter what value is set for "start, end", "trigger" can trigger an event when leaving the viewport. I use this event to reset "trigger"
-
This is a long-awaited plugin, thanks gsap!
Just now I have a question, can the plugin add an event to ensure that ‘trigger’ is triggered when the viewport is moved out，When scrolling up after starting？
See the Pen bGpGOxJ by xf-ngc7293 (@xf-ngc7293) on CodePen
-
3 hours ago, ZachSaucier said:
I would set it up like I did in my demo posted above - add some animations all starting at the same to the master timeline, then add some other animations all starting at the same time to the master timeline, then repeat the master timeline.
Thank you for your reply
-
12 hours ago, GreenSock said:
That was actually a bug in versions prior to 3.2 - smoothChildTiming was supposed to be
falseby default in everything except the globalTimeline. It has been fixed in recent versions. So the behavior you expected was actually a bug
So in your demo, all you need to do is set
smoothChildTiming: trueon the "tl" timeline so that the children get moved around as you restart() them.But like @ZachSaucier said, that reduced test case looked very strange to me. You were putting both child timelines a the exact same start time, and they're animating the same object at the same time. So you're creating conflicting tweens. And I don't understand why you'd organize things in sub-timelines like that either. Maybe it'd help if you explained what your end goal is because I suspect there's a much cleaner way of doing it. We'd love to help.
The above case is what I want to achieve.
main: gsap.timeline({defaults: {duration: 2, ease: 'back.out(1)'}, paused: true, onComplete: mainComplete}),sub: gsap.timeline({paused: false, onComplete: subComplete}),
These two callback functions(mainComplete, subComplete) call each other based on a condition, as shown in the first demo.I want some guidance to make the logic look less strange.Thanks for your help!
-
I know it ’s weird to do this, this is my program and I ’m honored to have your guidance.
See the Pen PoqOdYX?editors=0010 by xf-ngc7293 (@xf-ngc7293) on CodePen
-
In version 3.1.1, this program can be executed cyclically, but not after version 3.2.x.
See the Pen GRJOyYV?editors=1111 by xf-ngc7293 (@xf-ngc7293) on CodePen
-
Well, these are just minority views. I think I should deal with these problems myself.Thank you for your reply.
-
1
-
-
On the first point, I think I need better functionality than reducing the volume a little bit, because there is a similar treatment in my common method,and now I have to load two methods to deal with the same problem. The volume of GSAP is reduced, but the volume of my whole project is not optimized.
In addition, with regard to the question of endless loops, I think this is something that every programmer should take the initiative to avoid. In fact, who would try to disrupt such an array([1,1,1])?
The second is wrap method. I see that the result contains the first parameter but not the second parameter. Shouldn't it contain both parameters?
gsap.utils.wrap(0, 5, n) => 0 <= result < 5, why not 0 <= result <= 5
The last is wrapYoyo method.
Therefore, it is difficult to correspond to the corresponding relationship between the index value and the result value, whether it is flashback or positive order according to the first two parameters.gsap.utils.wrapYoyo(0, 3, 0) => 0 gsap.utils.wrapYoyo(1, 3, 0) => 2
These are my personal opinions. If it looks confusing, I'm sorry I used machine translation. -
Although it has not solved my doubts, thank you for your reply.
-
1. shuffle()
Can you add a parameter to ensure that the result is different from the original value?gsap.utils.shuffle([1,2,3]) => [1,2,3]
2. wrap()
I see that the result returned by this method does not seem to contain the second parameter. Is this as expected?
gsap.utils.wrap(5, 10, 0) => 5 gsap.utils.wrap(5, 10, 5) => 5 (not 10?)
3. wrapYoyo()
I failed to grasp the logic of this method.
https://greensock.com/docs/v3/GSAP/UtilityMethods/wrapYoyo()
let num = gsap.utils.wrapYoyo(5, 10, 7); //8 (index 7 maps to index 3 in a 6-element range)
The result of the example of the document is 8, but what I get is 7.gsap.utils.wrapYoyo(5, 10, 7) => 7
I try to understand it like this,
value 10, 9, 8, 7, 6, 5, 6, 7, 8, 9, 10... index 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10...
but I seem to be wrong.
gsap.utils.wrapYoyo(1, 2, 0) => 2(not 1?) gsap.utils.wrapYoyo(1, 3, 0) => 2(not 1 or 3?why 2?)
Please forgive me for my poor English.
About the Observer plugin
in GSAP
Posted
Yes, that's my goal, just like Draggable.