Jump to content

Sahil last won the day on November 25 2018

Sahil had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by Sahil

  1. I just came across a video, coincidentally it turned out to be about processing js. Few years ago I had bookmarked processing js page but never really went through it. So just out of curiosity I visited processing js page and realized now that has become p5js.




    Anyway, I was going through their examples page and came across this flocking demo that wraps particles around the canvas. I removed all the flocking code, here is basic wrapping demo. But wrapping isn't big deal, following snippet from demo is for wrapping.


    Boid.prototype.borders = function() {
      if (this.position.x < -this.r) this.position.x = width + this.r;
      if (this.position.y < -this.r) this.position.y = height + this.r;
      if (this.position.x > width + this.r) this.position.x = -this.r;
      if (this.position.y > height + this.r) this.position.y = -this.r;


    There might be more unnecessary code that you can clean up step by step.


    See the Pen PRRxMP?editors=0010 by Sahil89 (@Sahil89) on CodePen



    • Like 5
    • Thanks 1
  2. Quote

    What about adding some type of quick launch button that will open up a starter pen with all the plugins? That would be even better.


    Ya I would love it if there is button on right bottom corner of forum that will open simple panel with all links. I had contacted codepen to do something about making links available from search feature but doesn't look like they will do it.



    this page https://greensock.com/try-plugins was only added today, so its not like you overlooked something.



  3. It is good idea to post partial demo even if it isn't working so we have something to work with.


    I don't know why are you using pngs for your particles, from the gif you posted, it doesn't seem necessary. Anyway, I don't have ready demo to post. Following is a tutorial about bouncing particles I came across recently, you can go through it.




    To wrap particles around canvas you just need to change bouncing calculation to wrapping. You can do that as follows,


    if(particle.left - particle.width/2 > canvasWidth){
    	particle.left = 0 - particle.width/2;


    Note: The above snippet I have written is just to explain, I haven't gone through demos from tutorial I posted, but this should give you idea.


    You can also search codepen for demos or google for simpler tutorials. If you want to learn about physics based animations then you can get this book http://lamberta.github.io/html5-animation/


    • Like 4
    • Thanks 1
  4. I don't know how you have set up things, that's a lot of code to go through. Maybe you are setting some flag that determines if panels are open or closed. (Never used react either)


    Following is simple demo, how I would do it. Keep track if panels are hidden or not and animate them to the hidden or visible state. Right now in your example, I am guessing that when you click on any panel you are changing the state so when you click your menu button it just resets their position instead of hiding them. Hope this gives you idea.


    See the Pen jzzLRe by Sahil89 (@Sahil89) on CodePen


    • Like 4
  5. Not sure what the issue is, it looks same on Firebox and Chrome on windows.


    Maybe you are missing something from your production code. You can confirm that by opening your demo in debug mode, which will prevent codepen from messing your code. You can read following thread about stacking context, see if that helps.




    • Like 4
  6. You can either calculate the difference scale will cause or you can record values after applying scale. Check following demo where I calculate difference scale will cause, this will work only if your transformOrigin is center, otherwise you will need to do more calculations.


    But what you are doing doesn't seem like right approach because if user scrolls, your element vanishes at wrong point. You will need to recalculate position in both direction to fix it.


    See the Pen RMjNJJ?editors=1010 by Sahil89 (@Sahil89) on CodePen


    • Like 3
  7. Just made your sky container's position fixed. Changed easing on mickys to Power1.easeInOut because you are animating elements for long time to short distance so it was looking stuttering. With easeInOut animation will be fast at start and end so you won't notice stuttering a lot. Changed your tweens to staggerTo tween. And commented out anything that wasn't important. And added new div tag for content.

    • Like 3
  8. 1. Ya x and y translates work better than left and top. When you animate left or top property it causes layout recalculation. x and y translate take advantage of GPU and doesn't cause layout trigger so they perform better.


    2. Span tags are inline by default and css transforms don't work on inline elements, if you set your span tag's display as inline-block then it will work.


    3. Ya game developers use that trick but if you visit some of the websites from examples page, you will rarely find someone doing that. Generally if your animation isn't performing at 60fps on PC or on even some high end mobiles then you are doing something wrong or asking browser to do too much work. 




    You can optimize performance by avoiding triggers wherever possible. Avoid animating too many elements and use canvas to animate.  Avoid creating too many tweens on movemove, scroll events by using requestAnimationFrame, so your calculations will happen only once per frame. Start measuring performance of your work from start, on mobile and by using chrome's CPU throttling. So you will have idea about how much more you can do on the page and keep performance better. Also about setting animation to 30FPS, if your animation drops around 30-45FPS on PC it will drop below 30 on mobiles, so optimizing has to be your first step.


    You can search through the forum for discussions on performance, recently we are getting a lot of questions on performance.

    • Like 3
  9. @Mantvydas Following example uses TweenLite's tick event that gets called on each frame, similar to requestAnimationFrame if you are familiar with that. Right now this example works with single parent only but you can make it work with multiple parent elements with little work. I have left a lot of comments explaining everything. There are some libraries out there that do parallax effects for you, parallax.js supports gyroscope as well so you can check that if you want.


    As for not being familiar with GreenSock and coding, I will suggest you to spend some time on forum every day, an hour or so. Start by looking at simple questions and try to solve them. It's great way to learn coding and get familiar with GSAP.  Starting with something small is easy get learn and get answers as well.


    See the Pen PRKQVp?editors=0010 by Sahil89 (@Sahil89) on CodePen


    • Like 3
  10. You don't have to delete the post.


    Ya you can do it with CSS but it is going to be time consuming to get it right and make changes. With custom bounce plugin your bounce effect is in sync with squish effect out of box. You will save a lot of time and be  able to make changes by changing couple of numbers.


    I think this post reminded @GreenSock of something he had been working on so he posted, it certainly doesn't have effect you are after but if this library gets released he probably will add bounce effect to it.

    • Like 2
  11. I have mixed feelings about it, it seems more like effects library like animate.css. But it might attract different group of users. I would love it if all animations behaved like drop effect where content moves along the effect. Would it work as responsive effect? People will expect it to be so for sure, if it's not going to be high maintenance then it seems like great addition to GSAP.

    • Like 1