Jump to content
Search Community

Sahil last won the day on March 31

Sahil had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Sahil last won the day on March 31

Sahil had the most liked content!

About Sahil

Contact Methods

Recent Profile Visitors

19,405 profile views
  1. You can use scrollTo plugin to scroll to certain element, but because you are animating sections, you can't use them as reference. Instead, you need to wrap them in another wrapper so you can use this wrapper in scrollTo. https://codepen.io/SahilAFX/pen/jOReGmM
  2. Fixed background only works if element and any of its parent element doesn't have any transform applied or doesn't have position set to fixed. In order to create scroll effect, ScrollSmoother wraps content in a fixed parent, you can see this by inspecting from dev tools. To achieve this effect in ScrollSmoother, you will need to position the image manually. https://codepen.io/SahilAFX/pen/GRLXaGJ
  3. Sahil

    MotionPath and Scale

    There you go https://codepen.io/SahilAFX/pen/eYojXbm I have set fixed dimensions for container for demo. When you make it responsive, you will need to change the value by which you divide pos.y. You can use getBBox method of svg to get current height of the path. You will need to tweak animation and calculation for desired effect.
  4. Sahil

    MotionPath and Scale

    Ya, if you want to use ease then use this.ratio instead of progress. It will give you actual value that is being used to apply ease, it can go beyond 1 on certain eases. To get individual progress, use a loop to create tween for each orb. Additionally, now that I rethink your goal, it is a bit too complex. It would be easy to create this effect by manually calculating position of orbs and rotating them around. If you still want to use MotionPath and ease then you may have to use getPositionOnPath and use these values to calculate scale, this way scale won't be tied to progress.
  5. Sahil

    MotionPath and Scale

    To get progress inside the modifier function, use regular function. Arrow function will inherit value for 'this' from enclosing scope, so in this case it will be window, if you use regular function then you can get progress using 'this.progress()'. z-index, you need to swap orbs manually.
  6. You can achieve that with position sticky, you need to set top property as well for it to work. Check updated demo.
  7. It does pin as expected but not visible because background image is not set on second section. Instead, after setting bg I see that 2nd section is not unpinning because it is shorter than other sections. Setting end to "+=100%" unpins it correctly. https://codepen.io/SahilAFX/pen/oNOdMQd
  8. I think this is what you are trying to achieve, check comments for explanation. https://codepen.io/SahilAFX/pen/xxejZqy
  9. Use absolute: true, in Flip.fit, it will fix the jump.
  10. Because you are setting ease none on the set tween instead of to tween, so by default it animates with 'Power1.out' ease and slows down at end.
  11. You can simply set position of nav on resize. Also, you don't need to recreate draggable on each resize, you could update snap value like in example below or use function to calculate snap position. (Check docs to see how to use function to calculate snap value.) https://codepen.io/Sahil89/pen/eYXGPOa
  12. Hi, Sorry can't provide a demo. I am trying to debug an odd behavior in complex project. We have all our transformOrigin values set in % and nowhere we specifically set transformOrigin in pixels but in one scenario values change from % to px. While changing to pixels, transform origin gets calculated correctly as 50% but gets set as pixels, so if div has 300px width, transform origin gets set to 150px. Is it a known behavior or in any scenario gsap will choose to switch to pixels?
  13. In past I used to use "power4.out", which is not big difference to "power3.out". Though I wanted option for other eases now because I am working on a carousel project with ability for customization and ability for different eases was one of the option was requirement. Also, I am using drag direction as input to change slide. If I throw and snap, then snap looks as you would normally expect but if I snap to next slide using little drag, then next slide snaps without "back" ease kind of effect so I also wanted to address this using ease option. I think I could still achieve it by using extra tweens but I wanted to keep all logic in one place. Anyway, I think it won't be possible as inertia plugin doesn't support to method. I will later check if I can intercept and mimic effect I want. Thanks
  14. Hi, Working with draggable after some long time. I wanted to use an ease on draggable in some situations but seems like it's no longer supported. I think because of inertia plugin doesn't have to method? Though I was curious if it's still possible to add support for easing? I have attached old and new reduced test case. Please let me know. Thanks, Sahil gsap 2.x https://codepen.io/Sahil89/pen/ZEaqxMz?editors=0010
  15. Dear Sahil,

    Can you please help with any poc. i am new on gsap and tweenmax i want to create a pinned scene where i will use a car tyre and that will be zoom out on scroll and car will be appear with some  animated text.


    Please help me. 

    Thanks in advance 

  • Create New...