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
    You are using TimelineLite, use TimelineMax instead while defining your timeline.
  2. Sahil
    @smallio I removed all GSAP libraries from your demo and it still works as it is, so I am not sure how you used draggable on it plus you are not using draggable library in your demo either. Probably you are confusing flickity's draggable with GSAP. Unfortunately I have never worked with flickity so I can't suggest anything to achieve that effect. Maybe you should try flickity's forum, you will find answers there. If you want to go pure GSAP then you might be able to use and modify following demo.
  3. Sahil
    @smallio Sorry I didn't understand, you want to recreate that flickity slider using GSAP? And another scroll bar at bottom with which you will be able to control slides? If I understand correctly you should create your own thread because even though it looks same, it won't be same thing to do as what Noturnoo is trying to do, it will just create confusion in active thread which has it's own confusion to be resolved.
  4. Sahil
    @smallio Perfect?
  5. Sahil
    @zadvorski It gets tricky because GSAP mainly is for animation and works with time even if it is tiny fraction it will work. We ran into similar question once and I had to create my own question on this topic, where you can find more detailed explanation. You can get around it by adding tiny fraction of time as following demo. Also, please avoid posting private demos as we can't fork them.
  6. Sahil
    @smallio To me following implementation makes more sense if you don't want to get do a lot of Math. As for to complete circle from current position, it is going to take a lot of calculations to determine angle etc. Also, you should either use mouseenter and mouseleave or mouseover and mouseout. Though keep in mind they behave differently, usually mousenter/mouseleave does the job.
  7. Sahil

    Revealing a background

    Sahil replied to Stagnax's topic in GSAP

    He changed his demo and replaced canvas tags with divs, he just had to set display block on canvas elements. But probably no one will understand what I am talking about. @Stagnax That's why you should never edit posted demo, if you want to make changes just fork your original demo and make changes to it. It keeps forum organized and gives any new reader exact idea about what was the conversation about.
  8. Sahil
    @GreenSock @OSUblake I have been wondering about smoothOrigin for html for last couple of months, is it too complicated to implement or just will take too much KB space and doesn't have as much as demand compared to svg?
  9. Sahil

    Revealing a background

    Sahil replied to Stagnax's topic in GSAP

    Canvas elements have inline-block style by default, following article will explain what is happening. https://css-tricks.com/fighting-the-space-between-inline-block-elements/ Though it feels like you are confusing canvas elements. They are used to draw on them, you are trying to use canvas elements as normal HTML elements.
  10. Sahil
    @kpiraro Sorry for the confusion, I didn't remove unwanted code in my demo. I have commented out everything that wasn't necessary. And following is cleaned up demo. Usually in timeline you use to, from, fromTo, staggerTo, staggerFrom, staggerFromTo to animate anything. The call method gives you opportunity to call any function that will execute normal javascript i.e. non-GSAP stuff. So in this case when first two tweens are done animating the call method calls playVideo function. And inside the function I am using general method to play video. Docs seem to be inaccessible at the moment so I can't post any links but you should visit docs for more details about call method. Hope this clarifies, but feel free to ask any questions if you have anymore doubts.
  11. Sahil
    @kpiraro It's okay to post your queries, if it takes you more than hour for something simple then you should definitely post a question here. I think there is some confusion, and GSAP doesn't control videos out of box. What you can do is, use call method of TimelineMax to play the video. Check following demo. I changed background color just to see what is happening.
  12. Sahil
    That's going to be headache to implement in HTML, you should try to do it using Canvas as done on benmingo site.
  13. Sahil
    Ya what @Carl suggested works in IE9, also you were using really old version of TweenMax.
  14. Sahil
    Ya I was thinking the same while making that demo but it is big demo so decided to split it in two parts. @Ryzulla Here is the first part of the video, in first part I am just explaining all the basic math behind effect, in second part I will explain how you can implement all that in grid. @Stagnax I am yet to finish part two of this video, I will probably make video tomorrow if I finish part two quickly otherwise I will try to upload on Thursday. But I believe this video will be helpful for you as well. It explains some of the basics of canvas. You will find it helpful.
  15. Sahil
    I am surprised by 0.7% stats for IE7 more than 8,9,10.
  16. Sahil
    Here is how you can do it, but there are some limitations to clip property. Your image must be positioned absolutely, otherwise you will need to use canvas.
  17. Sahil

    pushing divs

    Sahil replied to asaelz's topic in GSAP

    @Visual-Q @Acccent You can do that by taking this approach in @OSUblake's demo in following thread.
  18. Sahil
    Hi @Artsx, Sorry I think I was blind yesterday and didn't really realize overlay was animating to right with slight rotation. I hope I didn't sound unwelcoming, hope you enjoy using GSAP and your time on forum. Feel free to post your queries, we would be happy to help. Just small update, in previous demo I was rotating overlay but a more reliable approach would be to animate skew, it is reliable because it will work with almost all dimensions.
  19. Sahil
    Ohk, here is one last attempt.
  20. Sahil
    I don't know what was the issue but the overlay div wasn't getting height as it's parent in Firefox 58.0.2 so I cleaned up your html and moved scripts in Codepen's settings. Trick is to scale up overlay div and set transformOrigin to '100% 100%' i.e. at the bottom right corner and then rotate overlay by 90 degrees. @Artsx I updated demo and added z transform to the background animation and perspective to the parent.
  21. Sahil
    It is happening because you have html and body height set to 100% so it adds scrollbar to both html and body. What you can do is, wrap the image that fades in inside another div, with overflow hidden. Also, instead of animating top/left you should animate x and y whenever possible, it will give you far better performance.
  22. Sahil
    Something must be overflowing, you can fix that by setting overflow: hidden to whatever element is getting this scroll bar. You have set overflow to 'visible !important' to element with id 'place' which is causing this.
  23. Sahil
    @Carl Not working on windows, version 58.0.2. The element weirdly rotates around and changes it's width and height. Not sure what must be causing it.
  24. Sahil
    Looking at your example, it feels like you are confusing GSAP with something else. Many methods you have used are not part of GSAP API. In the demo below I am animating values of an object and using them to update the div, div is not directly being animated. You can see from example how you can use directional plugin. From what I tested, it is working as expected, see if it helps.
  25. Sahil
    I don't see any reason why it wouldn't work in Firefox. Please post a reduced test case demo on codepen.
×
Login Create Account