Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'cursor'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 14 results

  1. https://tympanus.net/codrops/2021/05/04/dynamic-css-masks-with-custom-properties-and-gsap/
  2. Hello, I've been looking for a way to keep my cursor as a grab when the item is not been dragging and to grabbing when the item is being dragging but then come back to grab when the user stop dragging the item. I don't know if I was clear but it's similar to this cursor action: http://fetedelabiere.promo-agency.com/ Here's part of my code where I managed to make change the cursor when the drag starts but not when the user stops Draggable.create(div1, { type: 'x,y', bounds: parent, edgeResistance: 1, onDrag: function() { childX.html(this.x); childY.html(this.y); } }); Draggable.get("#div1").vars.cursor = "grabbing";
  3. Hey guys, I'm having a couple of issues with animating a cursor. The aim is to have the cursor smoothly snap into position when entering a box and smoothly animate back to mouse position on leave (rather than jump to the new mouse position). Also, the cursor should smoothly animate when moving from one box to the other quickly. 1. How would I go about animating the cursor smoothly back to the mouse position after leaving the box (not sure how to store the mouse position while active = false. 2. When moving from one box to the other quickly, how would I prevent the cursor from jumping/flashing back, just before it locks into the new position. Hope this makes sense. I feel like both issues are related to storing the mouse position while the fixCursor function is running? but still unsure how to make it animate smoothly. Any help is greatly appreciated. Cheers
  4. Hi, Id like to know if there is a GSAP function that can create the effect of a mouse following the cursor
  5. Hello ! I use this resource and it works pretty good but the hover animation freezes on scroll. Any Idea to solve this ?
  6. Hey there 👋 I have no real idea of what I'm doing when it comes to javascript, but I'm totally hooked on the interactions and animations that are possible when using it. And today I discovered GSAP, which seems to tie all that stuff together very nicely. So here I am asking for help, trying to implement GSAP into my most recent 'Project'. What I'm trying to do is replicate an interaction on the Wieden + Kennedy home page. The closer your cursor gets to the featured project title (lower left of the screen) the more it's underline grows. When the cursor reaches the project title, the underline reaches it's full length, and underlines the project title. I'll also point out that it doesn't matter where your cursor is hovered on that featured project title, the underline stays at it's maximum value. (Something I've been having trouble figuring out) [It's definitely easier to see this in action than to read my crappy explanation of it, so it might be worth clicking the link up there] Phewf. After piecing together sections of code from around the web, and before I discovered GSAP. This is what I had. https://codepen.io/samuelhigginson/pen/MWKBjJm It's.. kind of something that works? But there are a couple of things that aren't quite right. My line starts to get going as soon as the cursor enters the viewport. On W+K's page there seems to be some kind of 'Trigger Div' which initiates the interaction. My line only reaches 100% when the cursor is exactly in the centre of the Project Title. W+K have a much more satisfying 'Hover anywhere on the Project Title' thing going on. If the window resizes, the distances change and things go wrong. And the final difference I can spot, and what ultimately led me to GSAP. That delicious easing. My lines width is a scaled replication of the cursors distance from the Project Title. What W+K have, is a buttery smooth, slippery sliming line. And I'm all about that. So I got to googling and came across this post, here on the GreenSock forum. I noticed some similarities between the solution offered there and what I had going on, so I forked the pen and started trying to merge that solution with my own. And I ended up with this. https://codepen.io/samuelhigginson/pen/LYGgaab?editors=1111 Not great. But.. not totally disgusting? I know I've probably over complicated this massively, and my approach and calculations are probably way off. But this is all my perfectly smooth brain can manage, for now. So I'm reaching out to you people with the GreenSocks and asking for help. Anything you can suggest to get this little line dancing would be greatly appreciated. Cheers.
  7. Hiya everyone. I am new here but really hoping someone can help me out as I would love to use this amazing library to achieve this cool effect just posted on codrops; (https://tympanus.net/codrops/2020/07/01/creating-a-menu-image-animation-on-hover/). You'll see in the article it explains that the effect works on the direction of your cursor - actually it has two effects, one for when the image is revealed/hidden and the other for moving the mouse over the nav title. I'm trying to adapt the direction based element of this effect into a Webflow project and I am struggling with this because the tutorial seems to go the long way round of achieving these effects (see the layout at the start of the tutorial) and also the fact that there are multiple JS files created. I am fairly new to js and also GSAP (love it though) so a lot of this is a bit overwhelming and also makes it very hard to achieve using Webflow but essentially I would like help with these two directional based effects on hover; 1) I just want to reveal and hide elements on hover with the direction dependent on the mouse direction 2) moving the mouse to the left rotate's the image to the left, and to the right it does the inverse. If anyone is able to offer me help I would hugely appreciate it! Thanks so much
  8. Hey, I've seen this animation when hovering but I have no idea how to do it. Perhaps someone can help me with this please? Hover.mp4
  9. Hi Greensock lovers, How can i achieve this (https://codepen.io/labdev/pen/amyyyw) with Greensock 2Dphysics? And as extra I want to have a cursor hover function. Basically when you hover with your cursor the "object" should be pushed somehow. Thanks. Fatih
  10. Hi, new to these forums. I have a html5 banner I created in Animate for DCM with a click tag. Everything works fine, the link works if you click the banner, it validates in DCM html checker, but when i view the banner in a browser the cursor doesn't change to the hand/pointer cursor like it does on all links, banners. Any idea why this would happen? Any help would be much appreciated! Thanks!
  11. Hey guys, Is it possible to tween the cursor css property? I've got a div on my website that expands on hover, and I'd like to change the cursor when it expands so that you know to click on it to do more. So, is it possible to tween the cursor property? I've attached a codepen that's a basic example of what I'm trying to do.
  12. Hello, I've changed my cursor to grabbing while it's grabbing the object but i'm having troubles to return to the cursor 'grab' after I drop the object. Any tips on that? Here's my code so far: Draggable.create(div1, { type: 'x,y', bounds: parent, cursor: "grab", edgeResistance: 1, onDrag: function() { childX.html(this.x); childY.html(this.y); } }); Draggable.get("#div1").vars.cursor = "grabbing";
  13. I am using TweenLite.to to change a path when a clipped svg is hovered. I change the cursor on mouseover event (which triggers the Tween). I would like to "reset" the cursor (to default) when the tween is done, but tween seems to be modeless, so execution follows downstream. How can I handle this? thanks
  14. Hi, I have a Sprite with a button in the center. The sprite can be transformed, but when the mouse is over the button the cursor stays in its default TransformManager move cursor. So, to keep the default "button" cursor (the one with the hand and the finger) when the mouse is over the button., i did the following: _uploadPhotoHereMessageMc.addPhoto_btn.addEventListener(MouseEvent.MOUSE_OVER, showButtonCursor, false, 0, true); private function showButtonCursor(evt: Event): void { if(_transManager.isShowingCustomCursor) TransformManager.customizeMoveCursor(new Shape(), false, 0, 0); } However, i'm getting a null pointer exception from the TransforManager: StackTrace: TypeError: Error #1009: No se puede acceder a una propiedad o a un método de una referencia a un objeto nulo. at com.greensock.transform::TransformManager/snapCursor()[D:\datos\CarlosB\Documentos\Dropbox\PlasticoLab\Pixote2\PhotobookMaker\com\greensock\transform\TransformManager.as:2275] "No se puede acceder a una propiedad o a un método de una referencia a un objeto nulo" -> means null pointer in Spanish. Is there a better way to do this?
×