Search the Community
Showing results for tags 'mouse'.
Found 23 results
-
Hello! 👋🏻 GSAP you are the best! I would be very grateful if you could help get this animation when hovering the cursor changes text and color as well as text as if inside a circle. I've been looking for a very long time for a solution but couldn't find one. Thank you very much in advance!
-
I'm trying to use greensock for an animation I have to rotate a number of objects around the mouse. Anybody has any idea on how to use this code and be able to rotate multiple objects around the mouse by just one class?
-
Hey! I'm trying to recreate this menu https://www.steven-hanley.com/ So when you hover on the navigation and move mouse from right to left or opposite, menu starts to scroll. I saw in the forum a codepen with exactly the same vertical effect using gsap, but I've tried to find it all day and nothing. Can someone give me advice from where should I start, please?
-
Hey, just wanted to share a small fun pin i made today morning with you guys.. Greensock rocks things, and make so easy and smooth the animation, so you can focus on he rest of the codes always, and let Gsap do what he can best. Btw. i read about the pipe() and gsap.quickSetter() which maybe would make things even more smooth here ? Do you think it would make a big different? Feel free to use this and or give feedback if you think things could be done better, smoother, cooler ! Thanks and Happy Tweening to you all !
-
Hi, How can i create this sort of effect with gsap https://perficientdigitallabs.com/work Thanks
-
Hi, am trying to tween little bit physic inertia when the mouse move. I don't know if is the good word in english. "inertness" ? My target it when mouse are move, the sprite follow the mouse with inertia on rotation values. But when mouse stop, call a elastic tween to give a physic feeling. The result are not optimal here , and maybe no very performance friendly. If any tweener or math pro can help me on this ? A made a codePen if you try Move mouse and stop it very fast , you will see the feeling am targeting. It not work all time this is also weird, maybe bad code or math logics here. Am no a pro in physic sorry. thanks a lot for any help guys https://codepen.io/djmisterjon/pen/EJzBzV .
-
Greetings, I'm fairly new to GSAP and I would like to know how to implement a snap method so that when the translate of the wrapper is between 0 and 20% it goes automatically to 20%, like a classic snap to a point. PS. a lot of the code has been forked from Sahil89 Thanks in advance for the help. - Gabriel
-
Hey Guys, I'm new to GSAP and reading through docs to find out if a particular effect can be created with GSAP. The link below shows the animation in motion and I've created most of it except the distortion that occurs when the mouse moves from one section to another. Can this be done with GSAP, if yes, how? https://www.pinterest.co.uk/pin/466755948875173685/?lp=true Thanks.
-
Hello. I tried to get a kind of focus helper with the mouse when the pointer rolls over an item. but i can get a good easing when the mouse are hover a element. I do not know if I explain myself well, but I will try. i use the pointerLock API. when the mouse icon get hover a new elements, i want to help the mouse to move to center of element. But without disturbing the control of the mouse. the idea is to create a focus helper to center the pointer on the elements when the mouse has a contact with the outlines. i try my best to make a codepen. for active the pointer lock, just click inside the blue square. if your move the mouse, your will see that the behavior is a little messy when the mouse flies over a white square. An idea on a good approach to create a similar system? thank a lot for help.
-
Would anyone know a method or algorithm in JS to calculate and detect if a mouse is moving by a circle around a target? Example if a rotate mouse *2 time around a specific XY point, i would like to re-center my camera obj. (in my context i need algoritme for a camera engine) I search i little bit on the web, but no found good formula to perform this. Maybe a will need a special api ? or a easy trick to do this with GSAP ? i take a try on this forum, i not find similar codepen project to do this. thank for suggest guys. in context, the target position are know, i need to find a way to check if the mouse do multiple circle rotation around this target XY, in a timelaspe (maybe 1000 or 2000 ms)
-
Hey, I am desperately searching for a way to play one step of my timeline when the a mouse scroll gets started. All methods that I have found trigger the events multiple times on scroll and gsap gets really confused. Is there a convient way to build something like that with greensock? What I want to build is a animation triggered webapp like these: https://theshift.tokyo/ http://www.contiducco.it/index.php?route=common/home My Code at the moment: $(window).bind("mousewheel DOMMouseScroll", function(event) { var docTimeline = new TimelineLite({ paused: true }); docTimeline.add(TweenLite.to(".lightLogo", 1, { y: "200%" })); docTimeline.add(TweenLite.to(".text", 1, { x: "0%" })); // Events when scrolled down. if ( event.originalEvent.wheelDelta < 0 || event.originalEvent.detail > 0 ) { docTimeline.play(); } else { docTimeline.reverse(); } });
-
Hi everyone, I am trying to perform an animation with a delay on every subsequent SVG 'path'. In this Codepen link you can see that every letter of the SVG logo is separated by a 'path'. How do I perform a DrawSVG animation delay for each path, similar to how it looks like in here. This was animated using Anime.js, but sadly it couldn't control the animation using events as good as DrawSVG, but the delay of each letter was what I'm looking for. Is there a quick way to do this? Or would I have to manually delay every path by giving it IDs? Thanks
-
Hi guys, This is more of a pre-sale question than a problem, to be honest. But I do need some help with the Javascript/jQuery. I'm working on an SVG animation using Anime.js, but I feel that there are limitations to the animation that's possible for SVG. I was trying to replicate https://thieb.co homepage animation. So basically on mouse down, the animation starts playing, and mouse up, the animation reverses to the empty state. Due to Anime.js's limitations, I was wondering if DrawSVG is able to replicate the aforementioned effect? With a 'completed' callback to prevent the animation from reversing once completed, etc. Here's what I got so far: http://alfianridwan-fms-stories.netlify.com/ with Anime.js Is it possible to replicate this with DrawSVG? (before I purchase the membership and find out that I can't replicate it!) Thanks, Alfian
-
Hi is anyone know how to create a mouse follow option with onpress activate draggable handler like this website. if you have any thoughts about this. please share with me.. https://gleec.com/
-
Hi Everyone! I'm new here at GSAP and I'm trying to create an interactive infographic. (final goal) For now, I want to move the right image when the mouse hovers over it. When the mouse doesn't hover over it, the image should go back to the starting position. It's a quite easy movement but for one reason the code doesn't work. Can anyone tell me what I'm doing wrong? Thanks in advance
-
Hi, I made this tool called ScrubGSAPTimeline a while back that enables you to scrub through a timeline using your mouse. Not sure why I never posted it here. Or maybe I did - my memory is terrible. Anyway you can move your mouse out of the window to play the timeline animation and it plays from where your mouse was inside the window - so if your mouse was 45% along on the X axis of your window when it left, your animation will play from 45% of the way through the timeline's duration. You can also double click to pause scrubbing. This is useful if you want to right click and inspect an element in dev tools. You'll need to set the position of your main DIV/SVG container to absolute (I think!) otherwise you won't see the time display. I use this on every single animation project I make now so I hope you find it as useful as I do. GitHub https://github.com/chrisgannon/ScrubGSAPTimeline CodePen demo: http://codepen.io/chrisgannon/pen/zGmdBN Cheers, Chris
-
So i've watched the GSAP intro videos; they're great. I mean they're so good they made me think I'd be able to use this library straight away. However I am new to coding and web design and while GSAP allows me to do things i'd never be able to imagine doing on the web I'm struggling to control the outcomes. In my codepen I'm trying to use the mouse hover events to initiate a simple tweenmax animation. I want the user to interact the pouring motion by just a mouseover but once the mouse leaves the bounds of the image it would go back to the starting position. I think my js coding is messy and not the best way to achieve this, and I think the revert or restart() functions might be what I should be doing, but i'm not sure on syntax or design. TL;DR. How can I use the timeline feature to revert the tween back to it's starting state upon the jquery mouseleave event?
-
Hello, Is there a way for the viewer to control an object with his mouse? First I want the object to enter the stage and stop. After the object stops I would like the viewer to be able to move it up and down on the y axis using his mouse. Any help would be appreciated!
-
Hi gang, Insert standard gushy comments about how great Greensock is...(cos it really is THAT good) I'm hoping there's something I've overlooked or that there's a quick and easy fix for what I'm seeing.... In my site I've encountered an issue with very quickly dragging objects with the mouse (in my limited test I don't think it was as much an issue on touch devices) onDragEnd I'd like to sometimes tween the dragged item back to it's original position (dependent on certain conditions) which works fine on most tests. However I noticed than when very quickly dragging and releasing it would sometimes get "stuck" on the release of the mouse and not tween back to it's original position. Using Developer Tools I could see that when this happens a style such as: transform:matrix(1, 0, 0, 1, -297, 14) or sometimes (not sure why it's different at times?) translate3d(-297px, 14px, 0px) is still applied to the draggable even though I've set a tween of x and y back to 0 (using a Draggable setup of type:"x,y"). A minimal version of the issue can be seen on this Codepen: http://codepen.io/anon/pen/GlHLa in which all I'm trying to do onDragEnd is : TweenMax.set(e.target, {clearProps:"transform"}); but this seems to be ignored when dragging too quickly and I'm left with the translate/matrix still applied. Perhaps there's another draggable setting I need to use or another event like onRelease needs to be utlised? Any pointers would be most appreciated. Thanks all.
-
I have created a sample for it: http://codepen.io/vincentccw/pen/vLIGh If you look into my javascript panel I have 2set of codes, one using jquery and GSAP another is just jquery(comment out). The code will be active once use scroll down using mouse wheel. My question is how do I use scrollTop but completely in GSAP? As I think GSAP is more readable and animate faster and most importantly I can set up more complex animation at the same time.
-
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?
-
How would I implement a slight object scale change on mouse over? Thanks! Zach
-
I am trying to create a background effect using jquery and GSAP. I have a large repeated background that when the mouse moves over it, the background should follow slightly with easing. There will be a large content div with a transparent BG over top of the main background. The background should continue to follow even when the mouse is over the content. How would I implement this? Thanks, Zach
