Sahil

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.

https://p5js.org/examples/hello-p5-flocking.html

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.

Here are couple of threads about counting numbers using GSAP,

Quote

thanks, Sahil. somehow the page short-link got changed. should work now: https://greensock.com/try-plugins

Ya it is fixed.

BTW, don't you guys think there are too many pinned posts? Right now I can barely see first question when I visit forum.

I love the last demo, really cool and great post as always.

Something is wrong with your previewCase function, it throws errors as follow,

uncaught exception: Cannot add undefined into the timeline; it is not a tween, timeline, function, or string.
react-dom.development.js:619:7
uncaught exception: Cannot add undefined into the timeline; it is not a tween, timeline, function, or string.

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.

Quote

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

404

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.

https://codepen.io/Godje/post/bouncing-particles-tutorial

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/

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.

Ya you can use GSAP to do whatever animation you like that you would normally do with any elements once you add text. Following is a simple example with SplitText but you can do all kind of different effects.

Check this thread for drag along the path demo by @OSUblake

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.

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.

Never really thought about it, always assumed they perform same, which is correct.

You can play with custom ease to get desired effect when usual eases don't work for you.

You can also merge two eases by using this demo by @GreenSock if you are after an effect like that.

Check @OSUblake's post in this thread.

You will need to use Linear.easeNone ease on each tween for smooth transition. You can also set it globally for all tweens if you want.

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.

No I haven't heard of any other library than PixiJS, GSAP has plugin for it as well. It seems best option for 2d animations on canvas.

Forgot to point out, you see staircase effect because you are using Elastic ease.

Is this what you are trying to do? I changed how you were creating your tweens because you can use staggerTo tween to do same thing instead.

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. 

https://csstriggers.com/

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.

You can use an element with fixed position as background, it will scroll along the page.

@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.

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.

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.

You can do that by using CustomBounce and CustomEase.

Check docs and following video on how you can do it,

https://greensock.com/docs/Easing/CustomBounce