Jump to content
Search Community

Search the Community

Showing results for tags 'velocity'.

  • 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


X


CodePen


Company Website


other


Location


Interests

Found 12 results

  1. Hi community! I'm new here and wanted to explore the power of GSAP. I want to replicate the 3 images rotating on this site through GSAP. I've got a working Codepen. However, in my code pen, the images are not linked to the speed at which the user scrolls, as seen on the demo site. I was able to slow it down to make it close enough, but the images need to rotate 360 degrees, and the rotating speed is dependent on how fast the user is scrolling. I was thinking of using the .getVelocity(): method, but I could use help setting up my function. Demo site: https://www.andrewleguay.com/ Codepen: https://codepen.io/keertea/pen/QWXVVbr?editors=0010 Any help will be appreciated, thank you!! 🙏✨
  2. Hi All, Longtime listener first time caller. MY INTENTION - I am creating a page that locks / prevents scrolling at the mid point of each section of a page. - When the scrolling locks an animation plays. Upon completion of the animation the page unlocks and the user can scroll again. - I am using body {overflow:hidden;} to prevent scrolling. (Doesn't have to be this but I don't think it's related to the issue) - I am using a forEach loop to create each sectionsTrigger. MY ISSUE - The page locks at the exact trigger point if the user is scrolling quite slowly. - If the user scrolls quickly the page does not lock at the right place / the scrollTriggered animation plays at the wrong place. - The velocity of scroll determines how badly it misses the trigger position. WHAT I WANT - I want to lock the page at the exact moment the trigger hits the start target position. - Regardless of how fast the user moves I want to stop the page at the start target position. - I am willing to sacrifice some performance to be precise with the lock. RECREATING THE ISSUE - I've created a minimal Codepen Demo: https://codepen.io/SeeMax/pen/PoXJjzZ?editors=1111 - I've place a fixed red line at the center of the screen to make the screen- center very clear. - I'm adding a red border to the body when the locking takes place to make it very apparent it is locked. - The body unlocks after 3 seconds (I didn't want to add complexity by making it wait for a second animation in the demo). (I'm assuming there's some sort of beneficial debouncing that doesn't jive with what I'm doing but I've been wrong many times before.) Thanks so much. Cheers, Max
  3. benoit

    stop the scroll

    Hi, I try to stop the scroll during a tween. It's not work like I expect. A text is hidden under a block (height:400px), when the scroll is at 400, this text is fading in 1s. I need a 1s disable scroll. Then scroll is working. I try this : https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily but it's look like the browser relaunch the velocity after enable the scroll.
  4. So I am trying to replicate an effect I recently saw (the inspiration for what I am trying to build can be found at the top of the page here) and managed to figure out the endless slider effect (yep, I am definitely far from being a gsap master). But now that I have the endless effect, I want to figure out how they sped up the effect on the users scroll. I linked what I currently have built via CodePen. I found this post that effects the speed of an animation using ScrollTrigger but it was recommended to use the containing div and animate that which doesn't really work for this case, at least I don't think it does but I am open to being wrong. I would appreciate any insight on how one might be able to adjust the slider scroll speed on scroll down. And before I end this, thank you to everyone in the GreenSock team. This library is incredibly powerful and unbelievably helpful. I just wish I would of tested it out sooner.
  5. Hello, So i used the ScrollTrigger skew example to tilt the three js camera instead the image skew property. Apart from that, a text div is being translated and sphereGroup is being rotated using gsap value & it is working nicely The problems i face with velocity are: 1 ) there is no smoothing happening when going to the calculated position 2) the above problem also leads to jerk when scroll direction is switched it 3) with mouse wheel the the incremental jumps does not look nice (which could also be solved with better smoothing maybe?) any tips ? suggestions for better gsap to three logic also welcome last function in codpen has all the gsap properties
  6. Hi there, I'm trying to speed rotation animation on scroll with use of ScrollTrigger. It works pretty well except when I do a fast scroll the rotation gets crazy and I don't really know how to limit the speed... Maybe I do it all wrong, I tried to clamp value but any ideas on how to limit that correctly? Thanks for your help ! Alex
  7. Hi GS, I've got another question for some thing I'm trying: In the codepen I've attached you'll see a quick set up for something like a pong game. I managed to get the pong-handlers to move on click Now to move the ball I was just exploring to use the ticker and the ball position++ - Is there a way to change the velocity of such movement? Of course I have a lot of other challenges ahead, like the collision detection and the direction of the ball; But that's for later (most probably I have to consult the forum again :-)) Hope to hear from you again! D
  8. What I'm going for: When an element reaches the edge of it's boundary box, it re-positions itself at the other edge of it's boundary box. If thrown, it will maintain velocity. I'm using .set and it's removing velocity. I saw on another thread that there's a way to access velocity but I'm not sure how to keep it when re-positioning the element, or even if I'm thinking about it in the most performant way. https://greensock.com/forums/topic/8198-end-position-with-draggable-and-throwprops/ Thanks!
  9. Hi, For the purpose of distilling this problem to its principal components, let's say I have 2 object that are side by side, say at y=100 pixels. I want both of those to fall down the screen, but to different destination y locations. I want them both to accelerate (easeIn), at the same speed, even though their distance to tween is different. Also I want to cap their final velocity, so they never fall faster than pixels/sec. Here is an illustration: (initial position) Sprite1 Sprite2 (fromX = 0, fromY = 0) (fromX = 100, fromY = 0) (toX = 0, toY = 200) (toX = 100, toY = 400) (falling --> Sprite 1 and Sprite 2 have the EXACT same Y location as falling, since they are using the same custom easing IN function to control their acceleration and final velocity) (falling) .. .. .. Sprite1 has stopped here) Sprite1 (x=0, y=200) Sprite2 (is at the exact same Y locations because they are following the same easing IN function, regardless of total distance to travel (Sprite2 continues to fall until it reaches it target location of y=400) Sprite2 (x = 100, y = 400) Thanks, --Kestal
  10. Sometimes it's useful to tween a value at a particular velocity and/or acceleration without a specific end value in mind. PhysicsPropsPlugin allows you to tween any numeric property of any object based on these concepts. Keep in mind that any easing equation you define for your tween will be completely ignored for these properties. Instead, the physics parameters will determine the movement/easing. These parameters, by the way, are not intended to be dynamically updateable, but one unique convenience is that everything is reverseable. So if you create several physics-based tweens, for example, and throw them into a timeline, you could simply call reverse() on the timeline to watch the objects retrace their steps right back to the beginning. Here are the parameters you can define (note that friction and acceleration are both completely optional): velocity : Number - The initial velocity of the object measured in units per second (or for tweens where useFrames is true, it would be measured per frame). (Default: 0) acceleration : Number - The amount of acceleration applied to the object, measured in units per second (or for tweens where useFrames is true, it would be measured per frame). (Default: 0) friction : Number - A value between 0 and 1 where 0 is no friction, 0.08 is a small amount of friction, and 1 will completely prevent any movement. This is not meant to be precise or scientific in any way, but it serves as an easy way to apply a friction-like physics effect to your tween. Generally it is best to experiment with this number a bit, starting at a very low value like 0.02. Also note that friction requires more processing than physics tweens without any friction. (Default: 0) gsap.to(elem, { duration: 2, physicsProps: { x: {velocity: 100, acceleration: 200}, y: {velocity: -200, friction: 0.1} } }); Demos PhysicsProps Demos To learn how to include the PhysicsPropsPlugin into your project, see the GSAP install docs.
  11. Hello! Has anyone noticed when using Draggable with throwProps:true, with restricted bounds AND with snap that if throwing the object and try to catch it before it reaches its destination it directly jumps to calculating end position. It should just freeze the object when the user click on it when it still in motion. Like when you are not using the snap. Im creating a webapp with a navigation that I can throw Like the facebook app. Try with the examples http://www.greensock.com/draggable/ the first one "Throw" with the setting "Snap to grid" checked. You will see what happens. Any thoughts or solution? Thanks //Robert
×
×
  • Create New...