Jump to content
GreenSock

Sahil last won the day on November 25 2018

Sahil had the most liked content!

Sahil

BusinessGreen

  • Posts

    1,002

  • Joined

  • Last visited

  • Days Won

    71

 Content Type 

Everything posted by Sahil

  1. Sahil
    I have used onComplete to hide them back.
  2. Sahil
    Where is the problem?
  3. Sahil
    Here is demo with delay before parallax effect happens. You can play with movement, timeout and ease effects to see what works best for you.
  4. Sahil
    If the sidebar contains the target element, then it shouldn't trigger mouseout. A demo would help.
  5. Sahil
    Unanswered question? that's strange. Take a look at following thread, it must be what you are looking for.
  6. Sahil
    Ya you can have multiple elements with different movement, which creates this effect. They all are probably reacting to same event with different movements. You can create similar effect by setting different movement. I have updated demo with two elements. About gyroscope, you must have seen 360 video on mobile. By using parallax.js you can have same movement as we move mouse whenever user physically moves the mobile.
  7. Sahil
    https://greensock.com/get-started-js That's where you can start quickly. There are other videos on the channel which are essential. After that spend some time reading docs so you get familiar with all available options/features. That should be enough to get started.
  8. Sahil
    Well to add further, if you ever decide to move .call() ahead of tween which you most probably will, you will run into issue. What right now happening is, function is called only after entire animation and if you mouseout, it never gets called on play or reverse. But if you move it ahead, it will be called on mouseover and mouseout at the start(play) and end(reverse) of timeline, respectively. As a result, when you hover first element it's content will get cloned but by the time previous mouseout will complete and due to reversed timeline, it will call the function and set its content into secondary div. Here is demo that fixes this issue by keeping track if mouse is on the element and only then content is copied. You can fork my previous pen and move call ahead of tween to see what I mean.
  9. Sahil
    You mean you want them to appear as soon as you hover over? Just move .call() before .to() in timeline.
  10. Sahil
    Oh I thought you will figure it out so I didn't bother to do it There may be few other minor complexities depending on how your actual implementation is going to be, but if you are just going to add ul which basically strips out text and inserts ul tag in secondary div. If you had used $elem.html(), it will include that text too. Then there are other situations where you can use map. Feel free to ask more questions rather than banging your head for an hour.
  11. Sahil

    Text reveal animation

    Sahil replied to timdt's topic in GSAP

    Container is set to fixed height, text and line are set to absolute and with bottom property to zero. So now line stays at same position and text gets revealed.
  12. Sahil

    Text reveal animation

    Sahil replied to timdt's topic in GSAP

    You can simply hide it behind another div, or if it is svg then you can use mask. As for that line, keep line separate from the div so it won't reveal text.
  13. Sahil
    @OSUblake I thought you will have some corrections or different approach. One question, in case I try to implement parallax effect to respond to gyroscope, what entire set up is going to be? No, I am not going to actually do it, I would rather use parallax.js but curious about how you can implement/test such device specific effects. Edit: it can be emulated on chrome.
  14. 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.
  15. Sahil
    Here is the demo with jQuery.
  16. Sahil
    Sorry for the confusion, I did attach demo in my reply but not sure how it got stripped.
  17. 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.
  18. 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.
  19. 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.
  20. 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.
  21. 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.
  22. Sahil
    I don't see any errors in code you shared, a demo with particular error would be a lot easier to help you.
  23. 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?
  24. 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.
  25. Sahil
    Look for options being declared twice, remove one of declaration.
×
Login Create Account