Jump to content
Search Community

Sahil last won the day on March 31

Sahil had the most liked content!

Sahil

Business

  • Posts

    1,015

  • Joined

  • Last visited

  • Days Won

    72

 Content Type 

Everything posted by Sahil

34
35
36
...
39
Page 35 of 39  
  1. Sahil
    Here is very basic demo. You can change movement based on element you are animating. You can also use parallax.js which responds to gyroscope on mobile devices.
  2. Sahil
    Here is the demo with jQuery.
  3. Sahil
    Sorry for the confusion, I did attach demo in my reply but not sure how it got stripped.
  4. Sahil
    Not really good approach, you can't use same timeline on each element and expect different result. Take a look at my demo and follow it. Also, you are not really on right track. I would suggest to take a short break, follow few tutorials from GreenSock's YouTube channel. Otherwise you will just stay confused and miss whatever deadlines you are trying to meet.
  5. Sahil
    Also, you were repeating same animation on each element and adding delay manually. I have updated demo with staggerFromTo tween, which basically repeats same animation on each element with delay that we pass as 5th parameter. Same thing can be done with staggerTo and staggerFrom tweens.
  6. Sahil
    You have too many things going on in your pen. On line 80, which I have commented out, you were adding active class then again you were doing it on line 107. You can animate classes with GSAP, by adding or removing class using className parameter. When you use TweenMax.to($mainNav.find('li'), 0.5, {className: '-=active'}); You are telling GSAP to remove class active from this element. If you use plus sign, GSAP will add that class to the element along with already existing classes. Using className will also animate all properties that can be animated, so basically any difference that causes due to class change will get animated.
  7. Sahil
    @OSUblake Just gave it a try to see how drop shadow behaves. Any other properties behave weirdly or it all depends on combination? @Maelfyn Follow Blake's approach, it will be far more reliable.
  8. Sahil
    In your example, only last filter is getting applied. You also have typo in second filter 'grayscale'. As for tweening, it looks like you will have to use entire string and change values you want to animate.
  9. Sahil
    I don't see any errors in code you shared, a demo with particular error would be a lot easier to help you.
  10. Sahil
    Yup, It won't work on IOS /safari and many modern browsers either. You will need to use polyfill which seem to support older browsers upto IE7 as well. Again, if you are just practicing then it is fine but if you are working on some project, you are better using ScrollMagic unless polyfill works for you. http://caniuse.com/#search=intersec Also, just curious why you don't want to use ScrollMagic?
  11. Sahil
    Just to clarify your original question. The animations array only had 1 element in it so when you were using animations[1].from(), which is a GSAP method. You were getting that error as there was no element at index 1.
  12. Sahil
    Look for options being declared twice, remove one of declaration.
  13. Sahil
    Follow this two part tutorial by Carl, you will be able to create complex animations by combining multiple timelines and be able to control entire animation by controlling master timeline. https://www.youtube.com/watch?v=ZbTI85lmu9Q https://www.youtube.com/watch?v=8ETMjqhQRCs
  14. Sahil
    So I have "fixed" it. I referenced post by @PointC in other thread, and kind of just copied certain parts without any knowledge of this IntersectionObserver. But you had multiple issues with the way you were mapping array or even selecting targets. I would suggest to recreate his pen few times by writing each line rather than copy paste to get used to it. (Not being judgemental or anything, I don't know your coding skill level so just suggesting.) As for any detailed answers wait for him or Blake to respond.
  15. Sahil
    Ohk, it doesn't show that error on codepen. So neither of us saw it.
  16. Sahil
    Not really sure what you are trying to fix, Jack has answered correctly. Maybe you need to update your demo and add more content to test it.
  17. Sahil

    Scale image up

    Sahil replied to nick2price's topic in GSAP

    You can set the scale from CSS using transform property. img { transform: scale(0.5, 0.5); } Or you can define a fromTo tween and pass it to 'setTween()'.
  18. Sahil

    Smooth Page Scroll

    Sahil replied to OSUblake's topic in GSAP

    @Noturnoo here is what you might be looking for.
  19. Sahil
    No more, it is perfect. Another issue though, slideDelay and slideDuration are overlapping. If you set slideDelay and slideDuration same, slide pauses for brief moment only. It can be fixed easily but just letting you know. Thanks. Unfortunately I wasn't able to use it and I went with what I had done at the time. Still this is perfect starting point as there are always questions on sliders.
  20. Sahil
    You can use modulus on current rotation by 360 and get absolute value. Based on that you can determine where arrow is pointing. You can play with snap a bit so arrow won't stay on edge.
  21. Sahil
    I think you are trying to update timeline on restart, but I don't think that is possible. You will have to regenerate timeline with new values. Your code can further be reduced to fewer lines but I guess you get the idea.
  22. Sahil
    No, you can download it for free. It should be in the zip file that you downloaded.
  23. Sahil
    Never used snap.svg but that seems specific to SVG animations. So if you use GSAP, you can use same syntax for SVG and dom element animation. Plus 99.99% chances are whenever you work professionally, you will use GSAP.
  24. Sahil
    I have updated the demo now you can make it work with the way you want. You will need to position those images as you need them for animation. After that they will animate and wrap by keeping same distance as long as you set number of elements and wrapper width correctly.
  25. Sahil
    Slightly incorrect answer, it needs some corrections. Let me update the demo.
34
35
36
...
39
Page 35 of 39  
×
×
  • Create New...