Create foward motion warp speed effect

[Michael S]

I have a background of outer space that is made of js particles with general divs of content on top of it (logo,h1,h2) When a button is click and or scroll is initiated, I want the background to quickly move into warp speed (

See the Pen GgbgLe by acarva1 (@acarva1) on CodePen

)  and blur the content and move and load the next page. I plan on using https://barba.js.org/ for the page transition but am new to GSAP and not sure how to achieve this otherwise. 

 

Should I recreate the stars background using GSAP and then animate the warp speed or can I use existing particle js? I really am not sure how to go about this so any suggestions or guide would be greatly appreciated. 

 

Thanks so much in advance and please let me know if you need anything to help answer. 

See the Pen rOzmve by bob6664569 (@bob6664569) on CodePen

[iDad5]

Am I getting you right, you already have the Warp stuff (no gsap as far as I can see)  and you plan on  using barba for the page transition, so the only thing you are missing now is blurring the headline(s)? 
A little CSS filter should do that trick, as great as GSAP is, I don't see why you would add it in this case, if all you need from it is a blur. 
But maybe I'm misunderstanding you.
 

[Michael S]

Thanks for the response! I have the landing page with the background made from the particles.js with the logo, cta, h1, and h2 tags, BUT I don't have the warp speed yet, I was just showing that as an example. My question is should I start all the way over and make the entire thing with GSAP, or should I start with what I have and use GSAP to create and initiate the warp speed? 

[GreenSock]

I'm totally unfamiliar with particles.js but if you build the animation with GSAP you can very easily animate the timeScale() of the animation(s) to speed it up or slow it down. To be clear, GSAP has absolutely nothing to do with rendering anything - it's just for animating properties of anything that JS can touch. 

[Michael S]

can you  please clarify what "rendering anything" means? This help put it in perspective, I'll just build it from scratch with GSAP, html, css etc.

 

Thank you. 

[Cassie]

Sure. For instance - you asked

 

Quote

Should I recreate the stars background using GSAP 

You can't create backgrounds or stars with GSAP. Creating elements and drawing those elements on the screen is 'rendering' You can create elements with HTML CSS or with canvas or SVG.

GSAP is a very expansive, robust animation library, but that's all it is! Just for animating stuff that already exists.