Sahil
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Sahil
-
What is Hamster? Here is the stackoverflow thread that talks about mousewheel events.
-
Great. Also, you will save a lot of time in future by learning how to do something rather than copy pasting entire code and trying to figure out how it is done or what is going wrong. It is best to type each line by hand and doing same process over and over to get familiar with anything new.
-
Here is the video where Carl walks you through that exact demo. If you follow that step by step and follow these two part tutorial, you should be able to combine them. https://www.youtube.com/watch?v=ZbTI85lmu9Q&t https://www.youtube.com/watch?v=8ETMjqhQRCs
-
@emmanuelulloa I think it can be further automated by manually completing timeline and then copying last frame from Canvas into editing canvas? As if I am correct, all banners are made using single file which can be pasted into the codepen to extract last frame?
-
Here is one example I have stitched together, I am still not good at SVGs so I haven't spent much time fixing it, but you should get the idea. Now you just need to place the triggering element on top of it with opacity 0 and you should be able to update UI however you want. Ignore where the blue dialer points. Notice how I am using offset and rotation to calculate drawSVG. @OSUblake @GreenSock What changes when using pseudo target on Draggable with type 'rotation'? I tried using it with '#spinner' as trigger, but I was getting weird angles.
-
Can you reference his codepen demo/thread? If possible also post demo of what you are working on.
-
The Draggable constructor is different than usual draggable that we define. Following is the syntax for defining Draggable using constructor var draggableInstance = new Draggable(singleTarget,{}); When you use draggable constructor you can pass only one target, and developers recommend using usual method instead of using constructor. Using that instance you can access it's properties and methods. You can define draggable normally and access it's properties and methods of draggable as follows Draggable.get(domElement).x; I doubt you can use events in same fashion. What are you trying to do exactly? Can't figure out from your code.
-
any smarter way to convert angle returned by atan2 to a 360 degree angle? In my solution I had used following code to adjust angle, if(clickRotation >= -90){ clickRotation += 90; }else{ clickRotation += 450; }
-
Those are UI components, not something that GreenSock does out of box, GreenSock is library rather than a framework. Though I do feel that the required functionality is missing to achieve what you are trying to do. Personally I would be disappointed if I have to rely on yet another library to make something work or write a lot of code to make draggable work in certain way. I am eager for @GreenSock's response on this. I doubt you will get out of box solution for this from GreenSock where you can write few lines of configuration code to that kind of UI component. At best you will get few utility functions that will help you implement it on your own. If your expectation is to write 10-15 lines of configuration then you should use ng knob instead.
-
Here is working demo, right now I am using window width to determine direction. So check in 50% left or right. In actual implementation you will do many things differently but this should give you idea. Notice how I am using startDrag to trigger drag after setting position of the container, rest should be easy.
-
Well, you don't have to worry about how they have done it. You can achieve that by using a container, with width of 250 pixels maybe. Let the container follow your mouse like in previous thread, when you click, update your draggable and it's bounding container. Depending on direction set it's position. That's easiest way you can achieve it in my opinion. You can work on rest of the details pretty easily once you get this core functionality working.
-
Problems with tweening on PC within Chrome browser
Sahil replied to fatSkeeter's topic in Banner Animation
@Jonathan @GreenSock Are only mods allowed to have signatures? I don't find any option to edit signature. -
Same idea, just use apply bounds depending on which direction you are.
-
Problems with tweening on PC within Chrome browser
Sahil replied to fatSkeeter's topic in Banner Animation
@Jonathan Nice idea of all docs links in the signature, never occurred to me. Gonna copy yours, saves a lot of time. -
You can set bounds by passing absolute values to bounds property while creating Draggable. Draggable.create(target, { bounds: {minX: 0, minY: 0, maxX: 200, maxY: 200} }); You can change bounds by using applyBounds method and passing new bounding values. You can instead use container as bounding object as well and element will remain within parent boundaries. You can also use applyBounds on resize so any element that goes out of bounding box will be positioned back inside. If you comment out resize event and resize the codepen, you will see the target stays out of container.
-
Ya it can be very useful if there was option to get mouse position/angle from center(or any point as well maybe?). If you remember last question you solved involving this pen, it could have been solved very easily if there was way to get mouse angle. It can be used for parallax effects as well if support for all mouse events is added just to get mouse position. My request would be, Method to get mouse position relative to target. Mouse angle respect to center and if possible any point passed using absolute values or percent. What do you think? @OSUblake What would be right approach to get element position irrespective of it's parent, for both DOM and SVG?
-
You can use css for simple effects like hover etc. Anything little more complex can use GSAP, as you have a lot more control over your animations. 1. I think in general you should use whichever method that makes you write less lines in CSS or JavaScript. For example, a simple hover effect in CSS is perfectly fine. But keep track of your approach otherwise you will end up over complicating things. 2. Any animation that involves sequence of more than one animation should use GSAP. 3. Then there are many examples of people trying to do things in pure CSS, it is fascinating. But I don't think it is worth it, as most people who disable JavaScript don't really care about effects. You will make your life easier by using GSAP for complicated animations.
-
rotationOrigin seems to return same values irrespective of where you click or drag.
-
After spending some I managed to partially implement it, just to realize it will be a lot simpler if there is any helper function that returns the angle of clicks respect to center. As technically you don't really need anything from Draggable, you just need angle/rotation and update GUI based on it. @OSUblake welcome back, hope you are well now. Does GSAP have any helper functionality that will return the angle of clicks?
-
While animating width, you can't set origin as it won't be a transformation. Instead you can set div to float right, as a result it's width will shrink to right instead of left. Another way you can do it is by animating scaleX instead of width and set origin to ''100% 50%". It will cause the element to shrink to right.
-
@mikel thanks, looks like op answered his own question but it needs some work for touch devices as it isn't working on mobile. I guess it can be easily fixed by correct events. I did consider raising events to trigger drag and realised it will need event data and seemed too complex. Just to make us feel better, docs say you will rarely need startDrag.
-
You can do that by dragging actual element, and leaving a clone in the place of original element. Create a function that adds draggable functionality to element and call it every time you create new clone. While dragging, just drag actual element and leave the clone behind. I had created a partially functional demo but wasn't sure about your actual requirement so didn't finish it. I also was a little confused because you mentioned offset. In case you are dragging the element into the another container, you can just append it to new container and it will stay attached to current drag.
-
Ya I felt so too, it will be a lot easier to get answers if you ask multiple questions one by one.
- 4 replies
-
- 1
-
-
- control timeline
- function held timelines
- (and 1 more)