Sahil
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Sahil
-
If you console log children of clone parent, you will see it only returns one child element. It basically confirms that you can't access shadow root, there maybe way but I don't know.
-
I am not sure, but I doubt something like this must be built into GSAP as it is really rare someone will need it. I think simplest way would be an onComplete callback on timeline as follows and manually pass all targets, TweenMax.set(arrayOfElements, {clearProps: 'all'}); Following is similar thread that discusses same, https://greensock.com/forums/topic/11320-clearprops-of-timeline/- 4 replies
-
- 4
-
-
- clear
- timelinemax
- (and 4 more)
-
Deleted incorrect answer. Here is the thread that discusses limitations of use tag, see if it helps.
-
This one is perfect, I have modified it further. Because you are using Power4 ease, I am setting tolerance upto 10 for progress under 0.4. After than tolerance is set to 0. So when wheel is spinning faster, it will still trigger the indicator. When it slows down, lower the tolerance so it will trigger only on edges. You will have to spend some good amount of time to fine tune it further. EDIT: you can compare currentRotation with last rotation so you don't have to rely on easing effect while fine tuning. Higher the difference, higher should be tolerance.
-
See if it works for you, I am using modulus of current rotation to trigger that indicator animation. I am using tolerance of 2 so it will mostly trigger even if it is spinning too fast. Higher tolerance causes it to trigger at random places. You need to update your logic to get deg variable because after first spin it spins to same value. As for your wheel, it had '49% 50%' as transformOrigin which was making it spin randomly.
-
That is small issue with calculation, wait. EDIT: Because window is larger than width of container, minX was being set to positive value. Meaning it was being set to right from it's position, it can be resolved by checking if minX is larger than 0 or by checking if window is larger than container and set minX to 0.
-
Ya you can post a reduced demo with what you have done, it will be a lot easier for us to respond and explain. If you mean the offset on left and right on that site, it is just some extra padding to the container that is being dragged. When I say viewport, I wanted to say any div that will act as window to display your slides. It can have actual width of viewport/window or it can be 50% or anything. The container's width is then used to set minX and maxX. I guess that should clarify.
-
It can be resolved by using really tiny centered div as target and UI as trigger. Your thoughts?
-
I meant this, I am using trigger to rotate target element. My assumption was that if we use trigger, everything will be calculated based on trigger but in this case mouse starts responding on trigger but rotation is still calculated from the target element. EDIT: Reason I was trying to do it this way and still hoping to is, so if there is any crazy UI that someone wants to do, their interface won't be blocked by the triggering div. PS: so silly of me to suggest OP to use that dialer as overlay rather than simple div.
-
This demo had the solution. There is still a lot of code that you won't need, also it assumes that your slides will have same width.
-
You are in tough luck, he probably won't be online until Monday/Tuesday. @GreenSock might suggest something, otherwise I will try something tomorrow but can't guarantee it will work.
-
I will post a demo tomorrow to clarify.
-
I am not really sure what the source is going to be, you mentioned that you save last frame of canvas so I thought that you can simply copy source file in that codepen, let the timeline play or seek the end. After that you can click the button and it will copy from source canvas into the editor canvas. Following is demo I made based on assumptions. You can paste your entire file in the HTML section I have commented, and click on 'Copy Canvas' button. It will detect canvas element from source you paste there and copy current frame into the editor canvas. EDIT: I don't know workflow/end result of banner animations. But you if you mean you want to use it in Adobe Animate which I assume outputs everything on canvas, then you should be able to wrap this entire thing in a script. Load it into animate, and load this UI at the bottom or somewhere. If animate lets you access it's canvas by external script, then you will be able to make it work. Again I am just assuming many things, this thread seemed interesting and thought it is possible so I tried to suggest it.
-
Thanks. My idea was to keep UI separate from the target, so I tried to use proxy target '<div />' with '#spinner' as trigger. Hoping that it will work normally like many other slider examples I had seen that use proxy target. But it doesn't return expected angles. EDIT: I meant to say what is difference when using proxy on Draggable of type 'rotation' as it behaves differently.
-
Great, so your question is resolved?
-
You can only animate stroke, fill cannot be drawn. Following is the thread that discusses same, you can get some tricks from it on how you can use mask to imitate drawing fill.
-
I know why it is happening but not sure if it can be fixed, only Blake can answer that. Otherwise it will need to be done in some other way where tween isn't tied to draggable.
-
The reason that doesn't work is because original demo contains jQuery UI element with id '#slider'. Again I will repeat my previous advice, follow those two new tutorials carefully. After that you should be able to do pretty amazing sequences.
-
Here is how you can do it. TweenMax.to(animation, 1, {progress: animation.progress() + delta/5}); you can change the duration or the value you are dividing with based on width, but 5 seems like good distance. @GreenSock Didn't know tweens can be used like this, amazing.
-
Got it, let me give it a try otherwise Blake will resolve it.
-
Ohk, can't you use demo I posted? It has functionality to call next or previous slides, the one you are editing will need some work to do.
