Search the Community

Hi! everyone. this is my demo tunnel https://codesandbox.io/s/digit-tunnel-4vkc91?file=/src/index.js and i wanted to add easing with GSAP to make mousemove more smooth, like in this website https://archiviostoricoexperience.gruppotim.it/en/optical-fibre .. but couldn't achieve such smooth easing effect , can someone help .?

Hi everyone! I'm trying to animate x1 and y1 line attributes of an svg with gsap.quickTo by mousemove. But it doesn't work at all. Maybe I'm doing something wrong. Or maybe gsap.quickTo doesn't work correctly with these svg attributes. Anyway, please help me to understand how I can solve this problem. Thanks!

I want to rotate the box on mouse move 1. when cursor goes UPSIDE box will rotate anti-clock-wise 2. when cursor goes DOWNSIDE box will rotate clock-wise How it could be done with gsap ease Thanks

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

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.

Hello, Scenario: While moving the mouse the red color box should move and scale. On mouse leave should go back to original. Problem: After mouse leave also it is not resetting, I mean it is not going from scale 1.2 to 1. Also it is very slow transform. please help me.

Hi! I have some problem with mousemove event, so when mouse inside of the div that I attached event all tween working, but if inside of div cross its element, animation starts to retrigger. You can see this when you mousemove inside div and then hover over text. If I remove time animation, there is no problem. What am I doing wrong? Sorry for my English. Thanks in advance.

Hello, is there a way to integrate such an effect with GSAP? I know I can achieve this effect with css transform translations, but in my case I need to use background-position to animate the movement related to the mouse position. an idea/approach about what I'm thinking: .. // TweenMax.to(".top-image", 1, {backgroundPosition: newvalueX+"px "+newvalueY+"px", ease:Power4.easeInOut}) // .. ps: The pen is just a preview example for what I'm trying to achieve. Hope some GSAP guru' drop some knowledge or show me a solution , I'm a newbie in the field... Thank you, Best regards! Alex

Hi GreenSock, Is there any topic (codePen) with the effect shown in this pen? I need this effect to work for every elelement of a large gallery. Thanks!

Hi guys. I made a pen with vertical scroll. What I want to achieve is a smooth scroll and and animation to start form top and end at bottom of the screen like in this example: http://ultra.studio/ Thanks in advance for your help!

Hi, I'm getting more and more familiair with GSAP and JS, but I'm only diving in to it since last week. Now I was playing around with the TweenMax.ticker and mousemove event based on: But I got stuck on trying two things: 1)move SVG paths in the same way as the circle element; I did get the rect element to work by changing the cx and cy into x an y, but I don't know how to interpret this with a path position, since the ticker event does not seem to work if I give the SVG group tag an id. 2)I attached a codepen sketch based on the pen from Blake Bowen; as you can see I simply added a timeline to rotate one of the elements. Now I want this to keep on rotating around the origin value of the element, but this doesn't happen. The origin point stays on the begin value of the element (which is the top left corner) and does not move accordingly to the mouse position. Initially I want to be able to do: 1)move SVG paths based on mouse position 2)know how to apply more than the change of position accordingly Can anyone help me? Please let me know if my question is unclear. Thank you in advance!

Hello I just started out with GreenSock for a one page scroll site, and I have to say, i love it! I'm having a little trouble with something though. I'm trying to make a cinema light, or searchlight if that's a better term. The spotlight has to move around with the mouse and the gradient should stretch/rotate and follow it. I think this demo will make things more clear: http://codepen.io/sugomi/pen/shrDl anyone can help me with this? Thx in advance

Hello there, I was wondering if the Throw Props plugin is something that is coming soon, I believe its one of the most useful plugins as it allows quite many applications. Would really love to see something like this on Javascript for our "mobile content creating urges"... Keep up the good work, the lib is amazing so far.